如何在从侧面到中心然后再回到侧面滚动时为 2 个元素设置动画

Question

I am trying to control the horizontal movement of 2 elements with scroll: one coming from left, the other from right and make them meet at the center (when they are in the center of the window), then make them return to their initial position as you continue to scroll.

And the reverse of this should happen when you scroll back to top. Also, I am trying to make this movement scale for any device.

This is what I tried: https://jsfiddle.net/h8voaqm5/2/

<div class="scroll-image">
      <img src="" class="circle from-left"/>
      <img src="" class="circle from-right"/>
</div>

    var total = $(window).height() - current;

// select elements
    var eleRight = $(".from-right");
    var eleLeft = $(".from-left");

// select their start position
    var currPositionRight = eleRight.position().left;
    var currPositionLeft = eleLeft.position().left;

    var win = $(window).height()/2;
    var trackLength = $(window).width()/2; // movement should be from 0 to 50 vw

$(window).scroll(function (event) {

var start = $(".circle").offset().top - $(window).height();
//  start movement when img is in view

    current = $(window).scrollTop();

    var newPosition = trackLength * (current/total);

    if (current > start) { // start anim
      //  go until half     
      if (current > start && current < (start+win)) {

        eleLeft.css({left:currPositionLeft + newPosition+'px'});
        eleRight.css({left:currPositionRight - newPosition+'px'});

      } else {
       //  return in the second half
        var newP = trackLength * (current/total)/10;

        eleLeft.css({left:currPositionLeft - (newP)+'px'});
        eleRight.css({left:currPositionRight + (newP)+'px'});
      }
    }
});

But I can't seem to grasp the Maths for returning the circles to their initial position.

Thanks in advance!

Answer 1

 // var current = $(window).scrollTop(); // var total = $(window).height() - current; // select elements // var eleRight = $(".from-right"); // var eleLeft = $(".from-left"); // select their start position // var currPositionRight = eleRight.position().left; // var currPositionLeft = eleLeft.position().left; // var win = $(window).height()/2; // var trackLength = $(window).width()/2; // movement should be from 0 to 50 vw // $(".scroll-image").click(function(){ // }) // $(window).scroll(function(event) { var x = $(".scroll-image").offset(); var imageDivscroll = x.top; var Wheight = $(window).height() / 2; if ($(window).scrollTop() >= imageDivscroll - Wheight) { $('.scroll-image').addClass('animate'); } else { $('.scroll-image').removeClass('animate'); } // var start = $(".circle").offset().top - $(window).height(); // start movement when img is in view // current = $(window).scrollTop(); // var newPosition = trackLength * (current/total); // if (current > start) { // start anim // go until half // if (current > start && current < (start+win)) { // eleLeft.css({left:currPositionLeft + newPosition+'px'}); // eleRight.css({left:currPositionRight - newPosition+'px'}); // } else { // return in the second half // var newP = trackLength * (current/total)/10; // eleLeft.css({left:currPositionLeft - (newP)+'px'}); // eleRight.css({left:currPositionRight + (newP)+'px'}); // } // } // }); });

 * { padding: 0; margin: 0; box-sizing: border-box; } html, body { min-height: 100vh; } .section { padding: 4em; background: rgb(50, 50, 50); min-height: 50vh; color: white; text-align: center; } .section:nth-child(even) { background: tomato; } .scroll-image { background: rgb(40, 40, 40); min-height: 50vh; height: 50vh; display: flex; vertical-align: middle; align-items: center; position: relative; } .circle { max-width: 25vw; max-height: 25vh; position: absolute; } .from-right { right: 0; } .from-left { left: 0; } /* Animation key frame */ .scroll-image { position: relative; } .scroll-image img:first-child { position: absolute; left: 0; } .scroll-image img:last-child { position: absolute; right: 0; } .scroll-image.animate img:first-child { animation: leftSide 2s; } .scroll-image.animate img:last-child { animation: rigthSide 2s; } @keyframes leftSide { 0% { left: 0%; } 50% { left: 46%; } 100% { left: 0%; } } @keyframes rigthSide { 0% { right: 0%; } 50% { right: 46%; } 100% { right: 0%; } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="section"> <h1>CONTENT</h1> <p class="font-weight-normal pr-xl-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p> </div> <div class="section"> <h1>CONTENT</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p> </div> <div class="scroll-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Purple_circle_100%25.svg/1024px-Purple_circle_100%25.svg.png" class="circle from-left" /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Purple_circle_100%25.svg/1024px-Purple_circle_100%25.svg.png" class="circle from-right" /> </div> <div class="section"> <h1>CONTENT</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p> </div> <div class="section"> <h1>CONTENT</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit. </p> </div> </div>

it should be helpful for you