如何将窗口向下滚动时所有元素设置到左侧？

问题描述 投票：0回答：3

.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 &amp; 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>

初始位置（这将是元素的初始位置）

最终位置（窗口向下滚动时我需要什么）

我想要窗口向下滚动时的动画。如果窗口向下滚动元素将缓慢向左移动，并且当窗口向下滚动越多，元素将越向左侧缓慢移动。当此部分填满屏幕时，动画将完成并且最终位置将出现。

html jquery css jquery-animate css-animations
3个回答
1
投票

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 &amp; 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>

0
投票

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>

-6
投票

你可以这样做：

使用相对位置并将它们在 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)
    );
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.