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

Einars · ‎09-09-2022

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;
}

Kani · ‎09-10-2022

@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

Kani · ‎09-09-2022

Hi @Einars

Move '</style>' to bottom

<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 · ‎09-10-2022

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 · ‎09-10-2022

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 · ‎09-10-2022

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 · ‎09-10-2022

@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 · ‎09-10-2022

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 · ‎05-24-2024

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

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

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

Community Blog Articles