Простой Parallax эффект для фоновой картинки на jQuery by Apocalypse
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body { min-height: 5000px; margin: 0px; background: url(https://imapo.ru/img/clouds-bg_noise.jpg); } .apocouds { width: 100%; position: absolute; z-index: -1; top: 0px; left: 0px; will-change: transform; /* Повышаем FPS */ } .block { widthL 100%; font-size: 50px; text-align: center; background: rgba(55,55,55,.5); min-height: 1000px; margin: 50px; } |
1 2 |
<img src="https://imapo.ru/img/clouds-bg.jpg" class="apocouds"> <div class="block">IMAPO.RU</div> |
1 2 3 4 5 6 |
<script> $(document).scroll(function() { var pos = $(window).scrollTop(); $('.apocouds').css('top', (pos * 0.7) + 'px'); }); </script> |