How do I get the main splash video to use parallax? In another thread @tuanphan gave this solution which worked for a section further down the page:

On 11/21/2023 at 10:51 PM, tuanphan said:

Try this CSS code (for Parallax effect section 2)

[data-section-id="655b0c5f9c28a22da5007305"] {
img {
    visibility: hidden;
}
.section-background {
    background-color: transparent !important;
}
.section-border {
    background-image: url(https://images.squarespace-cdn.com/content/v1/61a2e58f1fd4bc35a51bcb19/1700465777444-YCNPKRVIN0HYQ6D8N157/image-asset.jpeg);
    background-attachment: fixed;
}}

 

But when I try to target my splash landing which is a video... it doesn't work at all. I know this is because apparently squarespace doesn't give a public facing url for the videos you upload. So I cant use the video url to replace the one in the code provided. I saw a suggestion saying to upload directly to the custom files area under CSS, but it can only take files under 20mb. The video exceeds that.

Can anyone tell me how I would achieve parallax on the splash video? Do I need to finesse an unlisted youtube video and have it point there or something?

site: www.thetenmg.com

On 1/11/2024 at 3:43 AM, LeauxFi said:

How do I get the main splash video to use parallax? In another thread @tuanphan gave this solution which worked for a section further down the page:

  

 

But when I try to target my splash landing which is a video... it doesn't work at all. I know this is because apparently squarespace doesn't give a public facing url for the videos you upload. So I cant use the video url to replace the one in the code provided. I saw a suggestion saying to upload directly to the custom files area under CSS, but it can only take files under 20mb. The video exceeds that.

Can anyone tell me how I would achieve parallax on the splash video? Do I need to finesse an unlisted youtube video and have it point there or something?

 

site: www.thetenmg.com

Parallax like this example? https://codesandbox.io/s/parallax-video-background-xowd0

On 1/13/2024 at 3:47 AM, tuanphan said:

Parallax like this example? https://codesandbox.io/s/parallax-video-background-xowd0

indeed. but MORE like the example here:

1 - https://jakemitchellmiller.com/   -this is a perfect execution of what I wanted to achieve. Full screen splash that behaves like a normal parallax somehow. I believe this site was also created here on squarespace and was linked from another thread link from months past

On 1/13/2024 at 8:47 AM, tuanphan said:

Parallax like this example? https://codesandbox.io/s/parallax-video-background-xowd0

I needed something exactly like this one how do i achieve it?

I would like something like that as well for my site so the page scrolls over the header video 

On 4/18/2024 at 7:10 PM, Dalves said:

I needed something exactly like this one how do i achieve it?

The video section will be first section or?

If first, it will be easier, I can create a quick demo, then if you are okay, I will send code

With another position, you can add a section with Video Background then share site url, I will give some code to achieve similar effect (not same 100%)

On 4/21/2024 at 9:45 AM, tuanphan said:

The video section will be first section or?

If first, it will be easier, I can create a quick demo, then if you are okay, I will send code

With another position, you can add a section with Video Background then share site url, I will give some code to achieve similar effect (not same 100%)

Thank you, Yes its the first section.

On 4/22/2024 at 4:24 PM, Dalves said:

Thank you, Yes its the first section.

I did a quick demo, you can check

https://tuanphan3.squarespace.com/video-sticky-1?noredirect

pass: abc

5 hours ago, tuanphan said:

I did a quick demo, you can check

https://tuanphan3.squarespace.com/video-sticky-1?noredirect

pass: abc

This looks great, this is exactly something i am trying to do on my website, do you have a video tutorial of how you did it please? 

On 4/24/2024 at 10:38 PM, LightGraphix said:

This looks great, this is exactly something i am trying to do on my website, do you have a video tutorial of how you did it please? 

First, you add a Section with Video Background

Next, use this code to Custom CSS. Replace article>section:first-child with section id

use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

  article>section:first-child {
    height: 100vh !important;
    position: sticky;
    top: 0;
    padding: 0 !important;
}
article>section:first-child video {
    position: fixed !important;
    top: 0 !important;
}
article>section:nth-child(n+2) {
    z-index: 99999 !important;
}

13 hours ago, tuanphan said:

First, you add a Section with Video Background

Next, use this code to Custom CSS. Replace article>section:first-child with section id

use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

O WOWWWWWWWW TUAN YOU FIGURED IT OUT?! AMAZING MAN! I understood your directions to look like this:

//MAIN SPLASH PARALLAX
section[data-section-id="6619893fe162a37bf076b0f7"]:first-child {
    height: 100vh !important;
    position: sticky;
    top: 0;
    padding: 0 !important;
}
section[data-section-id="6619853fbf198429bab147bc"]:first-child video {
    position: fixed !important;
    top: 0 !important;
}
section[data-section-id="6619853fbf198429bab147bc"]:nth-child(n+2) {
    z-index: 99999 !important;
}

Is that correct? It gives pretty much the right result, but unlike yours, the text in the middle isnt staying put. So as you scroll down, the text is scrolling up under the parallax and peeking out over the top. Actually, if I didn't know any better I'd say the entire parallax effect stops just a tad short and thats what might be causing it. 

The splash I'm working on atm is:  www.aspiremusicgroup.com

im also trying it on my own personal site, and its showing the video from the parallax in a section below that it shouldnt be. i then tried to circumvent it with a separate video in that section below, but that causes BOTH videos to play very choppy. i also noticed that if i downgrade the section to the old modules instead of the new floating one, it solves the issue.  did i do something wrong in the code or have i just discovered a limitation? 

this example is : www.thetenmg.com

On 4/27/2024 at 3:47 AM, LeauxFi said:

 

O WOWWWWWWWW TUAN YOU FIGURED IT OUT?! AMAZING MAN! I understood your directions to look like this:

//MAIN SPLASH PARALLAX
section[data-section-id="6619893fe162a37bf076b0f7"]:first-child {
    height: 100vh !important;
    position: sticky;
    top: 0;
    padding: 0 !important;
}
section[data-section-id="6619853fbf198429bab147bc"]:first-child video {
    position: fixed !important;
    top: 0 !important;
}
section[data-section-id="6619853fbf198429bab147bc"]:nth-child(n+2) {
    z-index: 99999 !important;
}

 

Is that correct? It gives pretty much the right result, but unlike yours, the text in the middle isnt staying put. So as you scroll down, the text is scrolling up under the parallax and peeking out over the top. Actually, if I didn't know any better I'd say the entire parallax effect stops just a tad short and thats what might be causing it. 

The splash I'm working on atm is:  www.aspiremusicgroup.com

 

 

im also trying it on my own personal site, and its showing the video from the parallax in a section below that it shouldnt be. i then tried to circumvent it with a separate video in that section below, but that causes BOTH videos to play very choppy. i also noticed that if i downgrade the section to the old modules instead of the new floating one, it solves the issue.  did i do something wrong in the code or have i just discovered a limitation? 

this example is : www.thetenmg.com

I see you site are already same my demo

or you want navigation header under video section?

18 hours ago, tuanphan said:

I see you site are already same my demo

or you want navigation header under video section?

i think i explained poorly.

1. On this website: www.aspiremusicgroup.com I've been playing with your code and ran into a couple of problems with parallax. On the main landing page, the parallax is stopping short. In your demo, the page being scrolled past doesn't scroll up. It stays "sticky" or fixed in place while the other section covers it. This is how I want it. Mine instead, stays sticky until about 80% scrolled to the next section then it scrolls up normally, by shifting everything. So the effect of parallax dies at about 80% scroll.  I'll try to show what I mean in the video attachment. Keep your eyes to the top of the screen, as it scrolls, the parallax stops working. 

2. I've also found a second issue which ties into the second one I mentioned before. I did a parallax + custom border combo on another page on this site. It looks great and works great, however it glitches out on mobile. I've found that scrolling down looks fine until you hit the bottom of the page. Then when you scroll up entire sections are transparent until you switch scroll direction again. ALSO, I zoomed in on it but the color squares have what looks like a transparent pixel-wide line on the inside right of the borders. Neither issue appears on the desktop version of the site.  I uploaded a demo of this on youtube for you, and thats effecting THIS page :  www.aspiremusicgroup.com/branding

https://youtube.com/shorts/Pi1gfKDXuJ0?feature=share

Is it something in the code causing this? Or should we be disabling parallax on mobile phones? This is happening on android and iphone, in chrome, and safari, and firefox.

AS ALWAYS Tuan I appreciate all the help and knowledge

On 1/10/2024 at 8:43 PM, LeauxFi said:

How do I get the main splash video to use parallax? In another thread @tuanphan gave this solution which worked for a section further down the page:

  

 

But when I try to target my splash landing which is a video... it doesn't work at all. I know this is because apparently squarespace doesn't give a public facing url for the videos you upload. So I cant use the video url to replace the one in the code provided. I saw a suggestion saying to upload directly to the custom files area under CSS, but it can only take files under 20mb. The video exceeds that.

Can anyone tell me how I would achieve parallax on the splash video? Do I need to finesse an unlisted youtube video and have it point there or something?

 

site: www.thetenmg.com

Hey, i had a look at your site and it looks class.. i have a quick question how did you make your tool bar change colour // animate to go smaller like you did ? did you follow a tutorial? 

8 hours ago, LightGraphix said:

Hey, i had a look at your site and it looks class.. i have a quick question how did you make your tool bar change colour // animate to go smaller like you did ? did you follow a tutorial? 

Thank you! The one I'm working on now is better imo so I'll have to go back and fix my own later lol. But honestly just by searching thru the forums and learning the coding language myself from here a little bit. 

So for my site I used a combination of:

1- the main code telling the menu/header to change on scroll, and
2- defining the specific changes that take place on scroll (the icons and bar itself shrink to what size and how fast, then a second half defining what happens specifically on mobile devices) 

Heres the entire code I used to pull it off. Let me know if you want help adjusting it, or maybe if another person here on the forums can clean it up even more.

ENTIRE CODE:

//Menu style change on scroll
header#header.shrink {
    background-color: black !important;
   transition: all 0.6s;
}
header#header.shrink a {
    color: white;
    opacity: 1;
}
header#header.shrink img {
    filter: invert(1);
}
header#header.shrink use {
    fill: white !important;
    stroke: white !important;
}
header#header.shrink .header-nav-folder-content a {
     background: #fffffff !important;
   color: white;
}
header#header.shrink .header-nav-folder-content {
     background-color: rgba(0,0,0,0.70) !important;
   }
@media screen and (max-width: 767px) {header#header.shrink a {
    color: black;
    opacity: 1;}
}


//Menu Size and Icon Shrink
@media screen and (min-width: 767px) {
header#header img {
    transition: all 0.3s;
   }
header#header.shrink img {
    max-height: 40px;
    transition: all 0.3s;
}
}
//MOBILE Menu Size and Icon Shrink
@media screen and (max-width: 767px) {
header#header img {
    transition: all 0.3s;
   }
header#header.shrink img {
    max-height: 30px;
    transition: all 0.3s;
}
  .header * {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
  header#header.shrink {
    background-color: black !important;
   transition: all 0.4s;
  }
}

So in the first half of the code, it singles out the header and tells it what to do

Check this latest solution