Streaming live at 10am (PST)

Help with parallax and video lightbox


#1

Hello,

First week, first project with Webflow - fun times.

Share link:
https://preview.webflow.com/preview/good2andh?preview=72603085e01ada714546a3051758b5f3

Publish link:
http://good2andh.webflow.io/

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 pensive :
- 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 confused

Help please smile


#2

Hi @thanksthom, thanks for the post.

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:

Wrong:

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 smile

Regards,
Dave


#3

Hi @thanksthom!

Did the problem get solved for you?
Cheers!


#4

Hi @StevenP

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?

Thanks,
Thomas


#5

Yo!

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) ! smile¨


#6

Thanks for your advice @StevenP - very jävla.
I've since optimised my image sizes and hopefully page loads also.

I'm now having another problem with one of my forms.
http://good2andh.webflow.io/

On first load, the Success State is active?
Hoping you or someone else has some time to help me find a fix for this.

Thanks,
Thomas


#7

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