Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.11.2014, 20:23
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

Плавное смещение фона
Здравствуйте.
Есть 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();
}
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2014, 16:49
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

Или это впринципе неадекватный способ, и нужно по какому-то другому принципу?
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2014, 05:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

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>
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2014, 08:05
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

Без JQuery можно?
А так буду разбираться, не знал таких нюансов, большущее спасибо

P.S. Я наверное неточно описал проблему. Смещение фона при отключенной плавной прокрутке идет просто рывками, это нормально, т.к. смещение считается из разницы положения обьекта и прокрутки (так в ИЕ и ФФ, как должно быть по задумке).
А в Опере и Хроме дергается не в плане рывков, а в плане "дребезжания", если точнее... То есть, при прокрутке фон то там, то там, скачет быстро, и получается "дребезжание". И это не зависит от способа прокрутки, такое наблюдается и при прокрутке скроллбаром, и клавиатурой.

Последний раз редактировалось ShutTap, 20.11.2014 в 09:12.
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2014, 09:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

ShutTap,
можно
http://learn.javascript.ru/mousewheel
http://learn.javascript.ru/js-animation
http://learn.javascript.ru/metrics-window
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2014, 11:10
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

взял для начала пример ваш.
прокрутка плавная, да. так же, как если в браузере включить "плавная прокрутка".
но "дребезжание", описанное выше, все равно в указанных браузерах наблюдается...
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2014, 13:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

Сообщение от ShutTap
прокрутки, такое наблюдается и при прокрутке скроллбаром, и клавиатурой.
здесь у вас это есть в 3 посте ?
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2014, 14:09
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

там есть, я имею в виду, что это код для того, чтобы прокрутка шла типа попиксельно плавно, а не по строкам рывками. у меня же рывки не от построчной прокрутки, а дребезжание. я ставил ваш код, и да, плавная прокрутка, но дребезжание остается. чем бы не прокручивалось, я это имел в виду

или что вы имеете в виду? в плане, что над анимацией работать надо? (пс ваш пример точно так же в Опере и Хроме дребезжит, или это у меня так только? в ИЕ и ФФ все ок)
Ответить с цитированием
  #9 (permalink)  
Старый 20.11.2014, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

ShutTap,
так и непонял пост 3 у вас с рывками или нет -- ненадо его никуда ставить - нажмите кнопку посмотреть и проверьте
Ответить с цитированием
  #10 (permalink)  
Старый 20.11.2014, 14:32
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

фон "дребезжит", но "плавная прокрутка" работает нормально
Сообщение от ShutTap Посмотреть сообщение
(пс ваш пример точно так же в Опере и Хроме дребезжит, или это у меня так только? в ИЕ и ФФ все ок)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное исчезновение фона ArthurSpirke Элементы интерфейса 5 07.06.2013 15:34
Плавное уменьшение фона на сайте kichik Общие вопросы Javascript 3 29.05.2012 09:21
Плавное смещение background igsavenko jQuery 4 21.03.2011 21:58
Алгоритм плавной смены фона или изображения vandy3 Общие вопросы Javascript 6 11.11.2010 00:56
случайная смена фона сайта на jquery Netherlandman jQuery 8 25.08.2010 03:11