jQuery Masonry with fade effect
2 minuti di lettura
Customize Masonry to add the fade effect with CSS3 transitions made easy.
In this example the item css is :
The animation for the container is:
And finally the animation for the added items :
bye, Marco.
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.