准确重现这种效果的最佳方法是什么?
https://www.youtube.com/embed/Q9_hg7osQ9w
到目前为止,我能够移动顶线,但我发现将其与底线和渐变动画结合起来非常困难(如果不是不可能的话)。
这是我到目前为止想出的:
var window_width = $(window).width() - $('.top-line').width();
var document_height = $(document).height() - $(window).height();
$(function () {
$(window).scroll(function () {
var scroll_position = $(window).scrollTop();
var object_position_right = window_width * (scroll_position / document_height);
$('.top-line').css({
'right': object_position_right
});
});
});
你是在正确的轨道上,但我用类似视频中显示的动画制作了一支快速笔:https : //codepen.io/adamk22/pen/vVrLYz
JS:
var topTitle = $('.top-title'),
bottomTitle = $('.bottom-title');
var fadeStart = 10,
fadeUntil = 200,
moveSpeed = 2; // Higher = slower
$(window).scroll(function(e) {
var scrollTop = $(window).scrollTop(),
opacity = 0,
topTitlePos = scrollTop / moveSpeed + 'px',
bottomTitlePos = scrollTop / moveSpeed + 'px';
if (scrollTop <= fadeStart ) {
opacity = 1;
} else if ( scrollTop <= fadeUntil ) {
opacity = 1 - scrollTop / fadeUntil;
}
topTitle.css({'transform': 'translateX(' + topTitlePos + ')', 'opacity': opacity});
bottomTitle.css({'transform': 'translateX(-' + bottomTitlePos + ')', 'opacity': opacity});
});
显然,根据用例,可能有更好的书写方式,但希望这支笔至少可以帮助您了解它的作用以及它为什么起作用。
此外,在使用 js/jquery 为元素设置动画时,由于性能问题,尽量避免使用left
、right
、top
等属性bottom
。使用transform
替代,如transform: translateX(100px);
。查看这篇文章了解详情:https : //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句