摘要：在這個系列里分享一些簡單，但是很有意思的交互效果附上地址和地址滾動，添加對應(yīng)加載的比如巧用實現(xiàn)文字和遮罩層的動畫效果文字動畫遮罩層動畫首先然后把且，這樣就實現(xiàn)了遮罩層的進(jìn)場和退出效果隨機(jī)獲取數(shù)組項

在這個系列里分享一些簡單，但是很有意思的交互效果~
附上demo地址和github地址

滾動，添加對應(yīng)加載的class(比如loaded)

巧用animation實現(xiàn)文字和遮罩層的動畫效果

文字動畫: opacity 0 -> 1;

遮罩層動畫: 首先width 0 -> 100%,然后把width 100% -> 0且left 0 -> 100%，這樣就實現(xiàn)了遮罩層的進(jìn)場和退出效果;

html:

    

        

            
SANDWICHES & PANCAKE
            
GARDEN
            
MORNING & TOMORROW & FRIEND
            

                ORANGE & BIRD & SHEEP & CUP & BUS
            
APPLE & FRUIT & CAR
            
CAKE & PICTURE & CAT & STAMP
            

                PLANE & BOOK & RACKET & GLASS & BED
        
        

            
APPLE
BANANA & PINE APPLE & SHEEP
            
BANANA & PINE APPLE
        
        

            
PUMPKIN & TARO & CARROT
        
        

            
HORSERADISH & LETTUCE
            
PUMPKIN & TARO & CARROT
            
HORSERADISH & LETTUCE
            
POTATO & BURDOCK
        
        

            

                EGG & BAG & ROSE & CHAIR & BAT
            

                FISH & NOTEBOOK & PENCIL & DOG & DESK
            
WATCH & MITT & MILK & FLOWER
            
DOOR & BOAT & PIANO & 
        
        

            
POTATO & BURDOCK
            
APPLE
BANANA & PINE APPLE
            
LETTER
CAP & TAPE & MAIL & BOX
        
        

            
APPLE
BANANA & PINE APPLE
            
TURNIP & OKRA & PEA
        
        

            
SHIITAKE & BEEFSTEAK PLANT
        
    

css:

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
}

main {
    padding: 10vw 0;
}

ul {
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
}

li {
    margin: 10vw 0;
    text-align: left;
}

p {
    display: block;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-size: 2vw;
    font-weight: 900;
    line-height: 1.2;
}

p+p {
    margin-top: 10px;
}

li:first-child {
    margin-top: 0;
}

li:last-child {
    margin-bottom: 0;
}

li:nth-child(even) {
    text-align: right;
}

a {
    color: #fff;
}

a:hover {
    text-decoration: none;
}

[data-reveal="content"] {
    display: inline-block;
    position: relative;
}

[data-reveal="cover"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: 1;
}

[data-reveal="text"] {
    opacity: 0;
}

@keyframes reveal-cover {
    0% {
        width: 0;
        left: 0;
    }

    44% {
        width: 100%;
        left: 0;
    }

    54% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes reveal-text {
    0% {
        opacity: 0;
    }

    44% {
        opacity: 0;
    }

    54% {
        opacity: 1;
    }
}

[data-js="reveal"].loaded [data-reveal="cover"] {
    animation: reveal-cover 1.5s ease-in-out;
}

[data-js="reveal"].loaded [data-reveal="text"] {
    opacity: 1;
    animation: reveal-text 1.5s ease-in-out;
}

javascript:

const COLOR_LIST = ["#7f00ff", "#ff00ff", "#0000ff", "#007fff", "#00ffff"];
let $targetList;

const init = () => {

    $targetList = document.querySelectorAll("[data-js="reveal"]");

    setup();

    window.addEventListener("scroll", onScroll, false);
    window.dispatchEvent(new Event("scroll"));
}

// 隨機(jī)獲取數(shù)組項
const getArrayRandomValue = (array) => array[Math.floor(Math.random() * array.length)];

const setup = () => {
    for (const $target of $targetList) {
        const content = $target.innerHTML;
        const color = "revealColor" in $target.dataset ? $target.dataset.revealColor : getArrayRandomValue(COLOR_LIST);
        $target.innerHTML = `
${content}`;
    }
}

const onScroll = () => {
    const windowH = window.innerHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const isMostScroll = document.body.clientHeight <= scrollTop + windowH;

    for (const $target of $targetList) {

        if ($target.classList.contains("loaded")) continue;

        const rect = $target.getBoundingClientRect();
        const top = rect.top + scrollTop;
        if (isMostScroll || top <= scrollTop + (windowH * .8)) $target.classList.add("loaded");

    }

}
document.addEventListener("DOMContentLoaded", init, false);