Как установить все элементы влево с прокруткой окна вниз? - PullRequest
Новая
       48

Как установить все элементы влево с прокруткой окна вниз?

0 голосов
/ 05 августа 2020 

.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>

Начальная позиция (Это будет начальная позиция элементов)

enter image description here

Final position ( What i require when window scroll down)

введите описание изображения здесь

Мне нужна анимация при прокрутке окна вниз. Если окно прокручивается вниз, элемент будет медленно сдвигаться влево, а когда окно будет больше прокручиваться вниз, элементы будут более медленно перемещаться влево. Когда этот раздел будет полностью отображен на экране, отобразится Конечная позиция .

Ответы [ 2 ]

0 голосов
/ 17 августа 2020 

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 голосов
/ 10 августа 2020

вы можете сделать что-то вроде этого:

Используйте относительное положение и центрируйте их прямо в 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)
    );
}
...