视觉差滑动

最新推荐文章于 2022-03-31 18:24:49 发布

独鹿DT

最新推荐文章于 2022-03-31 18:24:49 发布

阅读量849

点赞数 5

分类专栏：网页小Demo 文章标签： css html 前端 css动效

本文链接：https://blog.csdn.net/weixin_47529373/article/details/115984055

版权

网页小Demo 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

视觉差滑动

效果展示

点击在线体验
图示：
Github地址
在这里插入图片描述

点击在线体验

代码

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视觉差滑动</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <header>
        <div id="logo">logo</div>
        <ul>
            <li class="active">主页</li>
            <li>文章</li>
            <li>关与</li>
            <li>我的</li>
        </ul>
    </header>
    <section>
        <img src="./images/stars.png" alt="" class="stars">
        <img src="./images/moon.png" alt="" class="moon">
        <div class="desc">HELLO WORD!</div>
        <a href="#title" class="btn">进入博客</a>
        <img src="./images/mountains_behind.png" alt="" class="mountains_behind">
        <img src="./images/mountains_front.png" alt="" class="mountains_front">
    </section>
    <script>
        const stars = document.querySelector('.stars');
        const moon = document.querySelector('.moon');
        const desc = document.querySelector('.desc');
        const btn = document.querySelector('.btn');
        const mountains_behind = document.querySelector('.mountains_behind');
        const mountains_front = document.querySelector('.mountains_front');
        window.addEventListener('scroll', function() {
            let value = window.scrollY;
            stars.style.left = value * 0.25 + 'px';
            moon.style.top = value * 1.05 + 'px';
            mountains_behind.style.top = value * 0.5 + 'px';
            desc.style.marginTop = value * 1.5 + "px";
            desc.style.marginRight = value * 2.5 + "px";
            btn.style.marginTop = value * 1.5 + "px";
        })
    </script>
    <div class="text" id="title">
        <h2>《You Have Only One Life》</h2>
        <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one
            chance to do all the things you want to do.<br/><br/> May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you
            feel that it hurts you,it probably hurts the other person, too.<br/><br/> The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those
            who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people.<br/><br/>who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will
            always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.When you were born,you were crying and everyone around you was smiling.Live your life so that when you die,you're the one
            who is smiling and everyone around you is crying.<br/><br/>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to
            those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on
            the opportunity to brighten someone’s day with this message.<br><br>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want
            to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.<br/><br/> May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough
            hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.<br/><br/>May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep
            you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.<br/><br/>
    </p>
    </div>
</body>

</html>

css代码

* {
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    background: linear-gradient(#2b1055, #7597de);
    scroll-behavior: smooth;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 20px 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

header #logo {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li {
    font-weight: 600;
    margin-left: 15px;
    transition: all .5s linear;
    padding: 5px 15px;
    border-radius: 20px;
}

header ul li:hover {
    background: #fff;
    color: #2b1055;
}

header ul li.active {
    background: #fff;
    color: #2b1055;
}

section {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

section .desc {
    position: absolute;
    z-index: 5;
    font-size: 70px;
    font-weight: 700;
    right: -350px;
    white-space: nowrap;
}

section .btn {
    position: absolute;
    z-index: 5;
    padding: 10px 20px;
    font-weight: 600;
    transform: translateY(80px);
    background-color: #fff;
    border-radius: 30px;
    text-decoration: none;
}

section::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #1c0522, transparent);
    z-index: 7;
}

section img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    pointer-events: none;
}

.stars {
    z-index: 1;
}

.moon {
    z-index: 2;
    mix-blend-mode: screen;
}

.mountains_behind {
    z-index: 4;
}

.mountains_front {
    z-index: 5;
}

.text {
    color: #fff;
    padding: 20px 150px;
    background-color: #1c0522;
}

.text h2 {
    font-size: 30px;
    font-weight: 600;
}

独鹿DT

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
视觉差滑动

视觉差滑动效果展示代码html代码css代码效果展示点击在线体验图示：点击在线体验代码html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫

专栏目录