Scroll through text div horizontally on page scroll

Asked Dec 11 '17 at 06:55

Active Dec 11 '17 at 07:12

Viewed 248 times

I'm using anime.js to get a text block to parallax scroll horizontally, relative to the vertical scroll position. At the moment, I'm trying to get the relative scroll completion percentage like so -

var s = $(this).scrollTop(),
horizontal = $('#horizontal'),
d = $(document).height(),
c = $(this).height();
scrollPercent = 100 * (s / (d - c));

Then, I'm trying to set the scrollLeft for the overflowing text div like so

var scrollPos = scrollPercent * ($(document).width() - horizontal.width()); horizontal.scrollLeft = scrollPos

I'm not sure how to proceed with this further. Ideally, I would want to avoid jQuery as well, since I'm using anime.js for all the other animations.

edited Dec 11 '17 at 07:12

Lalit Verma

asked Dec 11 '17 at 06:55

Adarsh Sosale

Any chance of some HTML to accompany this? – dom_ahdigital Dec 11 '17 at 07:13
It's just a div with horizontal as the id. – Adarsh Sosale Dec 13 '17 at 06:59
I was intrigued and made a pen with your code, maybe not exactly what you wanted as animation is hard to describe without visuals: https://codepen.io/ahdigital/pen/aEzvoG?editors=0010 – dom_ahdigital Dec 13 '17 at 13:15
Thanks! This is quite close to what I wanted. I'll modify it myself :) – Adarsh Sosale Dec 14 '17 at 14:21

Scroll through text div horizontally on page scroll

0 Answers0