Jump to content

Can you use parallax on a homepage splash VIDEO?

Recommended Posts

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

Edited by LeauxFi
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

 

Link to comment
  • 3 months later...
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%)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)
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

Edited by LeauxFi
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)
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

Edited by LeauxFi
Link to comment
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? 

Link to comment
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.