How to make parallax elements in Webflow

Hey,

that’s something totaly different from parallax we know. You have that smile positioned by the mouse cursor position over that section. That might now work on mobile devices since, well… there is no cursor… I’d try to disable script and show static smile if the window width is lower than X if($(window).width >= X) { // allow script; }

Any idea why the eye elements display just fine on mobile and move around with screen tilt but the smile just disappears? I could maybe just make a different mobile version where the smile is statically sits relative to the eyes. Any idea? Thank you so much!!!

Would the initial distance of eyes-smile be too high?

I tried the exact code from the video and it still does not work.

https://preview.webflow.com/preview/mojobas?preview=d84eb1058824db061d7da821cdae29b6

Hi @MinewireNetwork, it looks like you have some script errors on your published page, which indicate that the parallax is executing before jQuery has been loaded.

In order to get this to work, the script below would need to be put in the Footer in the custom code panel in site settings:

<script src="https://dl.dropboxusercontent.com/s/q2ctkyan7xchdbf/jquery.parallax.js"></script>

Cheers, Dave

Hello . I made in the video, but I have not worked . :unamused: Tell me , in what I have wrong?
Preview

put your script in the “FOOTER” custom code area. Not the “HEAD”

​Try these steps and let me know if you’re successful. :slight_smile:

This is because the code is set up to connect the library jquery, I solved the problem . Thank you!

This is great! Anyone have any examples of making it not three colored boxes moving in the left corner?

Hey Guys ! Great tutorial and discussion. I’ve tried it out but it still doesn’t work… :frowning:

Here is the project i’m on :
https://preview.webflow.com/preview/poke-folk?preview=910383e3a229e3b8c0e1709bc6889abb

I would like to have those png pictures have parallax. I followed the instruction for custom code, gave the section a class and id of scene, gave data-depth to the pictures… nothing at all.
I feel i’m missing something basic, can someone have a quick look and help me out ?

Thx in advance.

2 Likes

I appreciate the work that’s gone into the topic, but am I wrong in saying that all of these examples are parallax based on mouse position? Can this easily be applied to scroll? I understand how to apply parallax movement to background images, but I’ve been searching and searching for a way to apply this to individual elements (other than http://css-parallax.webflow.io/, which is incredibly difficult to manipulate even according to the developer)

So… I’m hoping someone can help me figure out a way to so something like this http://melanie-f.com/en/ (warning: there’s sound) until Webflow releases this update.

Hello, please help. Why parallax is not working? Thank you very much in advance!
https://preview.webflow.com/preview/lebedeva?preview=a8e583179e40af162c05125ff1b324ef

@stylix it looks like your parallax implementation is working here: http://lebedeva.webflow.io/

Please note that custom code cannot render within your site preview but only on the published site.

a little understood, but the vertical parallax only, solve the problem…
sorry, for my English )

Here is a preview of parallax mouse movement and parallax scrolling in Interactions 2.0:
https://webflow.com/workshop/building-parallax-scrolling-and-timed-animations-without-coding