这是一款使用jQuery和CSS3来制作炫酷弹性过渡全屏翻页特效。该翻页特效可以通过点击导航按钮来全屏切换页面,在页面切换时,整个页面以弹性变形的方式过渡到下一个页面,效果非常的炫酷。
使用方法
HTML结构
该全屏翻页特效的HTML结构如下:
<div class="page-slider"> <div class="prev-btn">Up</div> <div class="next-btn">Down</div> <div class="nav-dots"> <div data-slide="1" class="nav-dot"> </div> <div data-slide="2" class="nav-dot"> </div> <div data-slide="3" class="nav-dot"> </div> </div> <div data-slide="1" class="panel"> <div id="layer-1" class="trans-layer"></div> <section id="section-1" class="section"> <div class="section-content"> <h1>Vertical slider</h1> </div> </section> </div> <div data-slide="2" class="panel"> <div id="layer-2" class="trans-layer"></div> <section id="section-2" class="section"> <div class="section-content"> <h1>Section 2</h1> </div> </section> </div> <div data-slide="3" class="panel"> <div id="layer-3" class="trans-layer"></div> <section id="section-3" class="section"> <div class="section-content"> <h1>Section 3</h1> </div> </section> </div> </div>
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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!