html炫酷下滑翻页,jQuery和CSS3炫酷弹性过渡全屏翻页特效

这是一款使用jQuery和CSS3来制作炫酷弹性过渡全屏翻页特效。该翻页特效可以通过点击导航按钮来全屏切换页面，在页面切换时，整个页面以弹性变形的方式过渡到下一个页面，效果非常的炫酷。

使用方法

HTML结构

该全屏翻页特效的HTML结构如下：

Up

Down

Vertical slider

Section 2

Section 3

CSS样式

页面的主要CSS样式如下：

.page-slider {

position: relative;

top: 0;

width: 100vw;

height: 100vh;

max-width: 100%;

max-height: 100%;

background: deepskyblue;

overflow: hidden;

}

.panel {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

.panel._active { z-index: 10; }

.section-content {

display: flex;

flex-flow: column;

width: 100%;

height: 100%;

justify-content: center;

align-items: center;

color: #fff;

font-family: arial;

text-transform: uppercase;

opacity: 0;

transform: translateY(30px);

transition: all 500ms ease;

transition-delay: 0s;

}

.section {

transform: translateY(100%);

transition: all 500ms ease-in-out;

transition-delay: 0ms;

background: #343434;

}

两个页面之间的弹性过渡动画效果CSS样式如下：

.trans-layer, .section {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

bottom: 0;

right: 0;

}

.trans-layer {

background: #000;

transform: translateY(-100%) skew(0) rotate(0) scale(2);

border-radius: 50%;

transition: all 500ms ease-in-out;

transition-delay: 500ms;

}

._active .trans-layer {

transform: translateY(0) skew(0) rotate(0) scale(2);

transition-delay: 0ms;

}

._active .section {

transform: translateY(0);

transition-delay: 500ms;

}

._active .section-content {

opacity: 1;

transform: translateY(0px);

transition-delay: 1000ms;

}

最后为圆点导航和箭头导航按钮设置样式：

.nav-dots {

position: absolute;

top: 50%;

right: 10px;

transform: translateY(-50%);

z-index: 20;

width: 40px;

}

.nav-dot {

width: 10px;

height: 10px;

margin: 20px auto;

border-radius: 50%;

background: #fff;

cursor: pointer;

transition: all 300ms ease-out;

}

.nav-dot.active { background: red; }

.next-btn, .prev-btn {

width: 30px;

height: 30px;

position: absolute;

z-index: 20;

border: 1px solid #fff;

color: #fff;

line-height: 30px;

text-align: center;

font-size: 24px;

cursor: pointer;

}

.next-btn {

bottom: 10px;

right: 14px;

}

.prev-btn {

top: 10px;

right: 14px;

}

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的jQuery代码来初始化该全屏翻页特效。

$('.wrapper').each(function() {

var $slider = $(this);

var numberOfSlides = $slider.find('.panel').length;

$slider.find('.panel:eq(0)').addClass('_active');

$slider.find('.nav-dot:eq(0)').addClass('active');

var $activeSlide = $slider.find('.panel._active');

var $nextBtn = $slider.find('.next-btn');

var $prevBtn = $slider.find('.prev-btn');

$('.nav-dot').on('click', function() {

var slideToGo = $(this).data('slide');

goToSlide(slideToGo);

});

$slider.on('slide.changed', function() {

console.log('slide changed !');

$('.nav-dot').removeClass('active');

var $activeDot = $('.nav-dot[data-slide="'+$('.panel._active').data('slide')+'"]');

$activeDot.addClass('active');

});

$nextBtn.on('click', function(event) {

nextSlide();

});

$prevBtn.on('click', function(event) {

prevSlide();

});

function nextSlide() {

$activeSlide = $slider.find('.panel._active');

var $nextSlide = $activeSlide.next('.panel');

$activeSlide.removeClass('_active');

$nextSlide.addClass('_active');

var slideIndex = $slider.find('.panel._active').index('.panel');

console.log(slideIndex);

if(slideIndex >= numberOfSlides || slideIndex <= -1 ) {

firstSlide();

$slider.trigger('slide.changed');

}else {

$slider.trigger('slide.changed');

}

}

function prevSlide() {

$activeSlide = $slider.find('.panel._active');

var $prevSlide = $activeSlide.prev('.panel');

$activeSlide.removeClass('_active');

$prevSlide.addClass('_active');

var slideIndex = $slider.find('.panel._active').index();

if(typeof $prevSlide === 'undefined'|| $prevSlide === null || $prevSlide.length == -1 || slideIndex <= -1 ) {

lastSlide();

$slider.trigger('slide.changed');

} else {

$slider.trigger('slide.changed');

}

}

function firstSlide() {

$('.panel._active').removeClass('_active');

$slider.find('.panel:eq(0)').addClass('_active');

$activeSlide = $slider.find('.panel:eq(0)');

}

function lastSlide() {

$('.panel._active').removeClass('_active');

$slider.find('.panel').eq(numberOfSlides-1).addClass('_active');

}

function goToSlide(slideToGo) {

$('.panel._active').removeClass('_active');

$slider.find('.panel').eq(slideToGo -1).addClass('_active');

$activeSlide = $slider.find('.panel').eq(slideToGo -1).addClass('_active');

$slider.trigger('slide.changed');

}

});