360滾滾屏
點擊不一樣按鈕進行切換頁面css
HTMLjquery
<head>
<meta charset="utf-8">
<title>360瀏覽器</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.fullPage.min.css">
<link rel="stylesheet" href="css/00.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/00.js"></script>
</head>
<div id="container">
<div class="section home1">
<div class="containerIn">
<div class="logo"></div>
<p class="logoFont">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<div class="logoBottomFont"></div>
</div>
</div>
<div class="section home2">
<img src="images/p2-left.png" class="p2Left" />
<img src="images/p2-right.png" class="p2Right" />
</div>
<div class="section home3">
<div class="containerIn">
<div class="home3Title"></div>
<div class="home3Box"></div>
</div>
</div>
<div class="section home4">
<div class="containerIn">
<div class="logo"></div>
</div>
</div>
</div>
<!-- 側邊欄 -->
<ul class="navList">
<li class="current"><a href="#page1"></a></li>
<li><a href="#page2"></a></li>
<li><a href="#page3"></a></li>
<li><a href="#page4"></a></li>
</ul>
CSS
/* 側邊欄開始 */
.navList{
position: fixed;
right: 10px;
top: 50%;
width: 22px;
background: url('../images/center.png');
transform: translateY(-50%);
}
.navList:before,.navList:after{
content:"";
width: 22px;
height: 20px;
position: absolute;
left: 0;
top: -20px;
background: url('../images/top.png');
}
.navList:after{
top: auto;
bottom: -20px;
background: url('../images/bottom.png');
}
.navList li{
width: 22px;
height: 16px;
background: url('../images/sprite.png') no-repeat -37px -131px;
margin-bottom: 10px;
}
.navList li a{
display: block;
width: 100%;
height: 100%;
}
.navList li:nth-last-child(1){
margin-bottom: 0;
}
.navList li.current{
background-position: -37px -110px;
}
/* 側邊欄結束 */
/* 首屏樣式開始 */
.section{
position: relative;
overflow: hidden;
}
.containerIn{
position: absolute;
width: 100%;
height: 480px;
left: 0;
top: 50%;
transform: translateY(-55%);
}
.logo{
width: 247px;
height: 185px;
background: url(../images/p1.png) -256px 0;
margin: 0 auto;
}
.logoFont{
width: 100%;
height: 90px;
text-align: center;
margin: 60px 0;
}
.home1.current .logoFont span{
opacity: 1;
margin: 0;
}
.logoFont span{
transition: all 1s linear;
opacity: 0;
margin: 0 30px;
display: inline-block;
width: 92px;
height: 90px;
background: url(../images/p1.png);
}
.logoFont span:nth-child(1){
background-position: -7px -208px;
width: 63px;
}
.logoFont span:nth-child(2){
background-position: -76px -205px;
}
.logoFont span:nth-child(3){
background-position: -181px -207px;
}
.logoFont span:nth-child(4){
background-position: -277px -204px;
}
.logoFont span:nth-child(5){
background-position: -375px -205px;
}
.logoFont span:nth-child(6){
background-position: -481px -207px;
}
.logoFont span:nth-child(7){
background-position: -576px -205px;
}
.logoFont span:nth-child(8){
background-position: -677px -204px;
}
.section.current .logoBottomFont{
opacity: 1;
transform: rotate(360deg);
}
.logoBottomFont{
transition: all 1s linear;
transform: rotate(0);
opacity: 0;
width: 772px;
height: 49px;
margin: 0 auto;
background: url(../images/p1.png) 0 -345px;
}
/* 首屏樣式結束 */
/* 第2屏開始 */
.home2.current .p2Left{
transform: translate(-130%,-50%);
opacity: 1;
}
.home2.current .p2Right{
transform: translate(-10%,-50%);
opacity: 1;
}
.p2Left,.p2Right{
opacity: 0;
transition: all 1s linear;
}
.p2Left{
width: 428px;
height: 498px;
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-130%,-50%); */
transform: translate(-300%,-50%);
}
.p2Right{
width: 635px;
height: 309px;
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-10%,-50%); */
transform: translate(150%,-50%);
}
/* 第2屏結束 */
/* 第3屏開始 */
.home3.current .home3Title,.home3.current .home3Box{
transform: translateX(-50%) scale(1) rotate(720deg);
opacity: 1;
}
.home3Title,.home3Box{
transition: all 1s linear;
opacity: 0;
}
.home3Title{
width: 1077px;
height: 133px;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(3) rotate(0);
top: 0;
background: url(../images/p3.png);
}
.home3Box{
width: 1100px;
height: 575px;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(3) rotate(0);
bottom: -203px;;
background: url(../images/p3.png) center bottom;
}
/* 第3屏結束 */
/* 第4屏 */
.home4.current .logo{
animation: flash 1s linear 2;
}
@keyframes flash{
0%{
opacity: 1;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75%{
opacity: 0;
}
100%{
opacity: 1;
}
}
JS
//頁面加載完畢後，讓第一屏進場
window.onload=function(){
$('.section').eq(0).addClass('current');
}
$(function() {
var $aLi=$('.navList li');
var $aSection=$('.section');
$('#container').fullpage({
'sectionsColor':['#119AC7','#2DAB5F','#19AD93','#119AC7'],
'scrollingSpeed':1000,
'easingcss3':'ease',
'continuousVertical':true,
'navigation':false,
'anchors':['page1','page2','page3','page4'],
'onLeave':function(index,nextIndex,direction){
//滾動前會觸發的函數，
//index是離開頁面的序號【從1開始】，
//nextIndex是即將去往的頁面的序號，
//direction返回’up’或者’down’用來判斷滾屏方向。
$aLi.eq(index-1).removeClass('current');
$aLi.eq(nextIndex-1).addClass('current');
//移除離開的頁面的進場
$aSection.eq(index-1).removeClass('current');
//給即將去往的頁面添加進場
$aSection.eq(nextIndex-1).addClass('current');
}
});
});
相關文章
- 1. 滾動截屏
- 2. 分屏滾動
- 3. 滾屏文字
- 4. tmux的滾屏
- 5. tmux 滾屏
- 6. jquery.fullpage 全屏滾動
- 7. swiper單屏滾動
- 8. 全屏滾動-fullPage
- 9. chrome滾動截屏
- 10. 前端 整屏滾動
- 更多相關文章...
- • jQuery Mobile 滾屏事件 - jQuery Mobile 教程
- • ionic 滾動條 - ionic 教程
- • 常用的分佈式事務解決方案
- • NewSQL-TiDB相關
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 滾動截屏
- 2. 分屏滾動
- 3. 滾屏文字
- 4. tmux的滾屏
- 5. tmux 滾屏
- 6. jquery.fullpage 全屏滾動
- 7. swiper單屏滾動
- 8. 全屏滾動-fullPage
- 9. chrome滾動截屏
- 10. 前端 整屏滾動