背景平铺的幻灯片FourBoxes滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是背景平铺的幻灯片FourBoxes滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="gb2312" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>背景平铺的幻灯片FourBoxes</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			
			<div id="boxgallery" class="boxgallery" data-effect="effect-1">
				<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
				<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
				<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
				<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
			</div>
			<header class="codrops-header">
				<h1>Four Boxes Slideshow <span>Recreating the background image slideshow seen on Atelier Serge Thoroval's website</span></h1>
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Serge Thoroval</a>
					<a href="index2.html">Lateral</a>
					<a href="index3.html">Fall</a>
				</nav>
			</header>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/boxesFx.js"></script>
		<script>
			new BoxesFx( document.getElementById( 'boxgallery' ) );
		</script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Four Boxes Slideshow | Demo 2</title>
		<meta name="description" content="Four Boxes Slideshow: Recreating the background image slideshow seen on Atelier Serge Thoroval's website" />
		<meta name="keywords" content="background slideshow, boxes, background image, four panels, css, tutorial" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<div id="boxgallery" class="boxgallery" data-effect="effect-2">
			  <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
				<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
				<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
				<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
			</div>
			<header class="codrops-header">
				<h1>Four Boxes Slideshow <span>Recreating the background image slideshow seen on Atelier Serge Thoroval's website</span></h1>
				<nav class="codrops-demos">
					<a href="index.html">Serge Thoroval</a>
					<a class="current-demo" href="index2.html">Lateral</a>
					<a href="index3.html">Fall</a>
				</nav>
			</header>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/boxesFx.js"></script>
		<script>
			new BoxesFx( document.getElementById( 'boxgallery' ) );
		</script>
	</body>
</html>

JS代码(boxesFx.js):

/** * boxesFx.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014,Codrops * http://www.codrops.com */
;
	( function( window ){
	'use strict';
	// based on http://responsejs.com/labs/dimensions/function getViewport(axis){
	var client,inner;
	if( axis === 'x' ){
	client = docElem['clientWidth'];
	inner = window['innerWidth'];
}
else if( axis === 'y' ){
	client = docElem['clientHeight'];
	inner = window['innerHeight'];
}
return client < inner ? inner:client;
}
var docElem = window.document.documentElement,transEndEventNames ={
	'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'}
,transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],support ={
	transitions:Modernizr.csstransitions}
,win ={
	width:getViewport('x'),height:getViewport('y')}
