search

locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.54k stars 1.11k forks source link

V5 data-scroll-direction #515

Closed himonoonna closed 10 months ago

himonoonna commented 10 months ago

Hi, thanks for your hard work to upgrade the latest beta version. It helped me solve the fixed positioning and background attachment problem, cause i don't have to write long javascript syntax

I want to make horizontal styles in the div element, but after reading the v.5 documentation, I noticed no "data-scroll-direction" attribute anymore (it appears in the previous version). it is defined only at the start (html tag), like this : html[data-scroll-orientation="horizontal"] { body { width: fit-content; } [data-scroll-container] { display: flex; } }

My question is, how to use these attribute on the other elements and CSS classes?

devenini commented 10 months ago

Hey there! If you're aiming for horizontal scrolling, make sure to specify orientation: 'horizontal' under lenisOptions within the instance options. This will add a data-scroll-orientation attribute to the <html> tag. Once you've done that, apply the basic styles for horizontal scrolling.

Feel free to check out the horizontal demo as well.

himonoonna commented 10 months ago

Thanks for the replay and explanation.

On the website that I created, there is a one part in one of the sections where the direction is made horizontally. An example can be seen in version 4.x , which in the 02.Section section, the texts move horizontally and in opposite directions.

In the example above, the direction setting itself is set inside the <span> tag like the syntax below: <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="6" data-scroll-target="#direction"> I'm moving in this direction </span>

Well, I wish in the future, data-scroll-direction feature can still be used inside other html tags in version 5.x

devenini commented 10 months ago

Hey! Horizontal parallax is no longer supported out of the box. However, you can achieve this effect quite easily using progress and custom events :

<div 
    data-scroll 
    data-scroll-event-progress="horizontalParallaxEvent"
>
    <p id="parallaxTarget">I'm moving in this direction</p>
</div>
/* Locomotive scroll instance */
const locomotiveScroll = new LocomotiveScroll();

const $parallaxTarget = document.getElementById("parallaxTarget");

window.addEventListener("horizontalParallaxEvent", (e) => {
  const { progress } = e.detail;

  const parallaxDistance = 150;
  const translate = (1 - progress) * parallaxDistance;

  $parallaxTarget.style.transform = `translate3d(${translate}px,0,0)`;
});