Как при скроллинге активировать анимацию в пределах одного только определенного блока
Подскажите, пожалуйста, как при скроллинге активировать анимацию в тот момент, когда видимым станет блок .parallax, и в пределах одного только этого блока? Сейчас анимация происходит при скроллинге всего body. Необходимо же, чтобы анимация начиналась, когда верхняя часть блока .parallax будет по верхнему краю экрана, а заканчивалась, когда нижняя часть блока .parallax будет уже по нижнему краю экрана. Благодарю!
[JS]$(function() { $('.parallax').animate({ scrollTop: $(document).height() }, 1000); $(window).scroll(function() { $('span').css('font-size', Math.round($(window).scrollTop() / 5) + 'px'); }); })[/JS] <style>.header, .footer, .parallax { height: 1000px; } .header, .footer { background-color: pink; } .parallax { background-color: beige; } span { text-align: center; font-size: 0px; position: fixed; top: 50%; left: 0; right: 0; height: 2px; line-height: 2px; margin-top: -1px; }</style> <div class="header"></div> <div class="parallax"><span>Parallax</span></div> <div class="footer"></div> |
parallax на видимом блоке
LADYX,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style>.header, .footer, .parallax { height: 1000px; } .header, .footer { background-color: pink; } .parallax { background-color: beige; } span { text-align: center; font-size: 0px; position: fixed; top: 50%; left: 0; right: 0; height: 2px; line-height: 2px; margin-top: -1px; }</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var parallax = document.querySelector('.parallax'); $(window).scroll(function() { var {top,bottom} = parallax.getBoundingClientRect(); var size = 0; if(top < 0 && bottom > window.innerHeight) size = Math.round(-top / (parallax.scrollHeight - window.innerHeight) * 120); if(bottom < window.innerHeight) size = 120; $('span').css('font-size', `${size}px`); }); }) </script> </head> <body> <div class="header"></div> <div class="parallax"><span>Parallax</span></div> <div class="footer"></div> </body> </html> |
Огромнейшее спасибо!!!
|
рони,
есть еще два момента, которые мне не получается решить самостоятельно. Помогите, пожалуйста. Первый - если ставлю высоту для секций не height: 1000px, а, например, height: 100vh, то скрипт перестает работать. В самом скрипте я не могу понять, где зависимость именно от пикселей. И второй момент тем более понять не могу. Если ставлю для секций .header и .footer z-index: 2, а для секции .parallax z-index: 1, то всё равно верхняя и нижняя секции не перекрывают секцию с параллаксом. Не могу понять почему так? Спасибо! |
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
<!-- © https://javascript.ru/forum/dom-window/79465-kak-pri-skrollinge-aktivirovat-animaciyu-v-predelakh-odnogo-tolko-opredelennogo-bloka.html#post520035 --> <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style>.header, .footer, .parallax { height: 1000px; } .header, .footer { background-color: pink; } *!* .footer { position: relative; z-index: 1; } */!* .parallax { background-color: beige; } span { text-align: center; font-size: 0px; position: fixed; top: 50%; left: 0; right: 0; height: 2px; line-height: 2px; margin-top: -1px; }</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var parallax = document.querySelector('.parallax'); $(window).scroll(function() { var {top,bottom} = parallax.getBoundingClientRect(); var size = 0; if(top < 0 && bottom > window.innerHeight) size = Math.round(-top / (parallax.scrollHeight - window.innerHeight) * 120); if(bottom < window.innerHeight) size = 120; $('span').css('font-size', `${size}px`); }); }) </script> </head> <body> <div class="header"></div> <div class="parallax"><span>Parallax</span></div> <div class="footer"></div> </body> </html> |
рони,
Nexus, огромное спасибо!!! |
Часовой пояс GMT +3, время: 03:19. |