Fade font opacity while scrolling

Fade font opacity while scrolling

by Nirvanachain

HTML

<p class="fade">Jump claw attack your ankles sleep in the sink I don't like that food, knock over the lamp give me fish chase the red dot eat meow. Bat leap sleep on your face I don't like that food litter box puking, knock over the lamp purr attack catnip lick puking. Hiss toss the mousie stuck in a tree jump shed everywhere, lick meow biting sleep in the sink zzz. Toss the mousie claw tail flick leap, rip the couch purr sniff toss the mousie attack knock over the lamp. Purr fluffy fur hairball chase the red dot sleep in the sink lick, jump climb the curtains eat the grass hiss knock over the lamp. Eat the grass lick fluffy fur puking, zzz catnip attack stuck in a tree leap eat. Hiss attack zzz sunbathe, stuck in a tree eat the grass sleep in the sink eat lick chase the red dot.</p>

<p>Jump claw attack your ankles sleep in the sink I don't like that food, knock over the lamp give me fish chase the red dot eat meow. Bat leap sleep on your face I don't like that food litter box puking, knock over the lamp purr attack catnip lick puking. Hiss toss the mousie stuck in a tree jump shed everywhere, lick meow biting sleep in the sink zzz. Toss the mousie claw tail flick leap, rip the couch purr sniff toss the mousie attack knock over the lamp. Purr fluffy fur hairball chase the red dot sleep in the sink lick, jump climb the curtains eat the grass hiss knock over the lamp. Eat the grass lick fluffy fur puking, zzz catnip attack stuck in a tree leap eat. Hiss attack zzz sunbathe, stuck in a tree eat the grass sleep in the sink eat lick chase the red dot.</p>

<p>Jump claw attack your ankles sleep in the sink I don't like that food, knock over the lamp give me fish chase the red dot eat meow. Bat leap sleep on your face I don't like that food litter box puking, knock over the lamp purr attack catnip lick puking. Hiss toss the mousie stuck in a tree jump shed everywhere, lick meow biting sleep in the sink zzz. Toss the mousie claw tail flick leap, rip the couch purr sniff...

JavaScript

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = $(this).scrollTop();

    //Scroll and fade out the banner text
    $('.fade').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });

    //Scroll the background of the banner
    $('.fade').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }

$(document).ready(function(){

    $(window).scroll(function() {        
       scrollBanner();        
    });
    
});