I'm currently working on implementing a fade-in/out effect on scroll for a web project. In my JavaScript code, I need to specify a certain value for the scroll position, such as an offset, to trigger the effect.
The issue:
- The offset value may not work well on all types of devices with different screen heights.
Key Questions:
- How can I make the static values adaptable and responsive to the device's height using media queries?
- How can I optimize the code to make it more compact?
- Is there a way to incorporate a slight slide effect from the right/left in addition to the existing fade effect?
Below is the code snippet:
// ---### FOUNDATION FRAMEWORK ###---
$(document).foundation()
// ---### FADE FX ###---
// ## SECTION-01: fade out on scroll ##
$(window).scroll(function(){
// fade out content a
$(".j-fadeOut").css("opacity", 1 - $(window).scrollTop() / 470);// 470 should be variable
// ## SECTION-02: fade in/out on scroll bottom ##
var offset = $('.j-fadeOut-2').offset().top;
console.log('offset: '+offset);
console.log('window: '+$(window).scrollTop())
if($(window).scrollTop() > offset)
{
// fade out top part of content b
$(".j-fadeOut-2").css("opacity", 1-($(window).scrollTop() - offset)/520);// 520 should be variable
// fade in bottom part of content c
$(".j-fadeIn").css("opacity", 0 + ($(window).scrollTop() - offset)/ 1100);// 1100 should be variable
}
});