Jump to content
Search Community

Vertical infinite loop slider

Ryosuke test

By Ryosuke
in GSAP

Moderator Tag
 Share

Recommended Posts

Ryosuke test

Ryosuke

Posted
Posted 
 <!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
body,
html {
  margin: 0;
  padding: 0;
  
}

ul {
  list-style: none;
}


#wrapper {
  z-index: 1000;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: fixed;
  height: 100%;  
  width: 100%;
}
.box {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  } 
 
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box">
      <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
        <ul>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
        </ul>
      </div>
      <div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);">
        <ul>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/1.jpeg" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/2.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/3.jpeg" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="image/4.jpeg" alt="" height="200px" width="200px"></a></li>
         
        </ul>
      </div>

    </div>
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
$(function () {
  const loop = document.getElementById('loop_js');
  
  const loopAnim = new TimelineMax({
    repeat: -1 
  });

  let loopItem = (window.innerWidth, loop.children[0]);
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  loopAnim
    .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
    .to(loop, 0, { ease: Power0.easeNone, y: 0 });

  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
      $(document).on(mousewheelevent,function(e){
          e.preventDefault();
          var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
          if (delta < 0){
              loopAnim.time(loopAnim.time()+1);
          } else {
            loopAnim.time(loopAnim.time()-1);
          }
      });
});


$(function () {
    const loop = document.getElementById('loop_js2');
    
    const loopAnim = new TimelineMax({
      repeat: -1 
    });

    let loopItem = (window.innerWidth, loop.children[0]);
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));

    
    loopAnim
      .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
      .to(loop, 0, { ease: Power0.easeNone, y: 0 });

      

    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
        $(document).on(mousewheelevent,function(e){
            e.preventDefault();
            var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
            if (delta < 0){
                loopAnim.time(loopAnim.time()+1);
            } else {
              loopAnim.time(loopAnim.time()-1);
            }
        });
});


  </script>
</body>
</html>

i make vertical infinite loop slider.

On the left side, i made it but i want to make slider that phote is coming up from below like right side.

And then on the left side, it's infinite but on the right side the infinite loop stop on the way.

so i want to make vertical infinite loop slider  from below like left slider's loop.

please help me

See the Pen qBZeZZa by ryosuke888 (@ryosuke888) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey kjvd and welcome to the GreenSock forums.

 

Sorry but I do not understand what you're asking. Please make a minimal demo of the issue using CodePen if you'd like our help debugging:

 

Additionally I see that you are using the old syntax for GSAP. We highly recommend using the improved GSAP 3 syntax which also allows you to use new features. See this post for info about upgrading:

 

 

Link to comment
Share on other sites
Ryosuke test

Ryosuke

Posted
  • Author
Posted

 

Sorry for the incomprehensible.

I am creating a slider that comes up from the bottom of the screen like the slider on the right, but as you can see when scrolling, the slider breaks in the middle. I want to create an infinite loop stider like the slider on the left, what should I do?

Do you have any ideas?

Link to comment
Share on other sites
Ryosuke test

Ryosuke

Posted
  • Author
Posted

Hey @mikel

Thanks your help

i have a question.

i create a slider like you and then  i am creating a slider that comes from the left of the screen like this Codepen .

But when the slide finishes once, the slide strats from the left of the screen again.

Is it possible to cotinue the sliders?

See the Pen NWNQMWd by ryosuke888 (@ryosuke888) on CodePen

 

 

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey Ryosuke. When making new versions of your demo please use the "fork" button on CodePen so that the old versions are retained for context in these forums.

 

As for your issue, I am not understanding what you're wanting. What's wrong with mikel's demos above? What specific question do you have?

Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...