;
	function extend( a,b ){
	for( var key in b ){
	if( b.hasOwnProperty( key ) ){
	a[key] = b[key];
}
}
return a;
}
function BoxesFx( el,options ){
	this.el = el;
	this.options = extend({
}
,this.options );
	extend( this.options,options );
	this._init();
}
BoxesFx.prototype.options ={
}
BoxesFx.prototype._init = function(){
	// set transforms configurationthis._setTransforms();
	// which effectthis.effect = this.el.getAttribute( 'data-effect' ) || 'effect-1';
	// check if animatingthis.isAnimating = false;
	// the panelsthis.panels = [].slice.call( this.el.querySelectorAll( '.panel' ) );
	// total number of panels (4 for this demo)//this.panelsCount = this.panels.length;
	this.panelsCount = 4;
	// current panel´s indexthis.current = 0;
	classie.add( this.panels[0],'current' );
	// replace image with 4 divs,each including the imagevar self = this;
	this.panels.forEach( function( panel ){
	var img = panel.querySelector( 'img' ),imgReplacement = '';
	for( var i = 0;
	i < self.panelsCount;
	++i ){
	imgReplacement += '<div class="bg-tile"><div class="bg-img"><img src="' + img.src + '" /></div></div>'}
console.log(imgReplacement)panel.removeChild( img );
	panel.innerHTML = imgReplacement + panel.innerHTML;
}
.bind(this) );
	// add navigation elementthis.nav = document.createElement( 'nav' );
	this.nav.innerHTML = '<span class="prev"><i></i></span><span class="next"><i></i></span>';
	this.el.appendChild( this.nav );
	// initialize eventsthis._initEvents();
}
// set the transforms per effect// we have defined both the next and previous action transforms for each panelBoxesFx.prototype._setTransforms = function(){
	this.transforms ={
	'effect-1':{
	'next':['translate3d(0,' + (win.height/2+10) + 'px,0)',// transforms for 1 panel'translate3d(-' + (win.width/2+10) + 'px,0,0)',// transforms for 2 panel'translate3d(' + (win.width/2+10) + 'px,0,0)',// transforms for 3 panel'translate3d(0,-' + (win.height/2+10) + 'px,0)' // transforms for 4 panel],'prev':['translate3d(' + (win.width/2+10) + 'px,0,0)','translate3d(0,' + (win.height/2+10) + 'px,0)','translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(-' + (win.width/2+10) + 'px,0,0)']}
,'effect-2':{
	'next':['translate3d(-' + (win.width/2+10) + 'px,0,0)','translate3d(' + (win.width/2+10) + 'px,0,0)','translate3d(-' + (win.width/2+10) + 'px,0,0)','translate3d(' + (win.width/2+10) + 'px,0,0)'],'prev':['translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(0,' + (win.height/2+10) + 'px,0)','translate3d(0,' + (win.height/2+10) + 'px,0)']}
,'effect-3':{
	'next':['translate3d(0,' + (win.height/2+10) + 'px,0)','translate3d(0,' + (win.height/2+10) + 'px,0)','translate3d(0,' + (win.height/2+10) + 'px,0)','translate3d(0,' + (win.height/2+10) + 'px,0)'],'prev':['translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(0,-' + (win.height/2+10) + 'px,0)','translate3d(0,-' + (win.height/2+10) + 'px,0)']}
}
;
}
BoxesFx.prototype._initEvents = function(){
	var self = this,navctrls = this.nav.children;
	// previous actionnavctrls[0].addEventListener( 'click',function(){
	self._navigate('prev')}
);
	// next actionnavctrls[1].addEventListener( 'click',function(){
	self._navigate('next')}
);
	// window resizewindow.addEventListener( 'resize',function(){
	self._resizeHandler();
}
);
}
// goto next or previous slideBoxesFx.prototype._navigate = function( dir ){
	if( this.isAnimating ) return false;
	this.isAnimating = true;
	var self = this,currentPanel = this.panels[ this.current ];
	if( dir === 'next' ){
	this.current = this.current < this.panelsCount - 1 ? this.current + 1:0;
}
else{
	this.current = this.current > 0 ? this.current - 1:this.panelsCount - 1;
}
// next panel to be shownvar nextPanel = this.panels[ this.current ];
	// add class active to the next panel to trigger its animationclassie.add( nextPanel,'active' );
	// apply the transforms to the current panelthis._applyTransforms( currentPanel,dir );
	// let´s track the number of transitions ended per panelvar cntTransTotal = 0,// transition end event functiononEndTransitionFn = function( ev ){
	if( ev && !classie.has( ev.target,'bg-img' ) ) return false;
	// return if not all panel transitions ended++cntTransTotal;
	if( cntTransTotal < self.panelsCount ) return false;
	if( support.transitions ){
	this.removeEventListener( transEndEventName,onEndTransitionFn );
}
// remove current class from current panel and add it to the next oneclassie.remove( currentPanel,'current' );
	classie.add( nextPanel,'current' );
	// reset transforms for the currentPanelself._resetTransforms( currentPanel );
	// remove class activeclassie.remove( nextPanel,'active' );
	self.isAnimating = false;
}
;
	if( support.transitions ){
	currentPanel.addEventListener( transEndEventName,onEndTransitionFn );
}
else{
	onEndTransitionFn();
}
}
BoxesFx.prototype._applyTransforms = function( panel,dir ){
	var self = this;
	[].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile,pos ){
	tile.style.WebkitTransform = self.transforms[self.effect][dir][pos];
	tile.style.transform = self.transforms[self.effect][dir][pos];
}
);
}
BoxesFx.prototype._resetTransforms = function( panel ){
	[].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile ){
	tile.style.WebkitTransform = 'none';
	tile.style.transform = 'none';
}
);
}
BoxesFx.prototype._resizeHandler = function(){
	var self = this;
	function delayed(){
	self._resize();
	self._resizeTimeout = null;
}
if ( this._resizeTimeout ){
	clearTimeout( this._resizeTimeout );
}
this._resizeTimeout = setTimeout( delayed,50 );
}
BoxesFx.prototype._resize = function(){
	win.width = getViewport('x');
	win.height = getViewport('y');
	this._setTransforms();
}
// add to global namespacewindow.BoxesFx = BoxesFx;
}
)( window );

CSS代码(demo.css):

@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');}
*,*:after,*:before{border-box;box-sizing:border-box;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
body{background:#333;color:#fff;font-weight:200;font-size:1em;font-family:'Raleway','Arial',sans-serif;}
a{color:#fff;text-decoration:none;outline:none;font-weight:600;}
a:hover,a:focus{color:#debcc3;}
section{padding:1em;text-align:center;}
/* Header */
.codrops-header{z-index:1000;position:absolute;top:50%;left:50%;text-align:center;max-width:500px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.codrops-header h1{margin:0;font-weight:200;font-size:3em;line-height:1;}
.codrops-header h1 span{display:block;padding:0.5em 0 0.6em 0.1em;font-size:40%;line-height:1.2;opacity:0.7;}
/* To Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-weight:400;font-size:0.69em;line-height:2.2;position:relative;z-index:2000;}
.codrops-top a{display:inline-block;padding:0.3em 0.7em;text-decoration:none;letter-spacing:1px;margin:5px;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{display:block;float:left;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Demo Buttons Style */
.codrops-demos{padding-top:2em;font-size:0.8em;}
.codrops-demos a{display:inline-block;margin:0.5em;padding:0.7em 1.1em;outline:none;border:2px solid #fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;width:165px;}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{color:#debcc3;border-color:#debcc3;}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)