Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2017, 11:29
Новичок на форуме
Отправить личное сообщение для kd241286zjv Посмотреть профиль Найти все сообщения от kd241286zjv
 
Регистрация: 28.11.2017
Сообщений: 2

изменение позиции фона по скроллу
добрый день!
у дизайнера появилась идея по скроллингу браузера сделать анимацию фона. вкратце: надо немного масштабировать фон и заставить его по скроллу перемещаться слева-направо и по достижению позиции по горизонтали 100% начинать двигаться справа налево до позиции 0% по горизонтали. всё это дело зациклить. с jquery тесно не приходилось до сих работать, поэтому возникли проблемы. пытался сначала сделать через animate, но он не подходит тк анимация срабатывает на скролл и не останавливается пока не отработает полностью, мне же нужно что бы по остановке скролла, изменение позиции фона так же останавливалось. пришёл к выводу, что нужно делать через изменение background-position.
я так понял что нужно действовать как-то так:
$(window).scroll(function(){
                var posscrollx = $(this).scrollTop();
                $('#block').css({ "backgroundPosition": posscrollx / 50 + 50 + '%' });
            });

но до воплощения идеи дизайнера тут далеко. подскажите как заставить анимацию на позиции 100% остановиться и пойти обратно. да и как зациклить потом всё это.
спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 28.11.2017, 13:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

Сообщение от kd241286zjv
пытался сначала сделать через animate, но он не подходит тк анимация срабатывает на скролл и не останавливается пока не отработает полностью
Отнюдь!
Это ты ее не останавливаешь...
https://jquery-docs.ru/stop/
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2017, 09:20
Новичок на форуме
Отправить личное сообщение для kd241286zjv Посмотреть профиль Найти все сообщения от kd241286zjv
 
Регистрация: 28.11.2017
Сообщений: 2

ребят, посидел вчера и решил-таки задачу. если кому интересно, использовал не animate, а формулу:
$(document).ready(function(){
            var breakpoint = 180;
            var breakpoint0 = $('#block').offset().top - $(window).height();
            var breakpoint4 = $('#block1').offset().top;
            var paddingY = (breakpoint4 - breakpoint0) / 6;
            var breakpoint1 = breakpoint0 + paddingY;
            var breakpoint2 = breakpoint1 + paddingY * 2;
            var breakpoint3 = breakpoint2 + paddingY * 2;
        $(window).scroll(function(){
            var posscrollY = $(this).scrollTop();
            if(posscrollY >= breakpoint0 && posscrollY <= breakpoint4){
                if(posscrollY < breakpoint1){
                    var offset = (posscrollY - breakpoint0) / paddingY * (- breakpoint / 2) - (breakpoint / 2);
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else if(posscrollY < breakpoint2){
                    var offset = (posscrollY - breakpoint1) / (paddingY * 2) * (breakpoint) - breakpoint;
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else if(posscrollY < breakpoint3){
                    var offset = (posscrollY - breakpoint2) / (paddingY * 2) * (- breakpoint);
                    $('#block').css({'background-position-x': offset + 'px'});
                }
                else{
                    var offset = (posscrollY - breakpoint3) / paddingY * (breakpoint / 2) - breakpoint;
                    $('#block').css({'background-position-x': offset + 'px'});
                }
            }
        });


вдруг кому-то поможет
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2017, 09:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

kd241286zjv,
сделайте полноценный макет, добавьте html и css, иначе ваш код только для телепатов, будет хотябы понятно, что вы хотели сделать.
[HTML run]код вашей страницы[/HTML]
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2017, 10:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

kd241286zjv,
$(selector).animate({
  properties
}, {
  step: function(properties.values, jQuery.fx ) {
    //проверяйте, действуйте.
  }
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение фона сайта с временным интервалом volshebnyi Элементы интерфейса 4 15.09.2021 18:38
изменение цвета фона где совпадает цифра djonA Общие вопросы Javascript 14 09.04.2014 18:10
изменение позиции фона одного div пока мышь находится на ссылке desir Javascript под браузер 3 05.02.2012 22:54
Динамическое изменение фона ячейки CyMKuH Элементы интерфейса 2 11.07.2011 15:19
изменение цвета фона alina Общие вопросы Javascript 1 27.12.2009 17:23