砌体网格图像顺序淡入

Question

我正在为我的网站制作作品集，我正在使用 Masonry 网格。但我试图让图像在页面按顺序打开时淡入。类似于本网站 Michael Molfetas. I tried using css transitions, I checked the Masonry documentation but I just can't make it work. I put together a quick codepen 的内容，其中包含我在网上找到的库存图片，但格式非常符合我的要求。

function myFunction() {
     var x = document.getElementById("myTopnav");
     if (x.className === "topnav") {
         x.className += " responsive";
     } else {
         x.className = "topnav";
     }
 }

$(document).ready(function() {
  $('#nav-icon3').on('click', function() {
    $(this).toggleClass('open');
  });
});

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 250,
  isFitWidth: true
});

* {
 box-sizing: border-box;
}

html, body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 font-size: 1rem;
}

.header {
 background-color: #FFF;
 width: 100%;
 margin: 0px auto;
 display: block;
 top: 0;
 margin-top: 7%;
 height: 80px;
}

h1 {
 margin-left: 5%;
 padding-left: 1%;
 font-family: 'Lobster', cursive;
 margin-top: 0;
 float: left;
 margin-bottom: 0;
 color: #D18E8F;
}

#nav-icon {
 width: 30px;
 height: 30px;
  display: block;
 position: relative;
 margin-right: 7%;
 margin-top: 8px;
 /*padding-right: 1%;*/
 float: right;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .5s ease-in-out;
 -moz-transition: .5s ease-in-out;
 -o-transition: .5s ease-in-out;
 cursor: pointer;
}

#nav-icon3 span {
 display: block;
 position: absolute;
 height: 4px;
 width: 100%;
 background: #8c8c8c;
 border-radius: 6px;
 opacity: 1;
 left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
 top: 0px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
 top: 10px;
}

#nav-icon3 span:nth-child(4) {
 top: 20px;
}

#nav-icon3.open span:nth-child(1) {
 top: 10px;
 width: 0%;
 left: 50%;
}

#nav-icon3.open span:nth-child(2) {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
 top: 10px;
 width: 0%;
 left: 50%;
}

.topnav {
  display: none;
}

.topnav.responsive {
 display: block;
 clear: both;
 padding: 0;
 height: 160px;
}

ul.topnav.responsive {
 list-style: none;
 font-family: 'Raleway', 'sans-serif';
 float: left;
 margin-left: 7%;
 /*padding-left: 2%;*/
 margin-top: 0;
 width: 85%;
 margin-bottom: 0;
}

ul.topnav.responsive li {
 padding-top: 16px;
 padding-bottom: 16px;
 border-bottom: 1px solid #c6c6c6;
}

ul.topnav.responsive li a {
 text-decoration: none;
 color: #8c8c8c;
}

ul.topnav.responsive li a:hover {
 color: #7EBEA3;
}

.grid {
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto !important;
}

