原生JS实现下滑到当前模块时左右滑动到位

凉风听雪

已于 2024-08-26 15:44:07 修改

阅读量325

点赞数 8

CC 4.0 BY-SA版权

分类专栏： CSS炫酷使用文章标签： javascript 前端 css

于 2024-08-26 15:39:30 首次发布

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/141565717

效果图：

源码：

<div style="height: 1500px;"></div>

<div class="software-box">
    <div class="software-container" style="display: flex;">
        <div class="software-left" style="background-color: pink;width: 50%;height: 200px;">

        </div>
        <div class="software-right" style="background-color: skyblue;width: 50%;height: 200px;">

        </div>
    </div>
</div>
<style>
    /* donghua */
    .software-left,
    .software-right {
        opacity: 0;
        transform: translateX(-100%);
        /* 左边的模块初始位置在屏幕左侧外 */
        transition: transform 1s ease, opacity 1s ease;
    }

    .software-right {
        transform: translateX(100%);
        /* 右边的模块初始位置在屏幕右侧外 */