Gostaria saber qual o nome deste efeito.
Onde tem ALL
, IDENTITY
, LOGO
e PRINT
. Ao clicar em cada item, a imagens são separadas por categorias.
Gostaria saber qual o nome deste efeito.
Onde tem ALL
, IDENTITY
, LOGO
e PRINT
. Ao clicar em cada item, a imagens são separadas por categorias.
você pode alcançar este efeito usando diferentes combinações de transform, transition e animation.
abaixo segue um exemplo completo:
var content = document.getElementById("container");
var content = document.getElementById("content");
var buttons = document.querySelectorAll("#menu input[data-color]");
var random = function (min, max) {
return Math.floor(Math.random() * max) + min;
}
var width = 240;
var boxes = [];
var cores = ["teal", "indigo", "deep-orange", "blue-gray"];
for (var indice = 0; indice < 36; indice++) {
var cor = cores[indice % 4];
var box = document.createElement("div");
box.classList.add("box");
box.classList.add(cor);
box.style.width = (width - 10) + "px";
box.style.height = random(120, 180) + "px";
content.appendChild(box);
boxes.push(box);
}
var currentWidth = 0;
var onWindowResize = function (force) {
var newWidth = window.innerWidth - window.innerWidth % width;
if (currentWidth != newWidth || force) {
content.style.width = newWidth + "px";
currentWidth = newWidth;
var colunas = [];
var limite = currentWidth / width;
for (var indice = 0; indice < limite; indice++) {
colunas.push(0);
}
boxes.forEach(function (box, indice) {
if (!box.classList.contains("hide")) {
var minimo = Math.min.apply(null, colunas);
var indice = colunas.indexOf(minimo);
console.log(box.offsetHeight);
box.style.top = colunas[indice] + "px";
box.style.left = (width * indice) + "px";
colunas[indice] += box.offsetHeight + 10;
}
});
console.log(colunas);
}
}
var onColorClick = function (event) {
var cor = event.target.dataset.color;
var todos = !cor;
boxes.forEach(function (box, indice) {
if (!todos && !box.classList.contains(cor)) {
box.classList.remove("show");
box.classList.add("hide");
} else if (box.classList.contains("hide")) {
box.classList.remove("hide");
box.classList.add("show");
}
});
onWindowResize(true);
}
window.addEventListener("resize", function () {
onWindowResize(false);
});
[].forEach.call(buttons, function (button, indice) {
button.addEventListener("click", onColorClick);
});
onWindowResize(false);
html, body {
overflow: auto;
}
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 40px;
padding: 10px;
text-align:center;
background-color: gainsboro;
box-shadow: 0px 0px 10px black;
box-sizing: border-box;
}
#container {
position: fixed;
overflow: auto;
top: 40px;
}
#content {
position: absolute;
top: 0px;
}
#container, #content {
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
}
.box {
position: absolute;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
margin: 5px;
transition-property: top, left;
transition-duration: 0.5s;
transition-timing-function: linear;
-webkit-transition-property: top, left;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
}
.hide {
animation: hide 0.5s linear;
animation-fill-mode: forwards;
-webkit-animation: hide 0.5s linear;
-webkit-animation-fill-mode: forwards;
}
.show {
animation: hide 0.5s linear;
animation-fill-mode: forwards;
-webkit-animation: show 0.5s linear;
-webkit-animation-fill-mode: forwards;
}
@keyframes hide {
0% { transform: scale(1); }
100% { transform: scale(0); }
}
@keyframes show {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@-webkit-keyframes hide {
0% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(0); }
}
@-webkit-keyframes show {
0% { -webkit-transform: scale(0); }
100% { -webkit-transform: scale(1); }
}
.teal {
background-color: #009688
}
.indigo {
background-color: #3F51B5
}
.deep-orange {
background-color: #FF5722
}
.blue-gray {
background-color: #607D8B
}
<div id="menu">
<input type="button" data-color="" value="Todas" />
<input type="button" data-color="teal" value="Teal" />
<input type="button" data-color="indigo" value="Indigo" />
<input type="button" data-color="deep-orange" value="Deep Orange" />
<input type="button" data-color="blue-gray" value="Blue Gray" />
</div>
<div id="container">
<div id="content">
</div>
</div>
para fazer as "caixas" diminuirem até desaparecerem, utilizei uma animation
combinada com uma transform: scale(n)
.
para mover as "caixas", utilizei uma transition
e setei o top
e left
na mão.
como bonus tambem tornei o exemplo responsive, então tente aumenta e diminuir o tamanho da janela do seu navegador.
<body>
, não seria "melhor" a nível de manutenção do código? Ou isso varia de acordo com o gosto de cada dev?
div.box
é apenas uma wrapper para o conteúdo, ela pode conter qual quer coisa, videos, textos, imagens, etc... o que deve ser respeitado é o largura, uma vez que estamos trabalhando com uma grid vestical.
Commented
16/02/2016 às 15:57
<body>
, entenda que o container
pode ser qual quer elemento, section
, div
, body
, etc... então você pode colocar a sua galeria dentro de qual quer elemento... quanto a manutenção de código, acredito que seja justamente o oposto, delimitar um escopo para o script irá ajudar a prevenir o aparecimento de bugs, assim como torna-los mais localizados e facilitar a sua identificação...
Commented
16/02/2016 às 16:02