home|blog|JQUERY MASONRY WITH FADE EFFECT

jQuery Masonry with fade effect

Customize Masonry to add the fade effect with CSS3 transitions made easy.

In this example the item css is :

.item {
	width: 100px;
	margin: 0px;
	float: left;
	opacity: 0;
}

The animation for the container is:

.masonry {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

And finally the animation for the added items :

.masonry .masonry-brick {
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
}

.item.masonry-brick {
	opacity: 1;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
}

bye, Marco.

share:

One thought on “jQuery Masonry with fade effect

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*