Need help with parallax effect on mousemove code mistake?

Store Design
1

Hi! I need help trying to figure out where my code mistake is at… in resume I am trying to achieve the following.

https://www.youtube.com/watch?v=ntg6tbGxP3k

So I added this code to my index.liquid folder

Parallax Mousemove Effect | Change Background Position On Mousemove

Space
Background

and this one to my theme.css folder

body
.page-container
{
font-family: “Segoe UI”, sans-serif;
background: url(https://cdn.shopify.com/s/files/1/0629/0548/3520/files/bg.png?v=1645772573)no-repeatno-repeat);
background-size: cover;
height: 100vh;
}

.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.container img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: contain;
}

.container h2{
z-index: 1;
position: relative;
color: #fff;
font-size: 90px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 32px;
line-height: 60px;
}

.container h2 span{
font-size: 48px;
font-weight: 500;
letter-spacing: 10px;
}

@media (max-width:800px){
.container h2{
font-size: 60px;
letter-spacing: 19px;
line-height: 35px;
}

.container h2 span{
font-size: 26px;
}
}

this is my result… https://wzfgosbw0n3lnd56-62905483520.shopifypreview.com

as you can see I am not doing something correct somewhere, because the size of everything seems to be a lot smaller than in the video so I would greatly appreciate the help in fixing the errors.

Thank you for the help in advance.

2

Hi,

Please check your URL: https://wzfgosbw0n3lnd56-62905483520.shopifypreview.com It’s doesn’t work.

Thank,

3

I’ve had this problem before too!

4

my apologies I didn’t realize. Here is the link once more https://wzfgosbw0n3lnd56-62905483520.shopifypreview.com

also if it doesn’t work this time please visit www.kaorocoffee.com and use “kaoro” as a password.

Thank you for trying to help, I appreciate it immensely.

5

yep, Hopefully someone helps us. I will keep trying to fix it myself until then.

6

ok so what I managed to do on the theme.css code I removed the “hidden” from the overflow section like this.

.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: ;
}

I hope this helps you. It worked for me.