jQuery - Trang Pilling
pagePiling.js là một trình cắm thêm jQuery để 'xếp chồng' các phần bố cục của bạn lên nhau và truy cập chúng bằng cách cuộn.
Một ví dụ về chủ đề đơn giản như được hiển thị bên dưới -
<!DOCTYPE html>
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" type = "text/css"
href = "https://fonts.googleapis.com/css?family=Lato:300,400,700" />
<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/pagepilling/jquery.pagepiling.css" />
<link rel = "stylesheet" type = "text/css"
href = "/jquery/src/pagepilling/examples.css" />
<script
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type = "text/javascript"
src = "/jquery/src/pagepilling/jquery.pagepiling.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function(){
//playing the video
$('video').get(0).play();
}
});
});
</script>
<style>
.section {
text-align:center;
}
#myVideo {
position: absolute;
z-index: 4;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
}
#section1 .layer {
position: absolute;
z-index: 5;
width: 100%;
left: 0;
top: 43%;
height: 100%;
}
#section1 h1 {
color:#fff;
}
#infoMenu li a {
color: #fff;
}
</style>
</head>
<body>
<ul id = "menu">
<li data-menuanchor = "page1" class = "active">
<a href = "#page1">Page 1</a></li>
<li data-menuanchor = "page2"><a href = "#page2">
Page 2</a></li>
<li data-menuanchor = "page3"><a href = "#page3">
Page 3</a></li>
</ul>
<div id = "pagepiling">
<div class = "section" id = "section1">
<video autoplay loop muted id = "myVideo">
<source src = "imgs/flowers.mp4" type = "video/mp4">
<source src = "imgs/flowers.webm" type = "video/webm">
</video>
</div>
<div class = "section" id = "section2">
<div class = "intro">
<h1>No limits</h1>
<p>Anything is possible with Tutorialspoint</p>
</div>
</div>
<div class = "section" id = "section4">
<div class = "intro">
<h1></h1>
<p>Simple Easy Learning</p>
</div>
</div>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau: