Всем привет!!!
Сегодня я покажу, как сделать самый простой способ сделать анимацию при скролле на JQuery!!!
Для начала я покажу сам код, а затем объясню всё по полочкам.
$(window).scroll(function() {
var scrol = $(window).scrollTop();
$(".txt").css({
transform: 'translate3d(-0%, -'+(scrol/100)+'%, 0)'
});
});
Для начала нам нужно сделать сам скролл и для этого нам поможет $(window).scroll(function() {}) - при каждом срабатывании скролла, он проверяет, что у него в функции и если это случилось, то выполняет.
Затем нам надо записывать нашу позицию, для этого нам поможет var scrol = $(window).scrollTop(), где:
var scrol = - переменная, куда мы записываем что-нибудь, и у него название scrol.
$(window) - наше местоположение
.scrollTop() - верхний край экрана
Но для чего же это нам надо? Для того, чтобы потом сделать "формулу".
Дальше нам нужно изменять CSS свойства и для этого случая у нас есть команда $(".txt").css({}).
Далее нам нужно сделать трансформацию, для жтого нам так же поможет transform: 'translate3d(-0%, -'+(scrol/100)+'%, 0)', где:
translate3d(x,y,z) - передвигает элемент по координатам x,y,z
-0%, -'+(scrol/100)+'%, 0 - здесь у нас x,y,z , но в Y мы записали формулу (scrol/100), благодаря которой передвигаем объект, скорость которой можно регулировать заменив вместо числа 100 на своё число(чем больше, тем медленнее и наоборот).
Теперь собираем всё в кучку и создаём простой код!
Если что-то непонятно, то для этого есть комментарии!