今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧
First page
Second page
Third page
Fourth page
今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧
css代码：
<div class="jb51code">
<pre class="brush:css;">
,:before,*:after
{
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
margin: 0;
padding: 0;
}
.inner,.nav-panel ul .nav-btn:after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
}
html,body
{
width: 100%;
height: 100%;
overflow: hidden;
}
@media (max-width: 767px)
{
body
{
font-size: 70%;
}
}
.wrapper
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-webkit-perspective: 3000;
perspective: 3000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper .page
{
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateX(180deg) scale(0.3);
transform: rotateX(180deg) scale(0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
will-change: transform;
}
.wrapper .page h2
{
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
}
.wrapper .page.page1
{
background-color: #66a6b8;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,#66a6b8),color-stop(80%,#5471B9));
background-image: -webkit-linear-gradient(-280deg,#66a6b8 20%,#5471B9 80%);
background-image: -webkit-linear-gradient(80deg,#5471B9 80%);
background-image: linear-gradient(10deg,#5471B9 80%);
}
.wrapper .page.page2
{
background-color: #f29c54;
background-image: -webkit-gradient(linear,color-stop(0%,#f29c54),color-stop(100%,#DB4367));
background-image: -webkit-linear-gradient(-315deg,#f29c54 0%,#DB4367 100%);
background-image: -webkit-linear-gradient(45deg,#DB4367 100%);
background-image: linear-gradient(45deg,#DB4367 100%);
}
.wrapper .page.page3
{
background-color: #23af56;
background-image: -webkit-gradient(linear,#23af56),#67A79A));
background-image: -webkit-linear-gradient(-405deg,#23af56 0%,#67A79A 100%);
background-image: -webkit-linear-gradient(315deg,#67A79A 100%);
background-image: linear-gradient(135deg,#67A79A 100%);
}
.wrapper .page.page4
{
background-color: #412F2F;
background-image: -webkit-gradient(linear,color-stop(15%,#412F2F),color-stop(85%,#6B2686));
background-image: -webkit-linear-gradient(-430deg,#412F2F 15%,#6B2686 85%);
background-image: -webkit-linear-gradient(290deg,#6B2686 85%);
background-image: linear-gradient(160deg,#6B2686 85%);
}
.wrapper.active-page1
{
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page2
{
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page3
{
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page4
{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page5
{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page6
{
-webkit-transform: translateY(-500%);
-ms-transform: translateY(-500%);
transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page7
{
-webkit-transform: translateY(-600%);
-ms-transform: translateY(-600%);
transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page8
{
-webkit-transform: translateY(-700%);
-ms-transform: translateY(-700%);
transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page9
{
-webkit-transform: translateY(-800%);
-ms-transform: translateY(-800%);
transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page10
{
-webkit-transform: translateY(-900%);
-ms-transform: translateY(-900%);
transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.nav-panel
{
position: fixed;
top: 50%;
right: 1em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000;
-webkit-transition: opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.57,1.2,0.68,2.6);
transition: opacity 0.5s,transform 0.5s cubic-bezier(0.57,2.6);
will-change: transform,opacity;
}
.nav-panel.invisible
{
opacity: 0;
-webkit-transform: translateY(-50%) scale(0.5);
-ms-transform: translateY(-50%) scale(0.5);
transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
list-style-type: none;
}
.nav-panel ul .nav-btn
{
position: relative;
overflow: hidden;
width: 1em;
height: 1em;
margin-bottom: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
cursor: pointer;
-webkit-transition: border-color,-webkit-transform 0.3s;
transition: border-color,transform 0.3s;
will-change: border-color,transform;
}
.nav-panel ul .nav-btn:after
{
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
transform: translateX(-50%) translateY(-50%) scale(0.3);
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform,opacity 0.3s;
transition: transform,opacity 0.3s;
will-change: transform,opacity;
}
.nav-panel ul .nav-btn.active:after,.nav-panel ul .nav-btn:hover:after
{
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
border-color: yellow;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
background-color: yellow;
}
.nav-panel .scroll-btn
{
position: absolute;
left: 0;
width: 1em;
height: 1em;
border: 0.2em solid #fff;
border-left: none;
border-bottom: none;
cursor: pointer;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
top: -1.6em;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
bottom: -1.2em;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
border-color: yellow;
}
js代码：
<div class="jb51code">
<pre class="brush:js;">
'use strict';
$(document).ready(function () {
var $wrap = $(".wrapper"),pages = $(".page").length,scrolling = false,currentPage = 1,$navPanel = $(".nav-panel"),$scrollBtn = $(".scroll-btn"),$navBtn = $(".nav-btn");
/*****
* NAVIGATE FUNCTIONS *
*****/
function manageClasses() {
$wrap.removeClass(function (index,css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + currentPage);
$navBtn.removeClass("active");
$(".nav-btn.nav-page" + currentPage).addClass("active");
$navPanel.addClass("invisible");
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
},1000);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" },1000);
}
}
}
function navigateDown() {
if (currentPage < pages) {
currentPage++;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" },1000);
}
}
}
/*****
* MOUSEWHEEL *
*****/
$(document).on("mousewheel DOMMouseScroll",function (e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});
/**
* RIGHT NAVIGATION
**/
/ NAV UP/DOWN BTN PAGE NAVIGATION /
$(document).on("click",".scroll-btn",function () {
if ($(this).hasClass("up")) {
navigateUp();
} else {
navigateDown();
}
});
/ NAV CIRCLE DIRECT PAGE BTN /
$(document).on("click",".nav-btn",function () {
if (!scrolling) {
var target = $(this).attr("data-target");
if (Modernizr.csstransforms) {
$wrap.removeClass(function (index,css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + target);
$navBtn.removeClass("active");
$(this).addClass("active");
$navPanel.addClass("invisible");
currentPage = target;
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
},1000);
} else {
$wrap.animate({ "top": "-" + ((target - 1) * 100) + "%" },1000);
}
}
});
}); //@ sourceURL=pen.js
