如何在滚动时开始动画，然后在5秒后延迟，然后在向后滚动时又开始动画？

时间：2019-12-20 03:17:02

标签： javascript css css-animations

我写了这个时间轴，当用户滚动到屏幕中间然后显示动画，但是每次条件为真时都会重复，所以我如何设置它第一次显示动画，然后延迟5s然后如果条件为是的，它会再次显示动画吗？ （https://codepen.io/kuro-1996/pen/povRbzJ）

$(document).ready(function() {
var time = $(".item__time");
var content = $(".item__content");

1 个答案:

答案 0 :(得分：1)

声明一个值为boolean的全局变量，以便我们可以在任何地方访问。当页面滚动到达结尾时，将变量更新为false值。在动画检查之前，如果animateMe是true，请对其进行动画处理，否则请停止。

   $(document).ready(function() {
var time = $(".item__time");
var content = $(".item__content");
  let animateMe = true;
$(window).scroll(function() {
	for (var i = 0; i < time.length; i++) {
		if ( animateMe === true &&
      $(this).scrollTop() >
      $(time[i]).offset().top + 8 +
        $(time[i]).height() / 2 -
        $(window).height() / 2
		)
  { //console.log(window.pageYOffset);
     // if it reaches to end then,animateMe true
     if( window.pageYOffset > 1452 ) animateMe = false;
     console.log()
     // animate only if true
     if( animateMe === true && $(time[i])[0].classList[1] !== 'active' ) {
        if ($(time[i]).hasClass("change")) $(time[i]).removeClass("change");
        $(time[i]).addClass("active");
        $(content[i]).addClass("active");
     }
		}
  
  // check if the animateMe is false, so stop it
		if ( animateMe === true && $(time[i])[0].classList[1] !== 'active' &&
			$(this).scrollTop() <
			$(time[i]).offset().top +
				$(time[i]).height() / 2 -
				$(window).height() / 2
		)
			if ($(time[i]).hasClass("active")) {
				$(time[i]).addClass("change");
				$(time[i]).removeClass("active");
			}	
	}
  
});
});
body {
  background-color: #25303b;
}
body p {
  margin: 0;
}

@keyframes roll1 {
  0% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes roll2 {
  0% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  50% {
    opacity: 1;
    transform: translateY(8%);
  }
  65% {
    opacity: 1;
    transform: translateY(-4%);
  }
  80% {
    opacity: 1;
    transform: translateY(4%);
  }
  95% {
    opacity: 1;
    transform: translateY(-2%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.top {
  min-height: 500px;
}

.bot {
  min-height: 500px;
}

.timeline .timeline__block {
  display: flex;
  margin-bottom: 15px;
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block {
    display: block;
    max-width: 80%;
    margin: 15px auto;
  }
}
.timeline .timeline__block .block__item {
  position: relative;
  width: 50%;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block .block__item {
    width: 100%;
  }
}
.timeline .timeline__block .block__item .item__time {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #25303b;
  border-radius: 50%;
  border: 2px solid #ccc;
  text-align: center;
  color: #ccc;
  padding-top: 3px;
  position: absolute;
  right: -25px;
  z-index: 2;
}
.timeline .timeline__block .block__item .item__time.active {
  animation: roll1 1s;
}
.timeline .timeline__block .block__item .item__time.change {
  animation: roll2 1s;
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block .block__item .item__time {
    padding-top: 7px;
  }
}
@media screen and (max-width: 375px) {
  .timeline .timeline__block .block__item .item__time {
    padding-top: 2px;
    width: 40px;
    height: 40px;
  }
}
.timeline .timeline__block .block__item .item__time p {
  font-size: 9px;
}
.timeline .timeline__block .block__item .item__time .big {
  font-size: 12px;
  font-weight: 700;
}
.timeline .timeline__block .block__item .item__content {
  width: 60%;
  position: relative;
  opacity: 0;
  border-radius: 10px;
}
.timeline .timeline__block .block__item .item__content.active {
  animation: slideDown 1s;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block .block__item .item__content {
    margin-left: 80px;
  }
}
.timeline .timeline__block .block__item .item__content h2 {
  height: 50px;
  line-height: 50px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 0 15px 0 15px;
  color: #ffffff;
  font-size: 20px;
}
.timeline .timeline__block .block__item .item__content p {
  background: #ffffff;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 3px 15px;
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block .block__item .item__content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.timeline .timeline__block:nth-child(odd) .block__item::after {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  right: -1px;
  top: 15px;
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block:nth-child(odd) .block__item::after {
    left: 24px;
  }
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block:nth-child(odd) .block__item::after {
    left: 49px;
  }
}
@media screen and (max-width: 375px) {
  .timeline .timeline__block:nth-child(odd) .block__item::after {
    left: 44px;
  }
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block:nth-child(odd) .block__item .item__time {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block:nth-child(odd) .block__item .item__time {
    left: 25px;
  }
}
.timeline .timeline__block:nth-child(odd) .block__item .item__content::after {
  content: "";
  height: 15px;
  position: absolute;
  background-color: inherit;
  top: 15px;
  width: 15px;
  right: -5px;
  transform: rotate(45deg);
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block:nth-child(odd) .block__item .item__content::after {
    right: unset;
    left: -5px;
    transform: rotate(-45deg);
  }
}
.timeline .timeline__block:nth-child(even) {
  flex-flow: row-reverse;
}
.timeline .timeline__block:nth-child(even) .block__item::before {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  left: -1px;
  top: 15px;
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block:nth-child(even) .block__item::before {
    left: 24px;
  }
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block:nth-child(even) .block__item::before {
    left: 49px;
  }
}
@media screen and (max-width: 375px) {
  .timeline .timeline__block:nth-child(even) .block__item::before {
    left: 44px;
  }
}
.timeline .timeline__block:nth-child(even) .block__item .item__time {
  left: -25px;
  right: unset;
}
@media screen and (max-width: 991px) {
  .timeline .timeline__block:nth-child(even) .block__item .item__time {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .timeline .timeline__block:nth-child(even) .block__item .item__time {
    left: 25px;
  }
}
.timeline .timeline__block:nth-child(even) .block__item .item__content::after {
  content: "";
  height: 15px;
  position: absolute;
  background-color: inherit;
  top: 15px;
  width: 15px;
  z-index: 1;
  left: -5px;
  transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
		<div class="top"></div>
		<div class="container timeline">
			<div class="timeline__block">
				<div class="block__item">
					<div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2015</p>
					</div>
					<div class="item__content" style="background-color: #E74C3C;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
					<div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2014</p>
					</div>
					<div class="item__content" style="background-color: #2ECC71;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
                    <div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2013</p>
					</div>
					<div class="item__content" style="background-color: #E67E22;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
                    <div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2012</p>
					</div>
					<div class="item__content" style="background-color: #1ABC9C;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
                    <div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2011</p>
					</div>
					<div class="item__content" style="background-color: #824B99;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
                    <div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2010</p>
					</div>
					<div class="item__content" style="background-color: #1ABC9C;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
			<div class="timeline__block">
				<div class="block__item">
                    <div class="item__time">
						<p>30<sup>th</sup></p>
						<p class="big">JAN</p>
						<p>2009</p>
					</div>
					<div class="item__content" style="background-color: #824B99;">
						<h2>THE TITLE</h2>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
							eiusmod tempor incididunt ut labore et dolore magna aliqua
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="bot"></div>
</body>

快乐的科丁！！

相关问题
最新问题