.grid-item img { 
  width: 250px;
  float: left;
  padding: 0;
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <title>Gabriella Farfan</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
 </head>

<body>
<div class="header">
  <h1>Gabriella Farfan</h1>
   <div id="nav-icon">
    <div id="nav-icon3">
     <a id="nav-icon3" onclick="myFunction();">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
     </a>
    </div> 
   </div>

  <ul class="topnav" id="myTopnav">
   <li>
    <a href="#">Work</a>
   </li>
   <li>
    <a href="About.html">About Me</a>
   </li>
   <li style="border-bottom: none">
    <a href="#">Contact</a>
   </li>
  </ul>
 </div>
  
<div class="grid">
  <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_20912016.jpg"></div>
  <div class="grid-item"><img src="https://previews.123rf.com/images/kotokomi/kotokomi1511/kotokomi151100206/48637357-Smiles-are-always-in-fashion-Inspirational-quote-handwritten-with-black-ink-and-brush-custom-letteri-Stock-Vector.jpg"></div>
  <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_52210298.jpg"></div>
  <div class="grid-item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBlJjT5wpALRmHrOM3kLERHc01mw0GSDuMKheUGRCT2-rYN8_WfQ"></div>
  <div class="grid-item"><img src="https://4.bp.blogspot.com/-dihnACz_au0/UJlZxIsDIWI/AAAAAAAAGPE/F4u3xcep2e4/s1600/stock-illustrations-on-etsy.jpg"></div>
  <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_88472599.jpg"></div>
  <div class="grid-item"><img src="https://pbs.twimg.com/media/C9mly1dUwAAdTir.jpg"></div>
  <div class="grid-item"><img src="http://www.elliedujour.com/wp-content/uploads/2017/03/2040070-1484093522-1.640x0c.jpg"></div>
  <div class="grid-item"><img src="http://media.istockphoto.com/vectors/cute-cartoon-girl-vector-id528487686"></div>
 
</div>
  
  </body>
  
</html>

Answer 1

我认为最好的方法是检查图像是否加载然后显示它。

使用 imagesLoaded or LazyLoad 插件是可能的。

使用 imagesLoaded 插件的简单示例：

CSS（将 opacity 和 transition 添加到图像）

.grid-item img {
  width: 250px;
  float: left;
  padding: 0;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

使用imagesLoaded插件(cdn https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js)

$(".grid").imagesLoaded()
  .progress(function(instance, image) {
    var $item = $(image.img);

    $item.css({
      "opacity": "1"
    });
  });

您的代码分支：Codepen

具有轻微的随机过渡延迟效果：Codepen

有警报 :)：Codepen

--

希望对你有所帮助。

Answer 2

为了制作漂亮的连续动画，我设法在砖石加载中制作图像，codepen. The ScrollReveal.js 插件帮助实现了效果。

function myFunction() {
     var x = document.getElementById("myTopnav");
     if (x.className === "topnav") {
         x.className += " responsive";
     } else {
         x.className = "topnav";
     }
 }

$(document).ready(function() {
  $('#nav-icon3').on('click', function() {
    $(this).toggleClass('open');
  });
});

$('#grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 220,
  isFitWidth: true
});

// window.sr = ScrollReveal({ duration: 1000 });
// sr.reveal('.foo', 80);

window.sr = ScrollReveal();
sr.reveal('.foo', { duration: 1000 }, 50);

html, body {
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 font-size: 1rem;
}

.header {
 background-color: #FFF;
 width: 100%;
 margin: 0px auto;
 display: block;
 top: 0;
 margin-top: 7%;
 height: 80px;
}

h1 {
 margin-left: 5%;
 padding-left: 1%;
 font-family: 'Lobster', cursive;
 margin-top: 0;
 float: left;
 margin-bottom: 0;
 color: #D18E8F;
}

#nav-icon {
 width: 30px;
 height: 30px;
  display: block;
 position: relative;
 margin-right: 7%;
 margin-top: 8px;
 /*padding-right: 1%;*/
 float: right;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .5s ease-in-out;
 -moz-transition: .5s ease-in-out;
 -o-transition: .5s ease-in-out;
 cursor: pointer;
}

#nav-icon3 span {
 display: block;
 position: absolute;
 height: 4px;
 width: 100%;
 background: #8c8c8c;
 border-radius: 6px;
 opacity: 1;
 left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
 top: 0px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
 top: 10px;
}

#nav-icon3 span:nth-child(4) {
 top: 20px;
}

#nav-icon3.open span:nth-child(1) {
 top: 10px;
 width: 0%;
 left: 50%;
}

#nav-icon3.open span:nth-child(2) {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
 top: 10px;
 width: 0%;
 left: 50%;
}

.topnav {
  display: none;
}

.topnav.responsive {
 display: block;
 clear: both;
 padding: 0;
 height: 160px;
}

