Streaming live at 10am (PST)

Parallax layered elements


#1

Hi Again smile

I was wondering if i can create something similar to this:

http://boy-coy.com
http://hotdot.pro/ (not the horizontal scroll just the "3d" effect)

i need it for just one section of my site (hero section).
The idea is in the HERO section, to have a low poly background,
and on top of it, separate triangle elements that will move like in the hotdot website.
when you scroll down, the background will move slower than the elements, and i think what gives it
the depth "feel" is that the elements are moving in different speeds from slow to fast, from center outwards,
and the scrolling is very smooth.

maybe this is too much but is it possible to implement this in webflow?


Advanced layer slides
#2

Hi @Mordi_Levi, it is possible sure, but you do need to add some custom code to your website for the parallax effect. Probably the easiest way to start trying to do this, is to use an already built script for Parallax such as:

http://matthew.wagerfield.com/parallax/

I have not actually implemented this particular script, but you should be able to get this to work with Webflow. If you are not familiar with javascript or jQuery, I recommend you take a course on Javascript or jQuery (it's free):

http://www.codecademy.com/en/tracks/javascript (javascript)
http://www.codecademy.com/en/tracks/jquery (jQuery)

If you need help to put this together, you can also ask from help on our Freelancers category here in the Forum. I hope that give you some direction to look into. Cheers!


#3

I was able to use this in my project's background.

http://pxlgk.webflow.com/

if anyone wants to learn how to make this work for their project, just ask =)


#5

A great example, and a nice, attractive and cool site smile


#6

that looks great smile
but it looks like one layer, i'm trying to create layers with different depths..
not for each element but one for the background and one for all the "floating" elements


#7

Hi @Mordi_Levi, if you REALLY want to go funky on this, then there is a couple of scripts for you to look at. OK.... you will have to pay a small amount of money for it, but if you got the chops, here it is....

http://codecanyon.net/item/freshd-3d-parallax-jquery-plugin-with-editor/625587?WT.ac=search_item&WT.oss_phrase=parallax&WT.oss_rank=14&WT.z_author=Thunderbuddies

That one is for in-place perspective mainly, but cool, and there is an editor to help you.

OR...

http://codecanyon.net/item/true-parallax/2968333?WT.ac=search_item&WT.oss_phrase=parallax&WT.oss_rank=1&WT.z_author=Sandi

Both of these I have used, however, this is not Drag N Drop....So you have to experiment, but it should work. If you need a place to put some script files, you can use any online storage that give you public links to the scripts or other asset files. I can provide any insight, and probably many others here can too, who know more than us... how to make the right parallax smile

Cheers smile


#8

yes. it is one layer. But it's easy to add more. I opted for only one layer because of my design.


#9

in that case i would LOVE to know how to do it in webflow smiley
and yes it's a cool site... SPACESHIP!!


#10

@PixelGeek really awesome site! Do you mind sharing how you implemented the parallax into your webflow?! I'd absolutely love to hear the details. A similar site that I'd like to implement for a nonprofit project is kano's site. Probably not to that level, a more simple version.

Thanks!
-Matthew


#11

i'll screen record a tutorial over the weekend for you all =)


#12

subscribing and will be waiting for the video tutorial thanks


How to make parallax elements in Webflow
#13

Thanks @PixelGeek! We appreciate the help.


#14

@Archilles_Morales @matthew1818 @Mordi_Levi

http://forum.webflow.com/t/how-to-make-parallax-elements-in-webflow/

there you go =)


#15