I see the code that I pasted in “Custom Code”. It’s the parallax code from: http://webflowcodestutorials.webflow.io/non-native. Is there an additional step I need to make to activate the code? Following the webflow settings does nothing with the code for me (so the settings currently set up are my hode-podge effort to create the desired effect)
Problems :
It may be how I’ve set it up but… I can’t click the video lightbox!
I’m not sure how to keep the desired effect whilst being usable.
I think the “Zoom In Parallax” effect could be quite nice when used on the mountain. But first I need to figure out how to get it to work.
Is there a better way to set up the positioning of the silhouette mountain? I’m using % margins at the moment. It would be nice to have a consistent amount of silhouette showing on all screen resolutions. For example, on 1440x900, the design isn’t as epic
The first thing to check, is that you have the custom code in the Footer correctly set. In the Footer, you have pasted the script code, but that is not working, because the script is not wrapped with the script tags:
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(); });
Right:
<script>
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(); });
</script>
Update your Footer code, then republish the site so that a further look can be had
The fix @cyberdave posted, worked to get the parallax working. Thanks a lot Dave.
However, the main problem is being able to click the video thumbnail to launch the video in a lightbox.
I think it’s a result of how I’ve created the top 2 sections?
Additionally, I think I may have too many things going on in terms of interactions and images as my scrolling experience is not smooth. What do you guys think? Any suggestions?
Well the first thing is that when using the Parallax (regular) from my library, you set the containing div in the Hero section (it’s called Start Hero Div on your site) to a Z-index of -1. That has to be -1 for the parallax to work, but it makes everything unclickable in the Hero Section. I tried to find a better solution to his but haven’t as of yet.
Second:
The scrolling is very jiggy and non-smooth for me in both Safari and Chrome. That might have to to with some heavy stuff being loaded (like the video) or a giant-megabyte-background.
Other than that I really like it. The silhouette section is jävla cool (as we say in Swedish) ! ¨
:
