HTML CSS JS 制作平滑滚动和真正的视差效果使用cid1143

 <!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Scroller Plugin Demo</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<style>
    
    
* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #ecf0f1;
    font-family: 'Poppins', sans-serif;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
    padding: 10px 15px;
}

nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 19px;
    padding: 15px 20px;
    border-radius: 8px;
}

nav a:hover {
    background-color: #ecf0f1;
    color: #2c3e50;
}

nav a.active {
    background:yellow;
    color: black;
}

#main-menu {
    position: fixed;
    text-align: center;
    margin-left: 35px;
}

#section1 {
    background-image: url(https://code.5g-o.com/wp-content/uploads/2020/09/7.jpg);
    background-size: cover;
    height: 100vh;
    background-position: center;
     
    
}

#section2 {
    background-image: url(https://code.5g-o.com/wp-content/uploads/2020/10/n6.jpg);
    background-size: cover;
     background-attachment: fixed;
    background-position: center;
     
}

#section3 {
     background-image: url(https://code.5g-o.com/wp-content/uploads/2020/10/call_of_duty_ww2_3-wallpaper-1366x768.jpg);
    background-size: cover;
    height: 100vh;
    background-position: center;
     
}

#section4 {
    background-image: url(https://code.5g-o.com/wp-content/uploads/2020/12/n.jpg);
    background-attachment: fixed;
}

#section5 {
    background-image: url(https://code.5g-o.com/wp-content/uploads/2021/01/one.png);
    background-size: cover;
}

section {
    width: 100%;
    margin: 0;
    padding: 100px;
}   
    
    p{
        width: 40%;
    }
    
    h1{
        font-weight: 400;
        font-size: 30px;
    }
</style>
</head>
<body>
<nav id="main-menu">
  <ul>
    <li> <a class="obss-scroller" href="#section1">Home</a> </li>
    <li> <a class="obss-scroller" href="#section2">About us</a> </li>
    <li> <a class="obss-scroller" href="#section3">Testimonails</a> </li>
    <li> <a class="obss-scroller" href="#section4">Our Teams</a> </li>
    <li> <a class="obss-scroller" href="#section5">Contact</a> </li>
  </ul>
</nav>
<section id="section1"> 
<h1>Smooth Scroll with Parallax</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam perspiciatis ratione iusto autem, facere aspernatur eos eligendi illo voluptate itaque perferendis harum debitis rem earum. Recusandae, consequuntur repellendus mollitia maxime excepturi, deleniti autem, incidunt pariatur perspiciatis numquam, quidem praesentium at.
</p>

</section>
<section id="section2">

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur corporis odit recusandae, officia quis! Rem sapiente, veritatis deserunt amet esse reiciendis dolorum enim, in, repellat magnam consequatur itaque facere. 
    </p>
 
 </section>
<section id="section3">   
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam perspiciatis ratione iusto autem, facere aspernatur eos eligendi illo voluptate itaque perferendis harum debitis rem earum. Recusandae, consequuntur repellendus mollitia maxime excepturi, deleniti autem, incidunt pariatur perspiciatis numquam, quidem praesentium at.
</p>


</section>
<section id="section4">
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam perspiciatis ratione iusto autem, facere aspernatur eos eligendi illo voluptate itaque perferendis harum debitis rem earum. Recusandae, consequuntur repellendus mollitia maxime excepturi, deleniti autem, incidunt pariatur perspiciatis numquam, quidem praesentium at.
</p>

 </section>
<section id="section5"> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam perspiciatis ratione iusto autem, facere aspernatur eos eligendi illo voluptate itaque perferendis harum debitis rem earum. Recusandae, consequuntur repellendus mollitia maxime excepturi, deleniti autem, incidunt pariatur perspiciatis numquam, quidem praesentium at.
</p>

 
   </section>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.5g-o.com/wp-content/uploads/2021/01/init-scroller.js"></script> 
<script>
    
$(document).ready(function(){

    $("section").height($(window).height());
    onWindowRezise();

    $(".obss-scroller").smoothScroller({
        duration: 1000,
        activeClass: "active"
    });
});

var onWindowRezise = function() {
    $(window).resize(function(evt){
        $("section").height($(window).height());
    });
}    
    
</script>
 
</body>
</html>

 在线演示


让链接同时具备两种打开方式

获取源码: HTML CSS JS 制作平滑滚动和真正的视差效果使用cid1143
下载数:321人次, 文件大小: 2.8 KB, 上传日期: 2021年-1 月-13日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,817 人查阅

类似文章