视差滚动网页编写代码

最新推荐文章于 2023-04-25 16:08:00 发布

结城明日奈是我老婆

最新推荐文章于 2023-04-25 16:08:00 发布

阅读量819

点赞数

分类专栏： html学习专栏文章标签： javascript html 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121288216

版权

html学习专栏专栏收录该内容

35 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>视差滚动网站学习</title>
        <link rel="stylesheet" href="ShiChaGunDongWangZhanCSS.css">
    </head>
    <body>
        <header id="header">
            <a href="#" class="logo">Jungle</a>
            
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Destination</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <section>
            <h2 id="text"><span>It's time for a new</span><br>Adventure</h2>
            <!--span:拼接；br:换行-->

            <!--图片动画html begin-->
            <img src="YSNTR.bmp" id="YSNTR" class="YSNTR_Css">
            <img src="YSN1.bmp" id="YSN1" class="YSN1_Css">
            <!-- <img src="YSNBack1_QD.png" id="YSNBack1_QD"> -->
            <img src="YSNBack_QD.jpg" id="YSNBack_QD" class="back_img">


            <!--图片动画html end-->
            
            <!-- <a href="#" id="btn">Explore</a> 出现在‘It's time for a new’和‘Adventure’中间-->
            <a href="#" id="btn">Explore</a>
        </section>
        <div class="sec">
            <h2>Parallax Scrolling Effects</h2>
            <p>内容太多随便搞搞:
                结城明日奈，日本轻小说《刀剑神域》及其衍生作品中的女主角。 [1-2]  因好奇借用哥哥结城浩一郎的NERvGear进入SAO的网络游戏新手，并用真名取游戏角色名字。卷入了死亡游戏后内心一直恐惧而感到害怕，一直想尽快突破100层回到现实世界，被攻略组称为顶级公会的攻略之鬼，因为和桐人不和而决斗，后开始注意起桐人，直到认识“活在”SAO里的桐谷和人后改变想法，也因此喜欢上桐谷和人并在游戏里结婚。 [3] 
死亡游戏SAO结束后被困在ALO世界树上的鸟笼中，被须乡伸之称为蒂塔妮亚（妖精女王），后在自己的努力以及桐人的救助下成功登出进入两年之久的虚拟世界。回到了现实世界，修养后进入SAO事件所创立的学校上学。并且在新生ALO中创建蓝色水精灵的角色，和桐人等好友开始攻略新艾恩葛朗特。 [2] 
2025年在GGO事件中一直支持桐人，帮助桐人寻找死枪下落。圣剑篇中成功和桐人夺取断钢圣剑-Excalibur。
后遇到绀野木棉季，知道她的身世，被绀野木棉季的精神所感染，成功化解了自己和桐人在一起的困难以及和母亲的关系。在UW篇中一直支持着桐人。是桐人的精神支柱。
            </p>
        </div>
    </body>
    <script>
        let text = document.getElementById('text');
        let YSNTR = document.getElementById('YSNTR');
        let YSN1 = document.getElementById('YSN1');
        let YSNBack_QD = document.getElementById('YSNBack_QD');
        let btn = document.getElementById('btn');
        let header = document.getElementById('header');
        //scroll:  当文档被滚动时发生的事件。
        window.addEventListener('scroll',function(){
            let value = window.scrollY;//系统捕获Y周的值

            //30 + :经过自己测试可以原地上移没有任何违和感
            //30：是它top一开始的默认值
            text.style.top = 30 + value * -0.5 + '%';
            YSNTR.style.top = 30 + value * 1.5 + 'px';
            YSN1.style.top = 300 + value * -1.5 + 'px';
            // YSN1.style.right = value * 2 + 'px';
            btn.style.marginTop = value * 1.5 + 'px';
        });
    </script>
</html>

css

/*@import url();*/
/*谷歌字体:http://www.googlefonts.cn/*/
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

body{
    overflow-x: hidden;
    background: #fff;
    min-height: 100vh;
}

#header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 100px;/*30px距离上方，100px距离左边*/
    display: flex;/*元素之间横向排布*/
    justify-content: space-between; /* 均匀排列每个元素
    首个元素放置于起点，末尾元素放置于终点 */
    align-items: center;/*元素位于容器的中心。*/
    z-index: 1000;
}

