javascript - 如何在滚动时开始动画然后在 5 秒后延迟然后在向后滚动时重新开始?
问题描述
我写了这个时间线,当用户滚动到屏幕中间然后显示动画,但每次条件为真时它都会重复,所以我如何设置它第一次显示动画然后延迟 5s 然后如果条件为真它显示又是动画?(https://codepen.io/kuro-1996/pen/povRbzJ)
$(document).ready(function() {
var time = $(".item__time");
var content = $(".item__content");
解决方案
用 value 声明一个全局变量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>
快乐的编码!
推荐阅读
- nlp - 使用 pandas 数据框将自定义标签分配给 spacy
- stripe-payments - 条纹支付自定义样式
- react-native - 在 React Native 中浮动到 Int
- python - os.environ.get 返回无,但回显工作正常
- python-3.x - Scrapy yield does not display any results
- javascript - 如果同一组件有许多路由,history.push 和 Link 会更改 URL,并且不会重新呈现组件
- javascript - TypeError:回调不是函数,“node_modules\jsonwebtoken\sign.js:101:14)”
- c - 在while条件本身内部实现一个打破while的if条件
- c# - CNGKey.Create 不会持续存在
- python - 将代码包装到 Python 中不同类的方法中