滾動插入新元素動畫

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

做者：battleKing
倉庫：Github、CodePen
博客：CSDN、掘金
反饋郵箱：myh19970701@foxmail.com
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權

背景

滾動插入新元素動畫：當咱們滾動 滾動條 時，新的元素會以 左移、右移、淡出、淡入 等各類方式插入到文檔流中，若是再配合上 異步請求 和 懶加載 效果將十分的出色，因此不管是在我的開發的 小項目，仍是在 企業界 都有被普遍的使用。今天咱們就一塊兒來寫一個簡單的滾動插入新元素的動畫吧。

最終效果

1、添加 HTML 文件

1. 添加一層類名爲 <h1></h1> ，用於存放標題
2. 添加一層類名爲 box 的 <div>
3. box 裏面添加一層 <h2></h2>，用於存放新插入的元素

<h1>Scroll to see the animation</h1>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
<div class="box">
<h2>Content</h2>
</div>
複製代碼

2、添加 CSS 文件

先初始化頁面

1. 設置 * 爲 box-sizing: border-box
2. 設置 body 來使頁面爲 米黃色 且整個項目 居中對齊

* {
  box-sizing: border-box;
}
body {
    background-color: #efedd6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
複製代碼

主要的 CSS 代碼

h1 {
    margin: 10px;
}

.box {
    background-color: steelblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
    transform: translateX(400%);
    transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
    transform: translateX(-400%);
}

.box.show {
    transform: translateX(0);
}

.box h2 {
    font-size: 45px;
}
複製代碼

3、添加 JS 文件

主要邏輯

1. 經過 document.querySelectorAll('.box')，獲取所有類名爲 box 的節點
2. 經過 window.addEventListener('scroll', checkBoxes) 爲滾動條綁定 checkBoxes方法
3. 經過 checkBoxes()方法 實現滾動插入新元素效果

const boxes = document.querySelectorAll('.box')

window.addEventListener('scroll', checkBoxes)

checkBoxes()

function checkBoxes() {
    const triggerBottom = window.innerHeight / 5 * 4

    boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top

        if (boxTop < triggerBottom) {
            box.classList.add('show')
        } else {
            box.classList.remove('show')
        }
    })
}
複製代碼

❤️ 感謝你們

若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」 給更多朋友。