user7311741
Reputation:
Masonry Grid images sequential fade in
I'm making a portfolio for my website and I'm using the Masonry grid. But I'm trying to make the images fade in when the page opens in sequential order. Something like on this website 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 with stock images I found on the web, but the format is pretty much how I want it.
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>Upvotes: 1
Views: 2959
Answers (2)
leusrox
Reputation: 2385
I think the best way is to check if the image is loaded and then show it.
It's possible with imagesLoaded or LazyLoad plugins.
Simple example with imagesLoaded plugin:
CSS (add opacity and transition to images)
.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;
}
Use imagesLoaded plugin (cdn https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js)
$(".grid").imagesLoaded()
.progress(function(instance, image) {
var $item = $(image.img);
$item.css({
"opacity": "1"
});
});
Fork of your code: Codepen
With a slight random transition-delay effect: Codepen
With alerts :): Codepen
--
I hope that is help you.
Upvotes: 2
user7311741
Reputation:
I managed to make the images in masonry load in order to make a nice sequential animation, codepen. The ScrollReveal.js plugin helped achieve the effect.
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>Upvotes: 0
Related Questions
- fade-in/fade-out gallery of images in css at particular position
- Complex grid with images
- Masonry: how to change the default animation to fade in when new items are appended?
- Fade-in/Fade-out Multiple Images in Succession with jQuery
- How to fade loop gallery background images
- Animation on page load with masonryjs
- jquery photo gallery with fading effect
- How to fade-in images in sequence
- jQuery Image Fade Sequence?
- jquery fading gallery