Ετικέτα: παράδειγμα

Δημοσιεύτηκε στισ

Ακορντεόν

Για να δουλέψει ο κώδικας για το εφέ που βλέπετε παραπάνω, χρειάζεται η παρακάτω δομή στην HTML:

<div id="accordion">

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

</div>

Η εξωτερική περιοχή <div id=”accordion”> ορίζει και ονοματίζει την περιοχή του εφέ. Για κάθε εικόνα χρειάζεται ένα στοιχείο <div>, το οποίο περιέχει άλλο ένα <div>, που περιέχει την εικόνα <img>.

Ο κώδικας CSS που δημιουργεί το εφέ είναι ο ακόλουθος:

/* χρήση των κανόνων διάταξης flex */
#accordion {
  display:flex;
  justify-content:space-between;
}

/* αρχική κατάσταση των στοιχείων */
#accordion > div {
  width:25%;
  transition:width 1s;
  overflow:hidden;
  display:flex;
  margin:0 1px;
}
#accordion > div > div {
  height: 100%;
  top:0%;
  transition:height 1s, top 1s;
  display:flex;
  position:relative;
  right:-50%;
}
#accordion img {
  left:-50%;
  position:relative;
  max-width: unset;
}

/* εφέ μεγέθυνσης της περιοχής κάτω από το ποντίκι */
#accordion > div:hover {
  width:75%;
  transition:width 1s;
}
#accordion > div > div:hover {
  height: 104%;
  top:-2%;
  transition:height 1s, top 1s;
}
Δημοσιεύτηκε στισ

Μετασχηματισμός

Κάποτε ήταν ένα τετράγωνο
<div></div>

 
 
Είχε πλευρές 200 pixels και κόκκινο χρώμα
<div style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Το όνομά του ήταν demo
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>

 

 
 
Όταν του έκανες κλικ, πρασίνιζε
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.background="green";
}
</script>

<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>


 

 
 
Και δε βιαζόταν…
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
 
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.transition = "all 2s";
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>