Вроде все сделал.
Остался один момент, прошу помощи.
У меня главная страница - лендинг, длинная колбаса.
И нужный блок расположен на 4 месте.
Мне надо отследить момент попадания заданного блока в зону видимости окна браузера и подключить аннимацию для изменения opacity background-image.
То, что нашел в интернете решения работают, но не так как надо.
jQuery(document).ready(function(){
var fadeStart=1300 // scroll or less will equiv to 1 opacity
,fadeUntil=1940 // scroll or more will equiv to 0 opacity
,fading = jQuery('#new-it4738g6');
jQuery(window).scroll(function(){
var offset = jQuery(document).scrollTop(),opacity=0;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity);//.html(opacity);
});
});
jQuery(document).ready(function(){
var target = jQuery('#new-it4738g6');
var targetHeight = target.outerHeight();
jQuery(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
});
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
jQuery('#new-it4738g6').css("opacity", 1- jQuery(window).scrollTop() / 700)
})
});
все эти три решение работают не так как надо.
Вот здесь нашел вроде нужную информацию
https://snipp.ru/jquery/show-on-scroll
Еще раз.
Помогите составить код так, чтобы прозрачность начала меняться когда только блок попадет в зону видимости окна браузера и полностью будет прозрачно, когда блок занял уже 80-90% по высоте зону видимости в окне браузера.
Заранее спасибо!
