This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

Scroll to insert the new element animation: when we scroll the scroll bar, the new element will be to shift to the left, right, fade, fade in various ways, such as flow is inserted into the document, if coupled with the asynchronous request and lazy loading effect is very good, so whether in the personal development of small projects, or in the corporate world has been widely used. Today we’re going to write a simple animation to scroll through and insert a new element.

The final result

1. Add HTML files

  1. Add a layer of class named<h1></h1>, to store the title
  2. Add a layer of class namedbox 的 <div>
  3. boxI’m going to add a layer inside<h2></h2>Is used to hold newly inserted elements
<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>
Copy the code

Add CSS files

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyTo make the pagebeigeAnd the whole projectAlign center
* {
  box-sizing: border-box;
}
body {
    background-color: #efedd6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
Copy the code

The main CSS code

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.4 s ease;
}

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

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

.box h2 {
    font-size: 45px;
}
Copy the code

Add JS file

The main logic

  1. throughdocument.querySelectorAll('.box')To get all class namesboxThe nodes of the
  2. throughwindow.addEventListener('scroll', checkBoxes)Bind for the scroll barCheckBoxes method
  3. throughCheckBoxes () methodTo achieve the effect of scrolling to insert new elements
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')}}}Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.