#header .logo{/*#header:id是header的元素 中的 logo元素 定义值*/
    color: #094b65;
    font-weight: 700;/*文字宽度*/
    font-size: 2em;/*文字大小*/
    text-decoration: none;/*这个元素的none代表取消超链接下划线*/
}

#header ul{/*#header:id是header的元素 中的 ul元素 定义值*/
    display: flex;/*元素之间横向排布*/
    justify-content: center;
    align-items: center;
}

#header ul li{/*#header:id是header的元素 中的 ul元素 中的 li元素 定义值*/
    list-style: none;/*这个元素的none取消前面点*/
    margin-left: 20px;/*外左间距为20px*/
}

#header ul li a{/*#header:id是header的元素 中的 ul元素 中的 li元素 中的 a 定义值*/
    text-decoration: none;/*这个元素的none代表取消超链接下划线*/
    padding: 6px 15px;
    color: #094b65;
}

/*圆弧*/
#header ul li a:hover, /*,:代表不只是#header ul li a:hover元素 还有 #header ul li a .active 元素*/
#header ul li a .active{/*hover:鼠标移动到上面的值*/
    background: #094b65;
    color: #fff;
    border-radius: 20px;/*左右距离20px的是圆弧状*/
}

section{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section #text{
    position: absolute;
    color: #094b65;
    font-size: 10vw;
    text-align: center;/*文本居中*/
    line-height: 0.55em;
    font-family: 'Rancho', cursive;/*使用字体*/
    transform: translateY(-50%);

    z-index: 5000;
}

section #text span{
    font-size: 0.20em;
    letter-spacing: 2px;/*文字之间的距离为2像素(px)*/
    font-weight: 400;/*文字粗细*/
    font-family: 'Poppins', sans-serif;
}

#btn{
    text-decoration: none;
    display: inline-block;
    padding: 8px 30px;
    background: #f88;
    color: #094b65;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 2px;
    border-radius: 40px;
    transform: translateY(100px);
}

.sec{
    position: relative;
    padding: 100px;
    background: #094b65;
}

.sec h2{
    font-size: 3.5em;
    color: #fff;
    margin-bottom: 10px;
}

.sec p{
    font-size: 1em;
    color: #fff;
}

/*图片动态效果CSS begin*/
section .back_img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    /*object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
    object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
    您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
    
    cover:	保持原有尺寸比例。但部分内容可能被剪切。*/

    pointer-events: none;/*pointer-events 属性定义元素是否对指针事件做出反应。
    这个属性的none:元素不对指针事件做出反应。*/
}
section::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top,#f00,transparent);
    z-index: 10;
}

section .YSNTR_Css{
    position: absolute;
    left: 10px;
    top: 100px;
}

section .YSN1_Css{
    position: absolute;
    right: 10px;
    top: 300px;
}
/*图片动态效果CSS end*/

css只是布局，html提供了元素,实现的关键还是用js让css动起来:
javascript

let text = document.getElementById('text');
        let YSNTR = document.getElementById('YSNTR');
        let YSN1 = document.getElementById('YSN1');
        let YSNBack_QD = document.getElementById('YSNBack_QD');
        let btn = document.getElementById('btn');
        let header = document.getElementById('header');
        //scroll:  当文档被滚动时发生的事件。
        window.addEventListener('scroll',function(){
            let value = window.scrollY;//系统捕获Y周的值

            //30 + :经过自己测试可以原地上移没有任何违和感
            //30：是它top一开始的默认值
            text.style.top = 30 + value * -0.5 + '%';
            YSNTR.style.top = 30 + value * 1.5 + 'px';
            YSN1.style.top = 300 + value * -1.5 + 'px';
            // YSN1.style.right = value * 2 + 'px';
            btn.style.marginTop = value * 1.5 + 'px';

我这里留了个错误，若是直接复制的小伙伴，得把css里的section元素中的min-height改成height元素

结城明日奈是我老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
视差滚动网页编写代码

html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>视差滚动网站学习</title> <link rel="stylesheet" href="ShiChaGunDongWangZhanCSS.css"> </head> <body>
复制链接

扫一扫