This is an example of how to fade an object based on the VERTICAL SCROLLING position of the page. Manually scroll the page to see the effect. Use the buttons on the top left to see how this is done.
<div id="fadeThisDiv">
<!--Put text or any kind of media in this div-->
</div>
#fadeThisDiv {
position: relative;/*MUST have this at least*/
}
You'll need these scripts in the <head> of your html page
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
Here's the script that make the whole thing function properly
var scrolled, scrollFactor = 0.2;/*change scrollFactor as needed*/
$(window).bind("scroll",function(e){/*actions while scrolling*/
fadeWhileScrolling();
});
function fadeWhileScrolling(){
/*Create a number between 0 and 1 based on the scrolling position*/
scrolled = 1 - parseInt($(window).scrollTop()*scrollFactor)/100;
if(scrolled < 0) {/*ensures no negative numbers*/
scrolled = 0;
}
//console.info(scrolled);
$("#fadeThisDiv").css({
"opacity":scrolled
});
}