Timeline в отдельном блоке

Question

Вот так всё работает. Пример:

const timeline = $(".content");
const timelineItems = timeline.find('.story');
if (timeline.length > 0 && !timeline.hasClass('story-has-finished')) {
  $(window).scroll(function() {
    animateTimeline(timeline);
  });
}
const animateTimeline = (timeline) => {
  timelineItems.each(function(index) {
    var el = $(this);
    if (window.scrollY >= (el.offset().top - 100)) {
      el.addClass('story_timeline_active');
      //console.log('first');
      if (index == (timelineItems.length - 1)) {
        el.parent().addClass('story-has-finished')
      }
    }
  });
}

.story {
  position: relative;
  height: 500px;
  padding-left: 50px;
}

.story:after,
.story:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 100%;
  background-color: gray;
}

.story:after {
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scaley(0);
  transform: scaley(0);
  -webkit-transition: -webkit-transform 1s ease .25s;
  transition: -webkit-transform 1s ease .25s;
  transition: transform 1s ease .25s;
  transition: transform 1s ease .25s, -webkit-transform 1s ease .25s;
}

.story.story_timeline_active:after {
  background-color: green;
  -webkit-transform: scaley(1);
  transform: scaley(1);
}

.story.story_timeline_active .story_circle:before {
  border-color: green;
  -webkit-animation: scaleCircle .4s forwards;
  animation: scaleCircle .4s forwards;
}

.story:last-child:after,
.story:last-child:before {
  display: none;
  border-radius: 100%;
}

.story_circle:before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 10px solid gray;
  border-radius: 100%;
  background: white;
  -webkit-transition: border-color .5s ease;
  transition: border-color .5s ease;
}

@-webkit-keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">
<div class="story">один<div class="story_circle"></div></div>
<div class="story">два<div class="story_circle"></div></div>
<div class="story">три<div class="story_circle"></div></div>
<div class="story">четыре<div class="story_circle"></div></div>
<div class="story">пять<div class="story_circle"></div></div>
</div>

И это работает в случае прокрутки всего html-документа body. Но если нам нужно вставить timeline в отдельный блок и прокручивать непосредственно его, то в таком случае анимация уже не работает. С этим возникли сложности. Как можно это решить? Благодарю!

const timeline = $(".content");
const timelineItems = timeline.find('.story');
if (timeline.length > 0 && !timeline.hasClass('story-has-finished')) {
  $(window).scroll(function() {
    animateTimeline(timeline);
  });
}
const animateTimeline = (timeline) => {
  timelineItems.each(function(index) {
    var el = $(this);
    if (window.scrollY >= (el.offset().top - 100)) {
      el.addClass('story_timeline_active');
      //console.log('first');
      if (index == (timelineItems.length - 1)) {
        el.parent().addClass('story-has-finished')
      }
    }
  });
}

html, body {
  overflow: hidden;
}
.header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: chocolate;
}

.wrapper {
  padding-top: 50px;
  width: 100%;
  height: 100vh;
}

.wrp {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 50px);
}

.story {
  position: relative;
  height: 500px;
  padding-left: 50px;
}

.story:after,
.story:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 100%;
  background-color: gray;
}

.story:after {
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scaley(0);
  transform: scaley(0);
  -webkit-transition: -webkit-transform 1s ease .25s;
  transition: -webkit-transform 1s ease .25s;
  transition: transform 1s ease .25s;
  transition: transform 1s ease .25s, -webkit-transform 1s ease .25s;
}

.story.story_timeline_active:after {
  background-color: green;
  -webkit-transform: scaley(1);
  transform: scaley(1);
}

.story.story_timeline_active .story_circle:before {
  border-color: green;
  -webkit-animation: scaleCircle .4s forwards;
  animation: scaleCircle .4s forwards;
}

.story:last-child:after,
.story:last-child:before {
  display: none;
  border-radius: 100%;
}

.story_circle:before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 10px solid gray;
  border-radius: 100%;
  background: white;
  -webkit-transition: border-color .5s ease;
  transition: border-color .5s ease;
}

@-webkit-keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header"></div>
<div class="wrapper">
<div class="wrp">

<div class="content">
<div class="story">один<div class="story_circle"></div></div>
<div class="story">два<div class="story_circle"></div></div>
<div class="story">три<div class="story_circle"></div></div>
<div class="story">четыре<div class="story_circle"></div></div>
<div class="story">пять<div class="story_circle"></div></div>
</div>

</div>
</div>

Answer 1

Вы во втором примере слушаете window, а сколлите .wrp, повешайте обработчик на него.

const timeline = $(".content");
const timelineItems = timeline.find('.story');
if (timeline.length > 0 && !timeline.hasClass('story-has-finished')) {
  $('.wrapper .wrp').scroll(function() {
    animateTimeline(timeline);
  });
}
const animateTimeline = (timeline) => {
  timelineItems.each(function(index) {
    var el = $(this);
    if (window.scrollY >= (el.offset().top - 100)) {
      el.addClass('story_timeline_active');
      //console.log('first');
      if (index == (timelineItems.length - 1)) {
        el.parent().addClass('story-has-finished')
      }
    }
  });
}

html, body {
  overflow: hidden;
}
.header {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: chocolate;
}

.wrapper {
  padding-top: 50px;
  width: 100%;
  height: 100vh;
}

.wrp {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 50px);
}

.story {
  position: relative;
  height: 500px;
  padding-left: 50px;
}

.story:after,
.story:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 100%;
  background-color: gray;
}

.story:after {
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scaley(0);
  transform: scaley(0);
  -webkit-transition: -webkit-transform 1s ease .25s;
  transition: -webkit-transform 1s ease .25s;
  transition: transform 1s ease .25s;
  transition: transform 1s ease .25s, -webkit-transform 1s ease .25s;
}

.story.story_timeline_active:after {
  background-color: green;
  -webkit-transform: scaley(1);
  transform: scaley(1);
}

.story.story_timeline_active .story_circle:before {
  border-color: green;
  -webkit-animation: scaleCircle .4s forwards;
  animation: scaleCircle .4s forwards;
}

.story:last-child:after,
.story:last-child:before {
  display: none;
  border-radius: 100%;
}

.story_circle:before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 10px solid gray;
  border-radius: 100%;
  background: white;
  -webkit-transition: border-color .5s ease;
  transition: border-color .5s ease;
}

@-webkit-keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleCircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  33% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header"></div>
<div class="wrapper">
<div class="wrp">

<div class="content">
<div class="story">один<div class="story_circle"></div></div>
<div class="story">два<div class="story_circle"></div></div>
<div class="story">три<div class="story_circle"></div></div>
<div class="story">четыре<div class="story_circle"></div></div>
<div class="story">пять<div class="story_circle"></div></div>
</div>

</div>
</div>

БЛОГ НА HUSL

Timeline в отдельном блоке

Ответы (1 шт):