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>

在线演示

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