Как сделать parallax при скроллинге на чистом js?

Question

[eugene_d_dev]

Ну собственно суть вопроса указана. В принципе понимаю суть. Там сделать параболу и т.д. Но с помощью javascript не знаю как реализовать. Помогите))) Допустим иконку в position:absolute двигать транслейтом в зависимости от положения скролла.

Answer 1

[Дмитрий Кравченко]

Что значит "чистый js"? Можно подумать, есть какой-то грязный. Насчет параболы не знаю, но кэп говорит, что нужно отслеживать скроллинг. Как?

var scrollPosition = 0;
document.addEventListener('scroll', function(){
  scrollPosition = window.pageYOffset;
  console.log(scrollPosition);
});

В зависимости от позиции скролла можно двигать элементы как захочешь

document.getElementById('#parallaxed').style.transform = 'translateY('+scrollPosition+'px)';

эту строку можешь вставить прямо в обработчик скролла выше, но по-хорошему - requestAnimationFrame

написав это ты реализуешь свой урезанный skrollr

Comments

[eugene_d_dev]

чистый js - это значит без использования js библиотек. Ибо все начинают закидывать библиотеками. Я и так отслеживаю скроллинг. Отслеживаю позицию элемента по отношению к скроллингу. Но пока не получается реализовать. Насчет параболы. Смысл такой. Допустим элемент находится на позиции 2000px. Он высотой 300px. То есть, когда мы попадаем в область видимости этого элемента, он должен двигаться. Но не просто двигаться. А по параболе. То есть крутим вниз он перемещается в определенную сторону. Крутим назад - он перемещается в обратную сторону с таким-же соотношением.

[Дмитрий Кравченко]

Какое-то извращенное понятие параболы. Для начала определи, попал ли элемент во вьюпорт. Если попал, примени к нему transform:translateY

Answer 2

[sergealmazov]

Может, не надо Parallax-а? А то глаза вылезают из-за таких сайтов и таких умельцев - сразу закрыть хочется.

Comments

[eugene_d_dev]

иконку размером 200на200? Легкий параллакс со смещением в 100px

[sergealmazov]

А смысл? Parallax - попытка сделать псевдо-объем. Попробуйте тогда уж WebGL, 3D.

keithclark.co.uk/articles/pure-css-parallax-websit...
keithclark.co.uk/labs/css-fps