How to set an ending point to the data-lax-translatex scroll effect?

[EllieMaffio93]

I'm trying to set scroll effects using the lax library.

Here's my code:

<div class="coenter code herentainer-fluid outer">
    <div class="container-fluid inner" style="background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.17690826330532217) 50%, rgba(255,255,255,1) 94%), url(<?php echo get_field('block_6_background'); ?>) no-repeat;" />
    <div class="row h-100">
        <div class="col-md-12  align-self-center">
            <div class="container lax" data-lax-translate-x="vh 0, -elh (vw*0.4)" data-lax-anchor="self">
                <h1 class="text-white"><?php the_field('title_block_6'); ?></h1>
                <h2 class="text-white"><?php the_field('subtitle_block_6'); ?></h2>
            </div>
        </div>
    </div>
</div>

Is there a way to make the scroll effect inside .container .lax end just where the .container .lax itself ends?
Right now the h1 and h2 scroll until the end of the container-fluid, and that's not what I want!
I've been able to set the starting point of the scroll effect modifying the data-lax-translate-x="vh 0", but I can't make it end where I want!

Thanks for your help!

[alexfoxy]

hey :) Can you put your code into a code pen so I can see the effect your trying to achieve?

[EllieMaffio93]

Hey Alex! Thanks for you reply! :)
here's my code pen: https://codepen.io/EllieMaffio93/pen/oNgBryy

I'd like both my h1 and h2 end just where the .container .lax itself ends.
Hope it helps you help me! :)

[alexfoxy]

Thanks for the demo, what do you mean by "end just where the .container .lax itself ends" ?

I'm not quite sure the effect you're trying to achieve !

[EllieMaffio93]

Sorry, I'm so new to this, I can't even explain myself :/
Anyway what I mean is that I'd like h1 and h2 to move within the .container .lax's margins and then stop. What I don't want is for both h1 and h2 to move all way out of the screen and disappear.

Thank you so much for your patience! :)

[alexfoxy]

Try removing the class .col-md-12 and playing with the lax values. I'm sure you'll get there :)