How to make parallax elements in Webflow

Community resources Webflow Tips
1

In response to: Parallax layered elements - #12 by Archilles_Morales - General - Forum | Webflow

Here is a quick tutorial on making parallax elements in Webflow with the help of the script found here:

18 Likes
2

Hi PixelGeek “This Video is Unavailable” Look forward to seeing it.

3

still processing in YouTube. =\ Check back in an hour or so.

1 Like
4

Nice! And amazingly simple to implement parallax.js. Thanks so much for making this @PixelGeek! You filled in a bunch of missing bits of info for me in your tutorial. Will be fun to explore.

1 Like
5

this is really very nice, ive been waiting for this for a long time thanks a lot pixel geek

6

hi again, i tried to follow it step by step, but its not working with me. i even repeated many times but i still dont get it to work

i even use the dropbox public link that had been used in the video

can you please take a look whats is missing

https://webflow.com/design/mypassion?preview=e5a8081a1399387663fcc8bc6aa705ed

7 
$('scene').parallax();

you forgot the “#”. it should be

$('#scene').parallax();
8

Sorry! But is it possible to help me check what is wrong? I did everything step by step. I kind of suspect that it was the link of the script but I have made it the folder and file public to everyone already. Lost @.@… Thank you very much in advance !!

https://webflow.com/design/laxmanium?preview=5eed7f509c363f134f64623c012b9409

9

move the javascript to the '</body>' area in the custom code page.

10

Thanks for the reply ^^ I have done that but it still would not work like how it is suppose to… Hmm…

11

How do I position the elements? All get piled up in the upper left corner. I tried using transform, margins, etc, but they all end up in the upper left corner.

How to set an initial position?

btw, thanks for the tutorial, this was just what I was looking for.

1 Like
12

making the class scene, it doesn’t allow me to for more than one, it doesn’t work here either, did webflow change since u made this video

13

Hello PixelGeek, what do you mean exactly by - the - custom page ? - in the tag

14

PixelGeex Or anyone , can you tell me what;s wrong with my website here ?

https://preview.webflow.com/preview/qazwsxed?preview=e8b0d5b72b618fa470d33a737fb23347

http://qazwsxed.webflow.com/

15

Hi @Wadih_Hajj, could you try to republish your site? Did you do that after adding the code? I see images within your list items on the published site, and no page errors, but on the design mode, I see no images.

Cheers, Dave

16

Hi, I also need to know how to position the elements on the screen in different locations. This effect is what I want to accomplish: http://www.salon-love-forever.ru/ like the petals, but with this tutorial all elements are moved to an absolut position and I need to be able to position them differently throughout the page. How can I do that? Thanks.

17

Hi @aerismel, thanks for the good question. If you want to put elements at different absolute positions on the page, you can create a div for example, give it a class and set the position to relative and set the height and width of the div to 100%. Also make sure to give the body 100% height.

Then you can add other content within the div with absolute position offsets, which moves the content to the coordinates specified by the offsets.

If you will be using layers for the absolutely positioned content, put those layers inside the parent div that has relative position, and give each layer a different z-index value (and perhaps data-depth, depening on the custom solution you are using).

I hope this helps, cheers, Dave

2 Likes
18

Thanks Dave! I will try that and see if I can make it work. You’re awesome. =)

20

Thanks @PixelGeek :smile:

I’m working on an implementation of this on my page right now, I seem to be having some issues with that the “smile” element if you will being unresponsive, and for some reason disappearing on mobile. I know it must be some height/padding issue but I just cannot find it. Can you please take a look? @cyberdave

http://youfoundwaldo.webflow.io/#Parallax

Here is the preview link: “https://preview.webflow.com/preview/youfoundwaldo?preview=2bd3d19f2e709d65997d01f0c4c28190” (still very much a work in process)

Thank you!

Waldo

21

@bartekkustra you may know a solution to my question above. Any idea where the element is going on mobile? Thank you! :smile: