CODEWITHSUNDEEP
javascripthtmlcssmerndatascroller
aryan agarwal
aryan agarwal

Reputation: 1

why my data scroll is not working here in html?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
    
</head>
<body>
    
    <div id="main">
        <div data-scroll data-scroll-speed="-5" id="page-1">
            <nav>
                <img src="./channels4_profile.png" alt="" style="opacity: 0.8;">
                <div class="right-nav">
                    <button >Book a Demo</button>
                    <button ><i class="ri-menu-5-line"></i></button>
                </div>
            </nav>
            <div class="text">
                <h2>Experience Real <br/>
                    Estate Agility</h2>
                <div class="text-inner">
                    <h4>Create a digital twin of your existing building <br/>
                        and release the potential of Web3.</h4>
                    <button>Learn More</button>
                </div>
            </div>
            <video src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2" autoplay loop muted></video>
        </div>
        <div id="page-2">

        </div>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
css:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body, html {
    width: 100%;
    height: 100%;
}

#main {
    position: relative;
    overflow: visible;
} 

#page-1 {
    height: 100vh;
    width: 100vw;
    position: relative;
} 

#page-1>video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#page-1>nav {
    display: flex;
    justify-content: space-between;
    height: 10vh;
    width: 100%;
    padding: 0 30px;
    position: absolute;
}

.right-nav {
    margin: 20px;
}

.right-nav>button {
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #0e50fa;
    border: 1px solid white;
    color: white;
}

.text {
    position: absolute;
    bottom: 25%;
    left: 15%;
}

.text>h2 {
    font-size: 6vw;
    color: white;
}

.text-inner {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30%;
    width: 100%;
}
.text-inner>h4{
    color: whitesmoke;
    font-weight: 300;
}
.text-inner>button{
    padding:10px 20px;
    color:#0e50fa;
    border: 1px solid #0e50fa;
    border-radius: 50px;
    background-color:white;
}

/*page-2*/
#page-2{
    position: relative;
    height: 100vh;
    width:100vw;
    background-color: red;
}

i am trying like when my second page comes up this will make the second page go up above the first page it is not working please help? can you please tell me what wrong in this code in the css and html code i have been trying it for quite a while data scroll from locomotive and scroll trigger

Sure, here is the HTML code with the formatting fixed in 200 characters:element is now empty, so it will not be displayed on the page. To make it visible, you can add some content to it, such as text, images, or a video. You can also set the position property to absolute and the top property to 0 to make it appear at the top of the viewport.

Upvotes: 0

Views: 460

Answers (1)

GrafiCode
GrafiCode

Reputation: 3374

You didn't set the data attributes required for your library to handle elements: data-scroll-container on the container div, and data-scroll-section on each section (you called them pages) of your markup. I added those divs in the following example.

Also, you need to fire the library via javascript, added that too in the following example.

This is all based on the "smooth scrolling and parallax" example documented here: https://github.com/locomotivemtl/locomotive-scroll

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
}

#main {
  position: relative;
  overflow: visible;
}

#page-1 {
  height: 100vh;
  width: 100vw;
  position: relative;
}

#page-1>video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#page-1>nav {
  display: flex;
  justify-content: space-between;
  height: 10vh;
  width: 100%;
  padding: 0 30px;
  position: absolute;
}

.right-nav {
  margin: 20px;
}

.right-nav>button {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #0e50fa;
  border: 1px solid white;
  color: white;
}

.text {
  position: absolute;
  bottom: 25%;
  left: 15%;
}

.text>h2 {
  font-size: 6vw;
  color: white;
}

.text-inner {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
}

.text-inner>h4 {
  color: whitesmoke;
  font-weight: 300;
}

.text-inner>button {
  padding: 10px 20px;
  color: #0e50fa;
  border: 1px solid #0e50fa;
  border-radius: 50px;
  background-color: white;
}


/*page-2*/

#page-2 {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: red;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">


<div id="main" data-scroll-container>
  <div data-scroll-section>
    <div data-scroll data-scroll-speed="-5" id="page-1">
      <nav>
        <img src="./channels4_profile.png" alt="" style="opacity: 0.8;">
        <div class="right-nav">
          <button>Book a Demo</button>
          <button><i class="ri-menu-5-line"></i></button>
        </div>
      </nav>
      <div class="text">
        <h2>Experience Real <br/> Estate Agility</h2>
        <div class="text-inner">
          <h4>Create a digital twin of your existing building <br/> and release the potential of Web3.</h4>
          <button>Learn More</button>
        </div>
      </div>
      <video src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2" autoplay loop muted></video>
    </div>
  </div>

  <div data-scroll-section>
    <div id="page-2" data-scroll>
      <p>PAGE 2</p>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>

Upvotes: 1

Related Questions