Плавное смещение фона
Здравствуйте.
Есть div-ы с именем full_screen, с картинкой в фоне. При прокрутке страницы фон у этих дивов смещается, то есть, создается эффект параллакса. Всё работает. НО! Очень сильно дергаются, никакой плавности не наблюдается (в Опере и Хроме, в ИЕ и ФФ нормально). В чем проблема, подскажите пожалуйста Код: var elems = document.getElementsByName("full_screen"); function getCoords(elem) { //получаем координаты объекта var box = elem.getBoundingClientRect(); var body = document.body; var docElem = document.documentElement; var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } function bgscroll() { //прокручиваем pageY = window.pageYOffset || document.documentElement.scrollTop; clientY = document.documentElement.clientHeight || document.body.clientHeight; for (i=0; i<elems.length; i++){ elemTop = getCoords(elems[i]).top; if (elemTop < pageY+clientY && pageY < elemTop+elems[i].offsetHeight) { // если картинка показалась на экране верхним или нижним краем elems[i].style.backgroundPosition = "center " + Math.floor((pageY-elemTop)*0.6)+"px"; // делаем смещение её фона равным разнице между ее расположением относительно начала документа и прокруткой, умноженное на коэффицент (который и создает эффект паралакса) } } } window.onscroll = function(){ bgscroll(); } |
Или это впринципе неадекватный способ, и нужно по какому-то другому принципу?
|
ShutTap,
для колеса мышки надо писать свою плавную прокрутку <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .first, html, body { height: 100%; margin: 0px } .first { background: rgb(140, 0, 86) url(http://www.sib-top.ru/images/photo/sunrize/09.jpg) no-repeat center; background-size: cover; } .first:nth-child(2) { background: rgb(140, 0, 86) url(http://ii1.photocentra.ru/images/main42/424926_main.jpg) no-repeat center; background-size: cover; } .first:nth-child(3) { background: rgb(140, 0, 86) url(http://aramgurum.ru/w/15/zakat_bereg_more_panorama_1680x1050.jpg) no-repeat center; background-size: cover; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> function getCoords(elem) { //получаем координаты объекта var box = elem.getBoundingClientRect(); var body = document.body; var docElem = document.documentElement; var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } function bgscroll() { //прокручиваем var elems = document.querySelectorAll('.first'); pageY = window.pageYOffset || document.documentElement.scrollTop; clientY = document.documentElement.clientHeight || document.body.clientHeight; for (i = 0; i < elems.length; i++) { elemTop = getCoords(elems[i]).top; if (elemTop < pageY + clientY && pageY < elemTop + elems[i].offsetHeight) { // если картинка показалась на экране верхним или нижним краем elems[i].style.backgroundPosition = "center " + Math.floor((pageY - elemTop) * 0.6) + "px"; // делаем смещение её фона равным разнице между ее расположением относительно начала документа и прокруткой, умноженное на коэффицент (который и создает эффект паралакса) } } } window.onscroll = function() { bgscroll() } $(function() { $(document).on('mousewheel', function(event) { var top = $(window).scrollTop() - (event.originalEvent.wheelDelta ); event.preventDefault(); $('html, body').stop().animate({ scrollTop: top }, 800); }) }) </script> </head> <body> <div class='first'> <span class='info orange'>Информация</span> <div class='main'> <span class='info_show show '>текст1</span> </div> </div> <div class='first'> <span class='info'>Информация2</span> <div class='main'> <span class='info_show '>текст2</span> </div> </div> <div class='first'> <span class='info'>Информация3</span> <div class='main'> <span class='info_show '>текст3</span> </div> </div> </body> </html> |
Без JQuery можно?
А так буду разбираться, не знал таких нюансов, большущее спасибо :) P.S. Я наверное неточно описал проблему. Смещение фона при отключенной плавной прокрутке идет просто рывками, это нормально, т.к. смещение считается из разницы положения обьекта и прокрутки (так в ИЕ и ФФ, как должно быть по задумке). А в Опере и Хроме дергается не в плане рывков, а в плане "дребезжания", если точнее... То есть, при прокрутке фон то там, то там, скачет быстро, и получается "дребезжание". И это не зависит от способа прокрутки, такое наблюдается и при прокрутке скроллбаром, и клавиатурой. |
|
взял для начала пример ваш.
прокрутка плавная, да. так же, как если в браузере включить "плавная прокрутка". но "дребезжание", описанное выше, все равно в указанных браузерах наблюдается... |
Цитата:
|
там есть, я имею в виду, что это код для того, чтобы прокрутка шла типа попиксельно плавно, а не по строкам рывками. у меня же рывки не от построчной прокрутки, а дребезжание. я ставил ваш код, и да, плавная прокрутка, но дребезжание остается. чем бы не прокручивалось, я это имел в виду
или что вы имеете в виду? в плане, что над анимацией работать надо? (пс ваш пример точно так же в Опере и Хроме дребезжит, или это у меня так только? в ИЕ и ФФ все ок) |
ShutTap,
так и непонял пост 3 у вас с рывками или нет -- ненадо его никуда ставить - нажмите кнопку посмотреть и проверьте |
фон "дребезжит", но "плавная прокрутка" работает нормально
Цитата:
|
Часовой пояс GMT +3, время: 02:07. |