Masonry Grid图像连续淡入

时间：2017-04-25 12:52:51

标签： css css-animations jquery-masonry image-gallery masonry

我为我的网站制作了一个投资组合，并且我正在使用Masonry网格。但是，当页面按顺序打开时，我试图让图像淡入淡出。类似于这个网站Michael Molfetas。我尝试使用css过渡，我检查了Masonry文档，但我无法使其工作。我将快速codepen与我在网上找到的库存图片放在一起，但格式非常符合我的要求。

＆＃13;
＆＃13; 
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
});
＆＃13; 
* {
	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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

可以使用imagesLoaded或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

-

我希望这对你有帮助。

答案 1 :(得分：0)

我设法在砌筑加载中制作图像，以制作一个不错的连续动画，codepen。 ScrollReveal.js插件有助于达到效果。

＆＃13;
＆＃13; 
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);
＆＃13; 
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; */
  
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题