动画结束后添加小弹跳
Adding a small bounce after animation ends
https://www.ateliergymnase.com/
以这个网站为例,如果你向下滚动到团队成员部分并打开你的开发控制台,你会注意到即使你停止滚动,仍然会有一小段动画继续。
相比之下:https://codepen.io/DaveMoran/full/QBbVmM/ 使用 animejs,当用户停止滚动时动画停止,而不是更流畅的停止动画。
动画JS代码:
jQuery(document).ready(function($) {
// Window properties
let wHeight = window.innerHeight;
let wWidth = window.innerWidth;
$(window).resize(function () {
wHeight = window.innerHeight;
wWidth = window.innerWidth;
});
let container = $('#scroll-container');
let containerYOffset = Math.floor(container.offset().top - wHeight);
$(window).on('scroll', function() {
let currentPosition = $(window).scrollTop();
if(currentPosition >= containerYOffset) {
container.css('position', 'absolute');
container.css('bottom', '0');
container.css('top', 'unset');
}
container.css('position', 'fixed');
let xTranslateAmt = currentPosition - containerYOffset;
let scroll = anime({
targets: '#scroll-container',
translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
easing: 'linear',
elasticity: 400,
duration: 0,
})
})
})
有没有办法在滚动结束后添加一个小弹跳或触发一个迷你动画?
我不确定这是否是你想要的,因为你的问题对我来说不是很清楚。
但也许你可以通过添加 transition
来解决问题。 运行 下面的代码片段:
jQuery(document).ready(function($) {
// Window properties
let wHeight = window.innerHeight;
let wWidth = window.innerWidth;
$(window).resize(function() {
wHeight = window.innerHeight;
wWidth = window.innerWidth;
});
let container = $('#scroll-container');
let containerYOffset = Math.floor(container.offset().top - wHeight);
$(window).on('scroll', function() {
let currentPosition = $(window).scrollTop();
if (currentPosition >= containerYOffset) {
container.css('position', 'absolute');
container.css('bottom', '0');
container.css('top', 'unset');
}
container.css('position', 'fixed');
let xTranslateAmt = currentPosition - containerYOffset;
let scroll = anime({
targets: '#scroll-container',
translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
easing: 'linear',
elasticity: 400,
duration: 0,
})
})
})
body {
overflow-x: hidden;
}
.above-scroll,
.below-scroll {
width: 100vw;
background: #efefef;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
#scroll-content {
padding: 50px 30px;
height: calc(2300px + 100vh);
widtH: 100%;
position: relative;
overflow: hidden;
}
#scroll-container {
display: flex;
flex-direction: row;
height: 100vh;
left: 100vw;
width: 2300px;
justify-content: space-between;
align-items: center;
position: relative;
top: 0;
transition: .5s cubic-bezier(.59, .86, .96, 1.14)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="above-scroll">
<h2>Above Scroll</h2>
</div>
<div id="scroll-content">
<div id="scroll-container">
<img src="https://placehold.it/320x320" />
<img src="https://placehold.it/320x420" />
<img src="https://placehold.it/320x480" />
<img src="https://placehold.it/320x320" />
<img src="https://placehold.it/320x480" />
<img src="https://placehold.it/320x200" />
</div>
</div>
<div class="below-scroll">
<h2>Below Scroll</h2>
</div>
https://www.ateliergymnase.com/
以这个网站为例,如果你向下滚动到团队成员部分并打开你的开发控制台,你会注意到即使你停止滚动,仍然会有一小段动画继续。
相比之下:https://codepen.io/DaveMoran/full/QBbVmM/ 使用 animejs,当用户停止滚动时动画停止,而不是更流畅的停止动画。
动画JS代码:
jQuery(document).ready(function($) {
// Window properties
let wHeight = window.innerHeight;
let wWidth = window.innerWidth;
$(window).resize(function () {
wHeight = window.innerHeight;
wWidth = window.innerWidth;
});
let container = $('#scroll-container');
let containerYOffset = Math.floor(container.offset().top - wHeight);
$(window).on('scroll', function() {
let currentPosition = $(window).scrollTop();
if(currentPosition >= containerYOffset) {
container.css('position', 'absolute');
container.css('bottom', '0');
container.css('top', 'unset');
}
container.css('position', 'fixed');
let xTranslateAmt = currentPosition - containerYOffset;
let scroll = anime({
targets: '#scroll-container',
translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
easing: 'linear',
elasticity: 400,
duration: 0,
})
})
})
有没有办法在滚动结束后添加一个小弹跳或触发一个迷你动画?
我不确定这是否是你想要的,因为你的问题对我来说不是很清楚。
但也许你可以通过添加 transition
来解决问题。 运行 下面的代码片段:
jQuery(document).ready(function($) {
// Window properties
let wHeight = window.innerHeight;
let wWidth = window.innerWidth;
$(window).resize(function() {
wHeight = window.innerHeight;
wWidth = window.innerWidth;
});
let container = $('#scroll-container');
let containerYOffset = Math.floor(container.offset().top - wHeight);
$(window).on('scroll', function() {
let currentPosition = $(window).scrollTop();
if (currentPosition >= containerYOffset) {
container.css('position', 'absolute');
container.css('bottom', '0');
container.css('top', 'unset');
}
container.css('position', 'fixed');
let xTranslateAmt = currentPosition - containerYOffset;
let scroll = anime({
targets: '#scroll-container',
translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
easing: 'linear',
elasticity: 400,
duration: 0,
})
})
})
body {
overflow-x: hidden;
}
.above-scroll,
.below-scroll {
width: 100vw;
background: #efefef;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
#scroll-content {
padding: 50px 30px;
height: calc(2300px + 100vh);
widtH: 100%;
position: relative;
overflow: hidden;
}
#scroll-container {
display: flex;
flex-direction: row;
height: 100vh;
left: 100vw;
width: 2300px;
justify-content: space-between;
align-items: center;
position: relative;
top: 0;
transition: .5s cubic-bezier(.59, .86, .96, 1.14)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="above-scroll">
<h2>Above Scroll</h2>
</div>
<div id="scroll-content">
<div id="scroll-container">
<img src="https://placehold.it/320x320" />
<img src="https://placehold.it/320x420" />
<img src="https://placehold.it/320x480" />
<img src="https://placehold.it/320x320" />
<img src="https://placehold.it/320x480" />
<img src="https://placehold.it/320x200" />
</div>
</div>
<div class="below-scroll">
<h2>Below Scroll</h2>
</div>