How can I integrate a Tesla-like scrolling effect into my Shopify site?

Store Design
1

Hey,

I managed to find a TikTok video on how to make a scrolling effect like on the Tesla page, but unfortunately, I’m not smart enough to integrate it into Shopify. Could someone please quickly assist? The video is in the attachments and the code is below this message. Thanks!

...
...
...
.container { height: 100vh; overflow-y: scroll; } .section { height: 100vh; }

.container {
scroll-snap-type: y mandatory;
}
.section {
scroll-snap-align: start;
scroll-snap-stop: always;
}

2

Hi @Einars

Move ‘’ to bottom

chrome-capture-2022-8-10.gif

Kani_0-1662772871662.png
Kani_0-1662772871662.png771×672 24.6 KB
3

Hi @Kani ,

Thanks!

Perhaps it is possible to somehow add this code automatically to every section on the home page?

I checked other community discussions and no one had the code for the snap scroll. I have the code, but don’t know how, hah.

website: www.swish.eu

password: e

4

Actually you should not use this, it’s only working well on phone

https://swiperjs.com/demos#vertical you can check this one.

Make sure if your homepage is all big image sections, then you can do it like this.

It looks cool, but useless :slightly_smiling_face:

5

Hey @Kani ,

Thanks for the reply. Is there an easy way to install your preferred Vertical slider code?

We want to distribute really advanced gym equipment and therefore we imagined making each section as the “next slide” so customers can slowly step by step introduce themselves to the brand and the science behind it. Would be great to provide a similar shopping experience like in shopping malls where customers visit one store at a time.

Gym equipment is literally top-tier in the world, but on the other side, we can’t even afford a programmer yet, hah.

6

@Einars

I think you can simply follow demo code to add it into your store.

You can try to edit the code here, and figure it out how dose the code work. then try to edit content by yourself.


  
    
    
    
    
    

    
    
  

  
    
    
      

        
Slide 1

        Slide 2

        Slide 3

        Slide 4

        Slide 5

        Slide 6

        Slide 7

        Slide 8

        Slide 9
7

Hi @Kani ,

Thank you for the reply! Unfortunately, this is way beyond our programming skills so for now we will stick to the classic layout, but I’m sure someone with more knowledge will take full advantage of this code.

Appreciate your effort!

8

@Kani In which part of the code should this go? In theme.liquid?