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
下载数:302人次, 文件大小: 2.8 KB, 上传日期: 2021年-1月-13日

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

qrcode_for_gh_6ea2c28a1709_258 (1)

3,386 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付

类似文章