1

I was wondering how to create something like a parallax scrolling effect. The farther you scroll down, the more opaque the div gets, and after a certain point, it starts getting more transparent again. I know JS/JQuery is required to do this. Can someone give me a simple way to achieve this?

DerekDev
  • 63
  • 1
  • 9
  • you need scrollTop() and the rest you can figure it out yourself. You should try first before asking for help. – Chanckjh Apr 07 '15 at 15:18
  • possible duplicate of [Div opacity based on scrollbar position](http://stackoverflow.com/questions/10203777/div-opacity-based-on-scrollbar-position) – xathien Apr 07 '15 at 15:19

2 Answers2

0

you should use scrolltop and implement your own logic regarding the math and the div opacity will change as you scroll this is the function: $(window).scrollTop()

geekybastard
  • 61
  • 9
0

I have created a fiddle for you to help: Basically you can listen for the scroll event, and control the css opacity property based on the direction.

var opc = 1;
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        changeOpacity(0, -0.1)       
   } else {
      changeOpacity(1, +0.1)     
   }
   lastScrollTop = st;
});

function changeOpacity (limit, amount) {
    if(opc !== limit){
        opc = opc + amount;
        $('#content').css('opacity' , opc);
    }
}

http://jsfiddle.net/Mvf67/1909/

Hope this helps!

rjmacarthy
  • 2,164
  • 1
  • 13
  • 22