Webflow Codes & Tutorials updated with parallax!

I’ve updated my Webflow Codes & Tutorials site with two types of Parallax implementation.
One creates a hero parallax zoom in when you scroll and the other is just a regular parallax scroll.

You’ll find it under the category of “Javascript & jQuery”.
Title: Hero Parallax – Regular on scroll
Title: Hero Parallax – Zoom in on scroll

Both examples are built around the hero being 100% in height, but that is just optional and (hopefully) easy to change.

As usual it’s all covered step by step.
Have fun!

Site: http://webflowcodestutorials.webflow.io/#java

8 Likes

Nice. I looked through your guide last week and it’s a good grouping of info. There is often more than one way to achieve the same result and I liked your approach to some of the items. I might shoot a message over to kick around some ideas.

Wow @StevenP that’s some nice piece of work!
However I can’t get the Parallax stuff to function properly…
Are you sure the code is good? I’d like to hear from you, I can give a public link if you want.

@jdesign
Great! I’d love to hear your ideas!

@ArjanLeeuwinga
Okay! Send me a preview link and also a published one so I can take a look. I might have screwed up my instructions! :smile:
I’m currently re-building my portfolio and used the Hero Parallax - Regular here.
Link: http://new-steven-persson.webflow.io

Hey @StevenP,

Here is the published version: http://parallaxtestconnect.webflow.io/
Here is the clonable version link: https://webflow.com/website/parallaxtestconnect?s=parallaxtestconnect
Here is the public link: https://preview.webflow.com/preview/parallaxtestconnect?preview=4152a4e758f59b8cbace02bb6511847e

Don’t mind the superugly design haha ;)…
I hope you can figure out the problem!

Thanks for the detailed information @ArjanLeeuwinga.
The problem is a combination of your fault and my fault :smile:

My instructions were not clear enough and I’ve fixed it now on my site. Sorry for that!

What you need to do, to make this work, is the following steps:

  1. Place the Start Hero Div inside the Start Hero Section and set both to the same width and height properties; you use 100% height on the Start Hero Section but 800px on the Start Hero Div. Set both to 800px height if that want you want.

  2. Set the Start Hero Div to position:fixed. You have it set to position:absolute.

  3. The code in the Custom Code needs to be wrapped in to <script></script> tags. For some reason, I can’t state these tags in the designer of my Code & Tutorial site because it won’t display properly when I publish my page, so I’ve left them out. Sorry for that confusion.

When your Start Hero Div has a Z-index of -1, you won’t be able to easily edit it without going to the Navigator all time. Set it to Z-index: 0 while working on it and change it to -1 when you publish.

This is what the correct result I suppose it’s ment to look like: http://paralacc.webflow.io

Dude that is awesome @StevenP!
Worked like a charm haha! :wink:
You sir therefore, are a legend.

Is there a way with this where we could “layer” the elements if you know what I mean?

No worries, glad to help! :smile:

Ehm…maybe you should talk to @PixelGeek or @vincent regarding that. This is just parallax in a simpler way and layering is a bit more complex and something I’ve never tried and both of them (if i recall ) have been fiddling with more complex parallax stuff.

1 Like

There’s a JS library, I think parallax.js, that exist. I think this is the way to go but I’m not skilled at that. Definitely, definitely don’t try to do that manually with CSS… doable but a real mess with a lot of downsides (:

2 Likes

@StevenP @vincent Okay that’s cool. I guess we’ll just have to wait for Webflow 2.0, Maybe they’ve tackeled something like this :wink:

1 Like

Hey guys–

Thanks so much for the help, Steven! One more quick Q, which is maybe what ArjanLeeuwinga was asking, but is there a way to control the rate of speed of scrolling between one element and another? And is there a way to add a third element with yet a different scrolling rate?

Steven, this site is awesome! Thanks for your work. I was wondering if there was a way to either have a separate site with the tweaks in action or create them inline with the code. It’s hard to tell what some of the things do without building a site to try it, which would take a lot to go through every one. Sometimes I just want something snazzy and having that library would be great if i knew right away exactly what each one did.

Also, this is one of my favorite tweaks for sites for safari users.

<style> 
body { -webkit-font-smoothing: antialiased; }
    textarea { resize: vertical; }
</style>

Gets rid of that stupid text flickr during animations

Also these 2 for all my sites:

<meta name="format-detection" content="telephone=no"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

First gets rid of phone numbers being clickable unless I want them to, second makes it so you can’t pinch and zoom on touch devices.

Either way thanks for your contribution!

Yes, you can controll the speed. This code is from the regular parallax. To change the speed, change the numeric value in this line "(scrolled * 0.2) + ‘px’);

function parallax(){
var scrolled = $(window).scrollTop();
$('.start-hero-div').css('top', -(scrolled * 0.2) + 'px');
}

$(window).scroll(function(e){
parallax();
});

Regarding a third element…I don’t know. It’s surely possible, but I’m not able to do it since I can’t code that well. Again our hyper master java wizzard @bartekkustra could, with much possibility, make it happen :smile:

Thanks for the contribution @DFink! I’ll have a look at these codes!

Regarding having all codes set up and designed…yes, I had thoughts on it and still have, but the library have grown so fast that I could not catch up with it along with my freelance assignments, especially since I’ve, in many cases, just copied and pasted the instructions from the various forum posts into my pre-set formula for the Codes & Tutorials website. Doing that is a bit faster than actually designing it…

But i definitely want to do it and along with that also use screenshots how e.g the interactions are set up. It’s faster to grasp than reading a text of the instructions.


Who dares to summon me! :D

Hey guys ;) What’s the problem? I’m not sure if I understand what third element do you want to have… You can always add another element to the script and change it’s scrolling value.

function parallax() {
  var scrolled = $(window).scrollTop();
  $('.start-hero-div').css('top', -(scrolled * 0.2) + 'px');
  // you can have more elements here.
  $('.another-element').css('top', -(scrolled * 0.1) + 'px');
}

$(window).scroll(function(e){
  parallax();
});

First of all it’s good to understand the idea of what does the script do. I’m seriously thinking of having a webinar Q&A from time to time where I will be able to explain few things to Webflow users :) What do you guys think of such thing? Would you watch it? :D

3 Likes

Absolutely! Give me a date and time! :smile:

4 Likes

Thanks sooo much guys, that’s really helpful.

Still having a bit of trouble– the link is here:

https://preview.webflow.com/preview/primerstories15?preview=712e37d800463efff1bae66d22c7b385

If you go into the pages and find Primer0024, you’ll find the page I’m talking about– it looks like this:

I’m looking to have one set of books slightly scroll at a different rate than the others. Any idea what I’ve missed?

Thanks so much!

Any news on this? I would love to do the same thing! With other objects of course haha :stuck_out_tongue:

For the books in front that aren’t part of the background. Create an interaction that changes the original position down 100. Then a scroll interaction that brings the position back to original on scroll. See if that works.

Hi, i cannot find the website you provided, i mean, there is no Javascript&Jquery section on your page, can you please review this and send again? i cannot find the information im looking for about the parallax effect