以下是 HTML5 SVG全屏滑块切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 SVGȫ�������л���Ч</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
</head>
<body>
<section class="cd-slider-wrapper">
<ul class="cd-slider">
<li>
<div>
<h2>����2</h2>
<p>����</p>
</div>
</li>
<li>
<div>
<h2>����3</h2>
<p>����</p>
</div>
</li>
<li>
<div>
<h2>����4</h2>
<p>����</p>
</div>
</li>
</ul> <!-- .cd-slider -->
<ol class="cd-slider-navigation">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<li><a href="#0"><em>Item 3</em></a></li>
<li><a href="#0"><em>Item 4</em></a></li>
</ol> <!-- .cd-slider-navigation -->
<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
<title>SVG cover layer</title>
<desc>an animated layer to switch from one slide to the next one</desc>
<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
</svg>
</div> <!-- .cd-svg-cover -->
</section> <!-- .cd-slider-wrapper -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>JS代码(main.js):
jQuery(document).ready(function(){
/*convert a cubic bezier value to a custom mina easinghttp://stackoverflow.com/questions/25265197/how-to-convert-a-cubic-bezier-value-to-a-custom-mina-easing-snap-svg*/
var duration = 300,delay = 300,epsilon = (1000 / 60 / duration) / 4,firstCustomMinaAnimation = bezier(.42,.03,.77,.63,epsilon),secondCustomMinaAnimation = bezier(.27,.5,.6,.99,epsilon);
//initialize the slider$('.cd-slider-wrapper').each(function(){
initSlider($(this));
}
);
function initSlider(sliderWrapper){
//cache jQuery objectsvar slider = sliderWrapper.find('.cd-slider'),sliderNavigation = sliderWrapper.find('.cd-slider-navigation').find('li'),svgCoverLayer = sliderWrapper.find('div.cd-svg-cover'),pathId = svgCoverLayer.find('path').attr('id'),svgPath = Snap('#'+pathId);
//store path 'd' attribute valuesvar pathArray = [];
pathArray[0] = svgCoverLayer.data('step1');
pathArray[1] = svgCoverLayer.data('step6');
pathArray[2] = svgCoverLayer.data('step2');
pathArray[3] = svgCoverLayer.data('step7');
pathArray[4] = svgCoverLayer.data('step3');
pathArray[5] = svgCoverLayer.data('step8');
pathArray[6] = svgCoverLayer.data('step4');
pathArray[7] = svgCoverLayer.data('step9');
pathArray[8] = svgCoverLayer.data('step5');
pathArray[9] = svgCoverLayer.data('step10');
//update visible slide when user clicks .cd-slider-navigation buttonssliderNavigation.on('click',function(event){
event.preventDefault();
var selectedItem = $(this);
if(!selectedItem.hasClass('selected')){
// if it's not already selectedvar selectedSlidePosition = selectedItem.index(),selectedSlide = slider.children('li').eq(selectedSlidePosition),visibleSlide = slider.find('.visible'),visibleSlidePosition = visibleSlide.index(),direction = '';
direction = ( visibleSlidePosition < selectedSlidePosition) ? 'next':'prev';
updateSlide(visibleSlide,selectedSlide,direction,svgCoverLayer,sliderNavigation,pathArray,svgPath);
}
}
);
}
function updateSlide(oldSlide,newSlide,direction,svgCoverLayer,sliderNavigation,paths,svgPath){
if( direction == 'next' ){
var path1 = paths[0],path2 = paths[2],path3 = paths[4];
path4 = paths[6];
path5 = paths[8];
}
else{
var path1 = paths[1],path2 = paths[3],path3 = paths[5];
path4 = paths[7];
path5 = paths[9];
}
svgCoverLayer.addClass('is-animating');
svgPath.attr('d',path1);
svgPath.animate({
'd':path2}
,duration,firstCustomMinaAnimation,function(){
svgPath.animate({
'd':path3}
,duration,secondCustomMinaAnimation,function(){
oldSlide.removeClass('visible');
newSlide.addClass('visible');
updateNavSlide(newSlide,sliderNavigation);
setTimeout(function(){
svgPath.animate({
'd':path4}
,duration,firstCustomMinaAnimation,function(){
svgPath.animate({
'd':path5}
,duration,secondCustomMinaAnimation,function(){
svgCoverLayer.removeClass('is-animating');
}
);
}
);
}
,delay);
}
);
}
);
}
function updateNavSlide(actualSlide,sliderNavigation){
var position = actualSlide.index();
sliderNavigation.removeClass('selected').eq(position).addClass('selected');
}
function bezier(x1,y1,x2,y2,epsilon){
//https://github.com/arian/cubic-beziervar curveX = function(t){
var v = 1 - t;
return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
}
;
var curveY = function(t){
var v = 1 - t;
return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
}
;
var derivativeCurveX = function(t){
var v = 1 - t;
return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
}
;
return function(t){
var x = t,t0,t1,t2,x2,d2,i;
// First try a few iterations of Newton's method -- normally very fast.for (t2 = x,i = 0;
i < 8;
i++){
x2 = curveX(t2) - x;
if (Math.abs(x2) < epsilon) return curveY(t2);
d2 = derivativeCurveX(t2);
if (Math.abs(d2) < 1e-6) break;
t2 = t2 - x2 / d2;
}
t0 = 0,t1 = 1,t2 = x;
if (t2 < t0) return curveY(t0);
if (t2 > t1) return curveY(t1);
// Fallback to the bisection method for reliability.while (t0 < t1){
x2 = curveX(t2);
if (Math.abs(x2 - x) < epsilon) return curveY(t2);
if (x > x2) t0 = t2;
else t1 = t2;
t2 = (t1 - t0) * .5 + t0;
}
// Failurereturn curveY(t2);
}
;
}
;
}
);
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Jaldi",sans-serif;color:#4a3553;background-color:#ffffff;}
a{color:#ffb251;text-decoration:none;}
/* --------------------------------Slider-------------------------------- */
.cd-slider-wrapper{position:relative;width:100%;height:100vh;/* hide horizontal scrollbar on IE11 */
overflow:hidden;}
.cd-slider-wrapper .cd-slider,.cd-slider-wrapper .cd-slider > li{height:100%;width:100%;}
.cd-slider > li{position:absolute;top:0;left:0;opacity:0;/* used to vertically center its content */
display:table;background-position:center center;background-repeat:no-repeat;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-slider > li.visible{/* selected slide */
position:relative;z-index:2;opacity:1;}
.cd-slider > li:first-of-type{background-color:#4a3553;background-image:url(../img/img-1.jpg);}
.cd-slider > li:nth-of-type(2){background-color:#ffb251;background-image:url(../img/img-2.jpg);}
.cd-slider > li:nth-of-type(3){background-color:#7d7160;background-image:url(../img/img-3.jpg);}
.cd-slider > li:nth-of-type(4){background-color:#ff625a;background-image:url(../img/img-4.jpg);}
.cd-slider > li:first-of-type,.cd-slider > li:nth-of-type(2),.cd-slider > li:nth-of-type(3),.cd-slider > li:nth-of-type(4){background-size:cover;}
.cd-slider > li > div{/* vertically center the slider content */
display:table-cell;vertical-align:middle;text-align:center;}
.cd-slider > li h2,.cd-slider > li p{text-shadow:0 1px 3px rgba(0,0,0,0.1);line-height:1.2;margin:0 auto 14px;color:#ffffff;width:90%;max-width:320px;}
.cd-slider > li h2{font-size:2.4rem;}
.cd-slider > li p{font-size:1.4rem;line-height:1.4;}
.cd-slider > li .cd-btn{display:inline-block;padding:1.2em 1.4em;margin-top:.8em;background-color:rgba(0,0,0,0.6);border-radius:.25em;font-size:1.3rem;font-weight:700;letter-spacing:1px;color:#ffffff;text-transform:uppercase;-webkit-transition:background-color 0.2s;-moz-transition:background-color 0.2s;transition:background-color 0.2s;}
.no-touch .cd-slider > li .cd-btn:hover{background-color:rgba(0,0,0,0.8);}
@media only screen and (min-width:768px){.cd-slider > li h2,.cd-slider > li p{max-width:520px;}
.cd-slider > li h2{font-size:2.4em;font-weight:300;}
.cd-slider > li .cd-btn{font-size:1.4rem;}
}
@media only screen and (min-width:1170px){.cd-slider > li h2,.cd-slider > li p{margin-bottom:20px;}
.cd-slider > li h2{font-size:3.2em;}
.cd-slider > li p{font-size:1.8rem;}
}
/* --------------------------------Slider navigation-------------------------------- */
.cd-slider-navigation{position:absolute;bottom:50px;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);z-index:3;text-align:center;width:90%;}
.cd-slider-navigation::after{clear:both;content:"";display:table;}
.cd-slider-navigation li{display:inline-block;margin-right:20px;}
.cd-slider-navigation li:last-of-type{margin-right:0;}
.cd-slider-navigation a{display:block;position:relative;height:40px;width:40px;background:url(../img/cd-icon-navigation.svg) no-repeat -10px -10px;border-radius:50%;background-color:#ffffff;}
.no-touch .cd-slider-navigation a:hover em{opacity:1;visibility:visible;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity 0.2s 0s,visibility 0s 0s,-webkit-transform 0.2s 0s;-moz-transition:opacity 0.2s 0s,visibility 0s 0s,-moz-transform 0.2s 0s;transition:opacity 0.2s 0s,visibility 0s 0s,transform 0.2s 0s;}
.cd-slider-navigation li.selected:first-of-type a{/* change custom icon using image sprites */
background-position:-10px -70px;}
.cd-slider-navigation li:nth-of-type(2) a{background-position:-70px -10px;}
.cd-slider-navigation li.selected:nth-of-type(2) a{background-position:-70px -70px;}
.cd-slider-navigation li:nth-of-type(3) a{background-position:-130px -10px;}
.cd-slider-navigation li.selected:nth-of-type(3) a{background-position:-130px -70px;}
.cd-slider-navigation li:nth-of-type(4) a{background-position:-190px -10px;}
.cd-slider-navigation li.selected:nth-of-type(4) a{background-position:-190px -70px;}
.cd-slider-navigation em{/* tooltip visible on hover */
position:absolute;bottom:calc(100% + 10px);left:50%;padding:8px 10px;color:#ffffff;background-color:rgba(0,0,0,0.7);white-space:nowrap;font-size:1.3rem;border-radius:2px;opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(3px);-moz-transform:translateX(-50%) translateY(3px);-ms-transform:translateX(-50%) translateY(3px);-o-transform:translateX(-50%) translateY(3px);transform:translateX(-50%) translateY(3px);-webkit-transition:opacity 0.2s 0s,visibility 0s 0.2s,-webkit-transform 0.2s 0s;-moz-transition:opacity 0.2s 0s,visibility 0s 0.2s,-moz-transform 0.2s 0s;transition:opacity 0.2s 0s,visibility 0s 0.2s,transform 0.2s 0s;}
.cd-slider-navigation em::after{/* tooltip arrow */
content:'';position:absolute;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);bottom:-10px;height:0;width:0;border:5px solid transparent;border-top-color:rgba(0,0,0,0.7);}
@media only screen and (min-width:1170px){.cd-slider-navigation a{height:60px;width:60px;}
.cd-slider-navigation li:first-of-type a{/* change custom icon using image sprites */
background-position:0 0px;}
.cd-slider-navigation li.selected:first-of-type a{/* change custom icon using image sprites */
background-position:0 -60px;}
.cd-slider-navigation li:nth-of-type(2) a{background-position:-60px 0;}
.cd-slider-navigation li.selected:nth-of-type(2) a{background-position:-60px -60px;}
.cd-slider-navigation li:nth-of-type(3) a{background-position:-120px 0;}
.cd-slider-navigation li.selected:nth-of-type(3) a{background-position:-120px -60px;}
.cd-slider-navigation li:nth-of-type(4) a{background-position:-180px 0;}
.cd-slider-navigation li.selected:nth-of-type(4) a{background-position:-180px -60px;}
}
/* --------------------------------svg cover layer-------------------------------- */
.cd-svg-cover{position:absolute;z-index:1;left:0;top:0;height:100%;width:100%;opacity:0;}
.cd-svg-cover path{fill:#ffe8c9;}
.cd-svg-cover.is-animating{z-index:4;opacity:1;-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;}
分享到QQ
分享到微博
微信扫一扫
