Solved

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

Einars
Explorer
57 2 10

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!


<div class="container">
<div class="section">...</div>
<div class="section">...</div>
...
</div>

<style>
  .container {
  height: 100vh;
  overflow-y: scroll;
  }
  .section {
  height: 100vh;
  }
</style>


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

 
Accepted Solution (1)
Kani
Shopify Partner
468 125 225

This is an accepted solution.

@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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>
Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

Replies 7 (7)

Kani
Shopify Partner
468 125 225

Hi @Einars 

 

Move '</style>' to bottom

chrome-capture-2022-8-10.gif

Kani_0-1662772871662.png

<style>
        .container {
        height: 100vh;
        overflow-y: scroll;
        }
        .section {
        height: 100vh;
        }
        .container {
        scroll-snap-type: y mandatory;
        }
        .section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        }
    </style>

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Einars
Explorer
57 2 10

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

Kani
Shopify Partner
468 125 225

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 🙂

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Einars
Explorer
57 2 10

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.

Kani
Shopify Partner
468 125 225

This is an accepted solution.

@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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>
Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Einars
Explorer
57 2 10

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!

hrbrtrg
Visitor
1 0 0

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