Streaming live at 10am (PST)

Parallax move up on background on scroll mouvement

Hi everyone! I’m new to Webflow and just have some very basics knowledges in html/css/javascript… So my goal is to make a move up parallax effect on background just like this website : https://www.zimydakid.com but I can’t make it happen. Already try this https://forum.webflow.com/t/different-parallax-effec…/25339… but I don’t like the result as you can see on my website : https://mavision.ch, when you reduce the window, the image has a weird effect (I think it’s because I use % or vh on height & width, but not sure about it) and if I add content like text, the content over the background will not be centered when I reduce the window, I guess it means it isn’t a good responsive design… I found this https://tgomilar.github.io/paroller.js/ for parallax which should do the effect correctly but I’m not so sure on how to install it. I’m pretty sure it’s easy to do but still can’t make it after hours and hours of try… I’m also wondering if it’s possible to make this parallax move up effect on a background video?

I tried this on a new page, following the instruction here https://tgomilar.github.io/paroller.js/ : add a section, inside this section add a div, name the class of that div “paroller” & add a background image (inside the background box, I didn’t add it as a image element) and added this on the “before < /body>” page settings :

< script src=“http://code.jquery.com/jquery-latest.min.js” type=“text/javascript”>
< script src=“https://raw.githubusercontent.com/tgomilar/paroller.js/master/dist/jquery.paroller.min.js” type=“text/javascript”>

< script>
$(’.Parallaxtest’).paroller({
factorXs: 0.1,
factorSm: 0.1,
factorMd: -0.4,
factorLg: -0.5,
factorXl: -0.6,
factor: -0.4,
type: ‘foreground’,
direction: ‘horizontal’
});
< /script>
(added a space after “<” here on purpose, so you can see the code)

I know you can also do this with an id to call the javascript function but Im not sure what’s the best option (check the paroller.js website, there you’ll find every instruction)

also, I’m not sure if I add the good source for the javascript script source, for the jQuery library and jquery.paroller.js…

Or maybe there is a another way to do it without a javascript? I don’t really like the “fixed image” option as it doesn’t work on mobile (or maybe I’m wrong but that’s what I find on internet).

Many thanks for the one(s) who will help me!

I wouldn’t use code for something that can be done in a simple way with Webflow. Check out this tutorial:

hope this helps :slight_smile:

2 Likes

Wow I’m so stupid, I already look at like 80% of webflow tutorial and already came across this one, I was just like “no this is too easy, it won’t looks like what I need” lol, thanks a lot boss, solved my issue!