Perfect for image gallery sites, here comes a tutorial suited for you. Made by Mary Lou of Codrops is a recreation of Samsung loading grid effect which can be seen at Samsung Corporate Design Center. Upgrade the way you showcase your precious photos to next level using these effects. I guess the potential of your photos are not only on the image itself but it’s also the way you present them.
TUTORIAL
The idea is simple, we will use a JavaScript to first load our initial images. Ofcourse, these images appears with no effects and while you scroll down, the animation triggers. Images will first load its prominent color followed by the image itself. We will be using ColorFinder script for that function. Other JQueries are also used to help us create a semi perfect output. A descent hover effects has also been included. You can use images of different sizes for a better appearance.
This is rather an intermediate tutorial but I already edited the codes making it easy for beginners to follow. Just be reminded to read each instruction I wrote. You should read the whole article before starting anything.
FILES NEEDED
How to use these files? Click Here!
modernizr.custom.js
masonry.pkgd.min.js
imagesloaded.pkgd.min.js
classie.js
colorfinder-1.1.js
gridScrollFx.js
samgri.css
FOOTER CODE
Where to place these codes? Click Here!
<script src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/masonry.pkgd.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/imagesloaded.pkgd.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/classie.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/colorfinder-1.1.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/gridScrollFx.js"></script>
<script>
new GridScrollFx( document.getElementById( 'grid' ), {
viewportFactor : 0.4
} );
</script>
<script src="http://mwtdatabase.weebly.com/files/theme/masonry.pkgd.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/imagesloaded.pkgd.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/classie.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/colorfinder-1.1.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/gridScrollFx.js"></script>
<script>
new GridScrollFx( document.getElementById( 'grid' ), {
viewportFactor : 0.4
} );
</script>
Note:
Red text - Change with your website address.
HEADER CODE
Where to place these codes? Click Here!
<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/samgri.css" type="text/css" />
Note:
Red text - Change with your website address.
BODY CODE
Where to place these codes? Click Here!
<section class="grid-wrap">
<ul class="grid swipe-right" id="grid">
<li class="title-box">
<h2>Tutorials From <a href="http://www.myweeblytricks.com/">My Weebly Tricks</a></h2>
</li>
<li><a href="#"><img src="http://myweeblytricksdemo2.weebly.com/files/theme/sam1.jpeg" alt="img01"><h3>Insert Text Here</h3></a></li>
</ul>
</section>
<ul class="grid swipe-right" id="grid">
<li class="title-box">
<h2>Tutorials From <a href="http://www.myweeblytricks.com/">My Weebly Tricks</a></h2>
</li>
<li><a href="#"><img src="http://myweeblytricksdemo2.weebly.com/files/theme/sam1.jpeg" alt="img01"><h3>Insert Text Here</h3></a></li>
</ul>
</section>
Notes:
Yellow text - The title for your photo collections. Please refer to the demo page.
# - The link for your photo when someone click it.
Green text - The link source of your photos.
Blue text - Title of your photo.
Of course you will be using more than one photo, so simply copy the code as a whole on BOLD FORMAT and paste it before the </ul>.
BIG REMINDERS!!!
Big reminders to avoid scratching your head.
1. Upload the images to your own template by going to Design > Edit CSS/HMTL > Add files. Or you may read "Managing Files in Weebly". Don't forget to publish it.
2. After uploading, refer the image source with your domain name, example http://myweeblytricksdemo2.weebly.com/files/theme/sam1.jpeg just like the code above.
3. Center your "embed code" element (body code) by simply clicking the HTML and choose the center icon.
4. The number of grids depends on your body width, the wider the more grid. You can easily adjust your body width using CSS, just post your request on the forum and I will help you.
CONCLUSION
I spent a couple of hours to understand and make it work on our Weebly Template. I did all the hardships and the only thing left for you is to edit the image source, its link and its title. It's time for your site to evolve.
The most important thing to remember is how to capture your visitors within seconds. These types of effects promote site engagement and lesser bounce rate.
Guys! We are already advancing here, and if you're behind, better read “10 Things that can Change the Way you Edit your Weebly Site".
0 comments: