Как анимировать 2 элемента на свитке из стороны в центр, затем обратно в сторону

Question

Я пытаюсь контролировать горизонтальное перемещение двух элементов с помощью свитка: один идет слева, другой справа и заставляет их встречаться в центре (когда они находятся в центре окна), а затем заставляет их вернуться к их начальная позиция при продолжении прокрутки.

И обратная ситуация должна произойти при прокрутке вверх. Кроме того, я пытаюсь сделать это масштабирование движения для любого устройства.

Это то, что я пытался: 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'});
      }
    }
});

Но я могу Похоже, что asp математика не вернула круги в исходное положение.

Заранее спасибо!

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>

это должно быть полезно для вас