Response title
This is preview!
How can I translate the page horizontally left using translate3d and jQuery?
in Getting Started
•
11 months ago
Sideways scrolling seems to be the in thing now, but I do not see much advice on translating the page using translate3d.
Ideally, I'd love to be able to translate the page left, on 'Scroll', but I am having trouble with my maths. A few articles said I can use pageXOffset for compatibility, but as I say, I am unsure on how to calculate my maths. Do I have to calculate the width of all items first '#feature--items'? Then translate '-' + x + 'px' based on that?
So far (along with CSS) I have this:
- $(function() {
- if ("scrollBehavior" in document.documentElement.style) {
- $("body").css({ "scroll-behavior": "smooth" });
- }
- var _items = $("#feature--items");
- var scrollingX = $(window).pageXOffset();
- var _pos = scrollingX * 1.1222 + "px";
- $(window).on("scroll", function() {
- // keep top 50%
- _items.css({ transform: "translate3d(-" + _pos + ",-50%,0)" });
- });
- });
I know using 'scroll' events for this kind of stuff is not good practice, and I will transfer this to requestAnimationFrame, but just how should I calculate the scrolling?
Thanks for your help!
David
1