Parallax scroll effect

Design help General
1

Hi good day

im jsut windering if this kinds of scrolling effect is can be done in web flow http://wunderkind.nikadevs.com/home/image-pattern as you can see some of the section doesnt go with normal scroll

thanks

2

that site has some cool effects. I haven’t been able to do parallax yet with webflow.

If someone else has… I’d be interested in it as well.

3

http://parallax-test.webflow.com

https://webflow.com/design/parallax-test?preview=608e32b319c5d0090e82be34c3ff1109

<script>
    $(window).scroll(function() {
        $('.iphone').css({
            'top'   :   $(window).scrollTop()*0.2-120
        })
        $('#slow').css({
            'top'   :   $(window).scrollTop()*0.4-78
        });
    });
</script>
2 Likes
4

thanks for the great sample, but can this be done in the current interface of weblow of i have to inset a specific code and how

sorry for the newbie question, im just starting to learn how to use webflow

thanks

5

Thanks so much for posting this @bartekkustra. It set me off on a good path with a simple example I could wrap my head around.

Question: what is the purpose of the offset values (the -78)

. scrollTop()*0.4-78

6

scrollTop() by itself calculates the distance between top of the page to the top of the place we are now. Forcing the *0.4 makes it to scroll 40% the speed of the browser, while -78 is simply something I’ve added to have exactly what I wanted. It’s good to play sometimes with the ±x to get the proper speed of distance to move. Play with it and see results ;)

7

I have used things similar to that to weight or dampen an equation or set a minimum/maximum range in Flash. It has been a while though. Thanks for the explanation!

8

response deleted. I figured it out.

9

What a selfish person!