.be-ready-list {margin: 0px -24px;}
.be-ready-section{background-color:#eeeff3;padding:80px 0px 24px;}
.be-ready-section.complete-be-ready{background-color:#222222;}
.be-ready-list ul li{color:#FFFFFF;font-family:Poppins;font-size:32px;font-weight:500;letter-spacing:1.6px;line-height:24px;margin-bottom:32px;text-transform:uppercase;}
.be-ready-list ul li span {display: inline-block;vertical-align: top;padding: 16px 24px; background-color: #222222;}
.be-ready-list ul li:last-child{margin-bottom:0px;}
.we-are-hire{background-color:#222222;color:#ffffff;font-size:24px;font-weight:300;padding:40px 0px 96px;}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<ul>
<li><span>Be ready for change</span></li>
<li><span>Set goals at home & work</span></li>
<li><span>Realize your unique value</span></li>
<li><span>Tame uncertainity</span></li>
<li><span>Lead with confidence</span></li>
<li><span>Addapt your business</span></li>
</ul>
</div>
</div>
</section>
</body>
</html>
初始位置(这将是元素的初始位置)
最终位置(窗口向下滚动时我需要什么)
我想要窗口向下滚动时的动画。如果窗口向下滚动元素将缓慢向左移动,并且当窗口向下滚动越多,元素将越向左侧缓慢移动。当此部分填满屏幕时,动画将完成并且最终位置将出现。
const ul = document.getElementById("list-group");
const items = ul.getElementsByTagName("li");
init();
function init() {
for (var i = 0; i < items.length; ++i) {
animate(i, 100 * i);
}
}
window.addEventListener(
"scroll",
() => {
const size = window.pageYOffset;
if (window.pageYOffset) {
const i = parseInt(size / 75);
if (i === 0) init();
animate(i, 0);
}
},
false
);
function animate(index, margin) {
items[index].style.marginLeft = margin + 'px';
items[index].style.transition = '1s';
items[index].style.left = '0';
}
.be-ready-list {
margin: 250px 0;
}
.be-ready-section {
background-color: #eeeff3;
padding: 80px 0px 24px;
}
.be-ready-section.complete-be-ready {
background-color: #222222;
}
.be-ready-list ul li {
color: #FFFFFF;
font-family: Poppins;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 32px;
transition: 1s;
left: 0;
}
.be-ready-list ul li span {
display: inline-block;
vertical-align: top;
padding: 16px 24px;
background-color: #222222;
}
.be-ready-list ul li:last-child {
margin-bottom: 0px;
}
.we-are-hire {
background-color: #222222;
color: #ffffff;
font-size: 24px;
font-weight: 300;
padding: 40px 0px 96px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation example</title>
</head>
<body>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<ul id="list-group">
<li><span>Be ready for change</span></li>
<li><span>Set goals at home & work</span></li>
<li><span>Realize your unique value</span></li>
<li><span>Tame uncertainity</span></li>
<li><span>Lead with confidence</span></li>
<li><span>Addapt your business</span></li>
</ul>
</div>
</div>
</section>
</body>
</html>
function isScrolledIntoView(el) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elTop = $(el).offset().top;
var elBottom = elTop + $(el).height();
return (((elTop >= docViewTop) && (elTop <= docViewBottom)) || ((elBottom >= docViewTop) && (elBottom <= docViewBottom)));
}
function onScrollRezizeLoad() {
document.querySelectorAll('.be-ready-list div').forEach(el => {
if (isScrolledIntoView(el) && !el.classList.contains('on-left')) {
el.classList.add('on-left');
el.classList.add('skewed');
setTimeout(() => el.classList.remove('skewed'), 670);
}
});
}
onload = onScrollRezizeLoad;
onresize = onScrollRezizeLoad;
onscroll = onScrollRezizeLoad;
body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
section.be-ready-section {
margin: -8px 0px 0px 0px;
padding: 8px;
width: 100vw;
background-color: #eeeff3;
}
.be-ready-list div {
background-color: #222222;
width: calc(100vw - 52px);
color: white;
font-size: 50px;
height: 300px;
/*remove this later just for demo purposes*/
font-weight: 300;
padding: 9px;
margin: 8px;
margin-left: calc(100vw - 150px);
transition: 1s, transform 0.67s;
}
div.on-left {
margin-left: 8px;
}
.skewed {
transform: skew(6deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<div>Thing number 1</div>
<div>Thing number 2</div>
<div>Thing number 3</div>
<div>Thing number 4</div>
<div>Thing number 5</div>
<div>Thing number 6</div>
</div>
</div>
</section>
你可以这样做:
使用相对位置并将它们在 div 中居中。 并使用这个的修改版本:
let elements = [
document.getElementById("e1"),
document.getElementById("e2"),
document.getElementById("e3")
]
// f(x) = mx
// (element.y;0) (element.y+viewport.height;viewport.width)
let ms = []
for (let i = 0; i < elements.length; i++) {
ms.push((document.documentElement.clientWidth) / (document.documentElement.clientHeight));
}
window.addEventListener('scroll', function (e) {
for (let i = 0; i < elements.length; i++) {
if (isInViewport(elements[i])) { //check that the element is on the screen
let y = elements[i].getBoundingClientRect().y;
elements[i].style.right = ms[i] * (y - document.body.scrollTop) +"px";
}
}
});
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}