Как перемещать элементы при прокрутке мыши?

Question

Вот мой фрагмент кода html и css:

.clouds {
  background-image: url('http://placehold.it/1200x1200');
  background-repeat: no-repeat;
  display: block;
}
.cloud-1 {
  width: 138px;
  height: 83px;
  position: absolute;
  left: 200px;
  top: 350px;
}
.cloud-2 {
  width: 100px;
  height: 52px;
  position: absolute;
  left: 625px;
  top: 400px;
  background-position: -935px -9px;
}
.cloud-3 {
  width: 110px;
  height: 58px;
  position: absolute;
  left: 450px;
  top: 350px;
  background-position: -1033px -6px;
}

<div id="animations">
  <div class="clouds cloud-1"></div>
  <div class="clouds cloud-2"></div>
  <div class="clouds cloud-3"></div>
  <div class="clouds cloud-4"></div>
  <div class="clouds cloud-5"></div>
  <div class="clouds cloud-6"></div>
  <div class="clouds cloud-7"></div>
  <div class="clouds cloud-8"></div>
  <div class="clouds cloud-9"></div>
  <div class="clouds cloud-10"></div>
  <div class="clouds cloud-11"></div>
  <div class="clouds cloud-12"></div>
  <div class="clouds cloud-13"></div>
</div>

Я хочу добиться, чтобы облака переместились к краям веб-сайта, когда пользователь прокручивает страницу вниз. Мои облака - это спрайт одного изображения, и каждое облако позиционировано абсолютно. Извините, но я новичок в веб-разработке, и мне еще нужно многому научиться.

javascript jquery html css

0

stupid_user_name 2 Июн 2016 в 13:34

Answer 1

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

Сначала проверьте, как далеко вы прокручены:

var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()

Что дает вам процент прокрутки вниз. Затем вы можете сделать что-то вроде:

$('.cloud-1').css('left', (200 / scrollPercent) + 'px');

Это установит изображение 200 px слева в начале, по направлению к 2 px слева, если пользователь находится внизу страницы.

Обновите эти значения при прокрутке:

$('body').on('scroll', function(){ 
     // methods described above here 
}

примечание

Код не протестирован, это указывает на верное направление. Приспособьтесь к своим потребностям и ознакомьтесь с документацией jquery.

0

Randy 2 Июн 2016 в 13:54

Answer 2

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

JQuery:

$(window).scroll(function() {  
    var scr = $(window).scrollTop();
    var height = 300px;
    if(scr > height) {
       $(document.body).addClass('fix-clouds'); /* add the class on scroll */
    } else {
       $(document.body).removeClass('fix-clouds'); /* remove when we go back to top */
    }
});

CSS:

.fix-clouds clouds {
    your CSS
}

0

Paul Lemarchand 2 Июн 2016 в 13:57

Спасибо друзьям! Это даст мне представление о том, где искать дальше.

–

stupid_user_name

2 Июн 2016 в 14:12

Как перемещать элементы при прокрутке мыши?

2 ответа

Похожие вопросы

Новые вопросы

javascript