资讯专栏INFORMATION COLUMN

有趣的交互系列 - 文字遮罩入场效果

邹强 / 1818人阅读

摘要:在这个系列里分享一些简单,但是很有意思的交互效果附上地址和地址滚动,添加对应加载的比如巧用实现文字和遮罩层的动画效果文字动画遮罩层动画首先然后把且,这样就实现了遮罩层的进场和退出效果随机获取数组项

在这个系列里分享一些简单,但是很有意思的交互效果~
附上demo地址和github地址

滚动,添加对应加载的class(比如loaded)

巧用animation实现文字和遮罩层的动画效果

文字动画: opacity 0 -> 1;

遮罩层动画: 首先width 0 -> 100%,然后把width 100% -> 0left 0 -> 100%,这样就实现了遮罩层的进场和退出效果;

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"));
}

// 随机获取数组项
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);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53978.html

相关文章

  • 有趣交互系列 - 文字遮罩入场效果

    摘要:在这个系列里分享一些简单,但是很有意思的交互效果附上地址和地址滚动,添加对应加载的比如巧用实现文字和遮罩层的动画效果文字动画遮罩层动画首先然后把且,这样就实现了遮罩层的进场和退出效果随机获取数组项 在这个系列里分享一些简单,但是很有意思的交互效果~附上demo地址和github地址 showImg(https://makapicture.oss-cn-beijing.aliyuncs....

    tyheist 评论0 收藏0
  • 如何使用CSS和SVG剪切和遮罩技术

    摘要:通过结合使用和遮罩技术,你将会拥有更多的可能性去使用网络图像。在图像上应用遮罩元素为了使用得到一种感觉,我们将在图像上使用遮罩。浏览器支持在我们使用这种新的处理图像的方法之前,注意到浏览器对剪切和遮罩的支持不一致是非常重要的。 本文转载自:众成翻译译者:hidoos链接:http://www.zcfy.cc/article/1100原文:https://getflywheel.com/...

    hover_lew 评论0 收藏0
  • Codepen 每日精选(2018-4-19)

    摘要:按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 纯 css 写的创意灯泡动画https://codepen.io/uzcho_/ful... 纯 css 画的文字阴影https://codepen.io/GeorgePark... 纯 css 画的海报https://codepen.io/vic...

    CNZPH 评论0 收藏0
  • Codepen 每日精选(2018-4-19)

    摘要:按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 纯 css 写的创意灯泡动画https://codepen.io/uzcho_/ful... 纯 css 画的文字阴影https://codepen.io/GeorgePark... 纯 css 画的海报https://codepen.io/vic...

    yagami 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<