-2

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.

Clique aqui para acessar

6
  • Me parece animações,(animation) que foi inserida no elemento, veja isso: daneden.github.io/animate.css , você também pode inspecionar o elemento e ver o que está acontecendo lá..
    – Ale
    Commented 15/02/2016 às 12:35
  • Tem slideUps, fadeIn's, scale... Mas predominantemente fadeIn's. Commented 15/02/2016 às 12:36
  • 1
    provavelmente é o plugin mixitup.kunkalabs.com Commented 15/02/2016 às 12:52
  • 2
    @Sanção o plugin utilizado é isotope.metafizzy.co da para ver no código fonte... Commented 15/02/2016 às 15:30
  • Ambos trazem o mesmo resultado. O Isotope parece ser mais completos, com diferentes opções de "separação" em categorias diferentes.
    – Zkk
    Commented 16/02/2016 às 15:08

1 Resposta 1

2

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.

3
  • Digamos que eu queira sempre mudar conteúdo. Uma vez colocar cores, outra vez imagens, outra vez vídeo ou o que for.. Se a criação das divs estivessem no <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?
    – Zkk
    Commented 16/02/2016 às 15:44
  • @Zkk, quanto ao conteúdo, no exemplo acima a 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
  • @Zkk, quanto ao usar o <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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .