Streaming live at 10am (PST)

Need help, Parallax tutorial not working


#1

Im writing today to request some assistance with a Parallax effect.
I’ve followed the instructions perfectly, but upon publishing, it does not work.

I got the tutorial and code from: https://webflowcodestutorials.webflow.io/non-native
(“Parallax Hero Zoom-In”, and “Parallax Hero Regular”, both about half-way down the page)…
NOTE: I’ve tried both, but the code I’m about to provide is for the “Parallax Hero Regular”…

Basically, the tutorial says to do the following:
-Create a Hero Section and name it.
…Give it 100% Width
…Give it any Height, but must match the Height of the Div in the next step.
-Create a Div inside the section and name it (in the code, its: name-of-div)
…Give it 100% Width as well.
…Give it any Height, but must match the section it is within.
…Make the Div “Fixed” with “Top:0” and “Left:0”, and a "Z-Index: -1)
…Fill the Div with whatever content you want to be Parallaxed on scroll.
-Create a Section below the hero section, which contains whatever content you want.
…Give it a position of “Relative”.

Lastly, it says to add the following Cutom Code|Foot Code:

function parallax(){
var scrolled = (window).scrollTop(); (’.name-of-div’).css(‘top’, -(scrolled * 0.2) + ‘px’);
}
$(window).scroll(function(e){
parallax();
});

Any help would be greatly appreciated! Thanks.


#2

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.