ul.topnav.responsive {
 list-style: none;
 font-family: 'Raleway', 'sans-serif';
 float: left;
 margin-left: 7%;
 /*padding-left: 2%;*/
 margin-top: 0;
 width: 85%;
 margin-bottom: 0;
}

ul.topnav.responsive li {
 padding-top: 16px;
 padding-bottom: 16px;
 border-bottom: 1px solid #c6c6c6;
}

ul.topnav.responsive li a {
 text-decoration: none;
 color: #8c8c8c;
}

ul.topnav.responsive li a:hover {
 color: #7EBEA3;
}

#grid {
  overflow: hidden;
/*   box-sizing: border-box; */
  margin: 0 auto !important;
  width: 100%;
}

.grid-item {
  width: 220px;
  float: left;
  overflow: hidden;
}

.grid-item img { 
  display: block;
  float: left;
  width: 100%;
/*   -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; */
  
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <title>Gabriella Farfan</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   
   <body>
<div class="header">
  <h1>Gabriella Farfan</h1>
   <div id="nav-icon">
    <div id="nav-icon3">
     <a id="nav-icon3" onclick="myFunction();">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
     </a>
    </div> 
   </div>

  <ul class="topnav" id="myTopnav">
   <li>
    <a href="#">Work</a>
   </li>
   <li>
    <a href="About.html">About Me</a>
   </li>
   <li style="border-bottom: none">
    <a href="#">Contact</a>
   </li>
  </ul>
 </div>

   <div id="grid">
      <div class="foo">
      <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_20912016.jpg"></div>
      </div>
      <div class="foo">
      <div class="grid-item"><img src="https://previews.123rf.com/images/kotokomi/kotokomi1511/kotokomi151100206/48637357-Smiles-are-always-in-fashion-Inspirational-quote-handwritten-with-black-ink-and-brush-custom-letteri-Stock-Vector.jpg"></div>
      </div>
      <div class="foo"><div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_52210298.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBlJjT5wpALRmHrOM3kLERHc01mw0GSDuMKheUGRCT2-rYN8_WfQ"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://4.bp.blogspot.com/-dihnACz_au0/UJlZxIsDIWI/AAAAAAAAGPE/F4u3xcep2e4/s1600/stock-illustrations-on-etsy.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_88472599.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://pbs.twimg.com/media/C9mly1dUwAAdTir.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="http://www.elliedujour.com/wp-content/uploads/2017/03/2040070-1484093522-1.640x0c.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="http://media.istockphoto.com/vectors/cute-cartoon-girl-vector-id528487686"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_20912016.jpg"></div>
      </div>
      <div class="foo">
      <div class="grid-item"><img src="https://previews.123rf.com/images/kotokomi/kotokomi1511/kotokomi151100206/48637357-Smiles-are-always-in-fashion-Inspirational-quote-handwritten-with-black-ink-and-brush-custom-letteri-Stock-Vector.jpg"></div>
      </div>
      <div class="foo">
        <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_52210298.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBlJjT5wpALRmHrOM3kLERHc01mw0GSDuMKheUGRCT2-rYN8_WfQ"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://4.bp.blogspot.com/-dihnACz_au0/UJlZxIsDIWI/AAAAAAAAGPE/F4u3xcep2e4/s1600/stock-illustrations-on-etsy.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://www.istockphoto.com/resources/images/IllustrationsLanding/img_88472599.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="https://pbs.twimg.com/media/C9mly1dUwAAdTir.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="http://www.elliedujour.com/wp-content/uploads/2017/03/2040070-1484093522-1.640x0c.jpg"></div></div>
      <div class="foo">
      <div class="grid-item"><img src="http://media.istockphoto.com/vectors/cute-cartoon-girl-vector-id528487686"></div></div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

</body>

</html>

砌体网格图像顺序淡入

Masonry Grid images sequential fade in

css

css-animations

jquery-masonry

image-gallery

masonry