Hello webflow experts. I need some help with parallax effect based off @PixelGeek tutorial.
Here’s my sample: https://preview.webflow.com/preview/hungvinh?preview=025108f48e2ad0bfd89e99ed01e9910a
What I want to figure out is how to get rid of the horizontal and vertical bars as well as get the parallax to react to vertical mouseovers. Right now it’s just parallaxing horizontally.
Any insight would really help.
Thanks everybody!!!
OMG! It’s Hung V! I’m such a fan of your History of Animation page! 
Great job on that, Sir.
As for your question, just set your scene div to overflow:hidden
Great design so far! Can’t wait to see what you do with it.
(i hope i used enough exclamation points express my excitement)
@PixelGeek LOL…thanks alot man!!! I really appreciate it. I hope to one day go back and really finish the history of animation like I intended too…but for right now I want to try and start building my portfolio. I will look into the parallax thing thanks again man!!!
P.S. I beat you in exclamation points.
@PixelGeek hey man, I tried setting the scene div to hidden and everything just disappears. Do you know why this is?
give the scene a width of 100% and a height of 100vh
also, you’ll need to scale up your layers so you don’t see the borders of them
@PixelGeek Awesome it works when I publish it, but do you know why everything disappears when I’m in design mode?
working with plugins and custom code is kind of quirky. You have to imagine things working correctly when it doesn’t seem like it in the Webflow designer tool.
@PixelGeek ahhh ok. So I’m not doing anything wrong. Thanks again man, it was very helpful. I hope you don’t mind me bothering you, because I’ll probably have alot of questions as I start building this out.
ask as many questions as you want. i’m here to help you design awesome things! 
Hi @hvinh1, just to add to what @PixelGeek told you, whatever solution you use, if it involves using custom code, that will only be run when the site is published. Custom code is not run in the designer or preview modes, at least not yet
If you create a spiffy interaction, that will be shown in the designer and preview modes
Thanks guys @PixelGeek @cyberdave
So I got the VH to work on desktop, but it doesn’t play too nicely on mobile. I remember encountering this problem when I was doing the history of animation site. Do you guys have any suggestions to make it work nicely for both? I really love the idea of the marque area going full screen, but if it doesn’t work on mobile, is there anything else I can do besides VH?
VH should work on mobile - Can I use... Support tables for HTML5, CSS3, etc
if you want the other way, you can try
position:absolute
top: 0
bottom:0
left:0
right:0
width:100%
height:100%
but then you’ll need to push the content below it down by 100% from the top.
@PixelGeek @cyberdave so looks like it does work on mobile. What if I wanted to do another full screen section below the main marque with the same parallax feature, would I have to change any code to do so?
@PixelGeek @cyberdave Hey guys, can you scale a background image so you don’t see the borders? I was able to scale an uploaded image but not a standard background image.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
