Do You Want to Learn Marketing or Coding? Do You Want to Learn Marketing or Coding?

Magento JQuery Product Fade in On Scroll

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Want to add a fade in effect through jQuery when users are scrolling to the bottom of the page.

Add the following code to the header of your pages.




Create a code in the js file called script.js. Add the following code.

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(function() { // when the DOM is ready...
// Fade In function
// Hide Stuff
$j('.products-grid, #products-list li').hide();
tiles = $j(".products-grid, #products-list li").fadeTo(0, 0);
$j('.first').fadeTo(0, 1);

$j(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $j(this).offset().top ;
b = $j(window).scrollTop() + $j(window).height() -100;
if (a < b) $j(this).fadeTo(700,1); }); });}); });

This will make it so that when the bottom of your browser hits the next product it will "fade in" the content. This works best for the products-grid layout.

I Really Need

Reviewing nerdy stuff is expensive.

Consider clicking on this ad & buying that item you REALLY wanted from Amazon.

It helps a ton!

Leave Your Thoughts