Webflow Codes & Tutorials updated with parallax!

True that! For some reason it has disappeared. I’ll try to fix it as soon as possible.

1 Like

Hi @StevenP, your guide has gotten me 95% where I plan on taking my parallax effect, but I’m not there quite yet. Something seems to be missing, or off!

As you can see on this page, I successfully got the image to stay in place upon scroll. Now, I am attempting to accomplish the feel you get on a Twitter profile, like this one, just a little bit faster/severe than that (no zoom, strictly vertical scroll along the X axis).

So… here’s my public link. I slipped your js into the custom code of the “Blog Posts Template” page and modified it slightly. Could you take a peek at it and let me know what’s stopping the image from scrolling similarly to the Twitter example? Been going at this for about an hour now and would love the OP’s help :smile:

Best,
Christopher

P.S. I noticed the line “Give it an… ID of heroparallaxsectionzoom” doesn’t really seem to play any role in the effect… and “$(‘#startherosection .start-hero-div’).css({” doesn’t really add up for me either. Thanks.

First and foremost: Updated my library with the Hero Parallax Hero Regular that was missing before, @David_Di_Pasquale :smile:

Secondly: Hello @ctraver2 !

Okay, first and foremost, if I understand you correctly, you want a regular parrallax scroll effect, but with a faster rate than the one on the Twitter page?

If so, Paste this code in to the Custom Code of the Dashboard or in the Custom Code are for the specific page it concerns:

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

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

Remember to change the class name “hero-parallax-div-regular” if you use your own class name for the hero-parallax-section-regular and hero-parallax-div-regular.

To alter the speed of the parallax, change the value located by the line “-(scrolled * 0.2)”.

To the the demo, visit: http://webflowcodestutorials.webflow.io/imagery and scroll down to “Image – Hero parallax – Regular”. Hope you find this helpful too @David_Di_Pasquale

2 Likes

I still can’t get this to work. Can you shed some light on our site.
https://webflow.com/design/600-amelia-street

This page has the exact tutorial objects:
http://600amelia.ifmmbeta.com/residences

Hi @mburlinson!

I don’t have an access to your site via that link. Can you please make it public to me so I can take a look?

A post was split to a new topic: Disable Copying of Text/Content from Website

Sorry for the delay: I’d love to see how you would do this and I’ll replicate on some other sites.
Thanks,
https://preview.webflow.com/preview/600-amelia-street?preview=e5e6fbf59476e818313fa90926fd9a21

@mburlinson

Hi! Have you pasted the parallax code into your dashboard custom code? If, I cannot see it. Can you please add it to the specific page it will be applied to.

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

2 Likes