HTML5多角度响应式全屏切换特效

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

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

以下是 HTML5多角度响应式全屏切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>HTML5多角度响应式全屏切换特效 </title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/select-css.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>
<svg class="hidden">
	<defs>
		<symbol id="icon-arrow" viewBox="0 0 39 51.43">
			<title>Arrow Left</title>
			<polygon points="7 25.71 36 45.71 36 26.08 36 5.71 7 25.71" stroke-miterlimit="10" stroke-width="6"/><line x1="3" y1="5.71" x2="3" y2="45.71" fill="none" stroke-miterlimit="10" stroke-width="6"/>
		</symbol>
	</defs>
</svg>
<main class="container">
	<div class="pages">
		<div class="page page--current"><!-- intro page -->
			<header class="codrops-header">
				
				<h1 class="codrops-header__title">响应式全屏切换特效</h1>
				<div class="codrops-header__subbox">
					<span>选择不同效果:</span>
					<div class="custom-select">
						<select name="select" id="select-effect">
							<option value="effect-3" data-layers="3" data-colors="#0092DD,#fff,#3E3A35" selected>Triple Swoosh</option> 
							<option value="effect-1" data-layers="1" data-colors="#202023">Simple</option>
							<option value="effect-2" data-layers="2" data-colors="#202023,#3D4A41">Duo Move</option>
							<option value="effect-4" data-layers="3" data-colors="#202023,#555,#d1d1d1">Content Move</option>
						</select>
					</div>
				</div>
			</header>
			
		</div><!-- /page -->
		<div class="page">
			<blockquote class="quote">
				<p>A good programmer is someone who always looks both ways before crossing a one-way street. </p>
				<footer>Doug Linder</footer>
			</blockquote>
		</div>
	</div><!-- /pages -->
	<nav class="pagenav">
		<button class="pagenav__button pagenav__button--top" aria-label="Navigate top"><svg class="icon icon--rtop"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--left" aria-label="Navigate left"><svg class="icon"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--right" aria-label="Navigate right"><svg class="icon icon--rright"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--bottom" aria-label="Navigate bottom"><svg class="icon icon--rbottom"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--cornertopleft" aria-label="Navigate top left"><svg class="icon icon--rtopleft"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--cornertopright" aria-label="Navigate top right"><svg class="icon icon--rtopright"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--cornerbottomleft" aria-label="Navigate bottom left"><svg class="icon icon--rbottomleft"><use xlink:href="#icon-arrow"></use></svg></button>
		<button class="pagenav__button pagenav__button--cornerbottomright" aria-label="Navigate bottom right"><svg class="icon icon--rbottomright"><use xlink:href="#icon-arrow"></use></svg></button>
	</nav>
</main>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
<script>
(function() {
	var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
		currentPage = 0,
		
		revealerOpts = {
			// the layers are the elements that move from the sides
			nmbLayers : 3,
			// bg color of each layer
			bgcolor : ['#0092DD', '#fff', '#3E3A35'],
			// effect classname
			effect : 'anim--effect-3',
			onStart : function(direction) {
				// next page gets class page--animate-[direction]
				var nextPage = pages[currentPage === 0 ? 1 : 0];
				classie.add(nextPage, 'page--animate-' + direction);
			},
			onEnd : function(direction) {
				// remove class page--animate-[direction] from next page
				var nextPage = pages[currentPage === 0 ? 1 : 0];
				nextPage.className = 'page';
			}
		};
		revealer = new Revealer(revealerOpts);

	// clicking the page nav buttons
	document.querySelector('button.pagenav__button--top').addEventListener('click', function() { reveal('top'); });
	document.querySelector('button.pagenav__button--left').addEventListener('click', function() { reveal('left'); });
	document.querySelector('button.pagenav__button--right').addEventListener('click', function() { reveal('right'); });
	document.querySelector('button.pagenav__button--bottom').addEventListener('click', function() { reveal('bottom'); });
	document.querySelector('button.pagenav__button--cornertopleft').addEventListener('click', function() { reveal('cornertopleft'); });
	document.querySelector('button.pagenav__button--cornertopright').addEventListener('click', function() { reveal('cornertopright'); });
	document.querySelector('button.pagenav__button--cornerbottomleft').addEventListener('click', function() { reveal('cornerbottomleft'); });
	document.querySelector('button.pagenav__button--cornerbottomright').addEventListener('click', function() { reveal('cornerbottomright'); });

	// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
	function reveal(direction) {
		var callbackTime = 750,
			callbackFn = function() {
				classie.remove(pages[currentPage], 'page--current');
				currentPage = currentPage === 0 ? 1 : 0;
				classie.add(pages[currentPage], 'page--current');	
			};

		revealer.reveal(direction, callbackTime, callbackFn);
	}

	// changing the effect..
	var effectCtrl = document.getElementById('select-effect');
	effectCtrl.addEventListener('change', changeEffect);
	// force it to be the first opt as default
	effectCtrl.value = 'effect-3';

	function changeEffect() {
		revealer.destroy();
		var revealerOpts = {
			// the layers are the elements that move from the sides
			nmbLayers : Number(this.options[this.selectedIndex].getAttribute('data-layers')),
			// bg color of each layer
			bgcolor : this.options[this.selectedIndex].getAttribute('data-colors').split(','),
			// effect classname
			effect : 'anim--' + this.value,
			onStart : function(direction) {
				// next page gets class page--animate-[direction]
				var nextPage = pages[currentPage === 0 ? 1 : 0];
				classie.add(nextPage, 'page--animate-' + direction);
			},
			onEnd : function(direction) {
				// remove class page--animate-[direction] from next page
				var nextPage = pages[currentPage === 0 ? 1 : 0];
				nextPage.className = 'page';
			}
		};
		
		revealer = new Revealer(revealerOpts);
	}
})();
</script>

</body>
</html>

JS代码(main.js):

/** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2016,Codrops * http://www.codrops.com */
;
	(function(window){
	'use strict';
	// some helper functions/** * from https://davidwalsh.name/javascript-debounce-function */
function debounce(func,wait,immediate){
	var timeout;
	return function(){
	var context = this,args = arguments;
	var later = function(){
	timeout = null;
	if (!immediate) func.apply(context,args);
}
;
	var callNow = immediate && !timeout;
	clearTimeout(timeout);
	timeout = setTimeout(later,wait);
	if (callNow) func.apply(context,args);
}
;
}
;
	function extend( a,b ){
	for( var key in b ){
	if( b.hasOwnProperty( key ) ){
	a[key] = b[key];
}
}
return a;
}
// some varsvar bodyEl = document.body,// window sizeswinsize ={
	width:window.innerWidth,height:window.innerHeight}
,// support for animationssupport ={
	animations:Modernizr.cssanimations}
,// animationend event functionanimEndEventNames ={
	'WebkitAnimation':'webkitAnimationEnd','OAnimation':'oAnimationEnd','msAnimation':'MSAnimationEnd','animation':'animationend'}
,animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],onEndAnimation = function( el,callback ){
	var onEndCallbackFn = function( ev ){
	if( support.animations ){
	if( ev.target != this ) return;
	this.removeEventListener( animEndEventName,onEndCallbackFn );
}
if( callback && typeof callback === 'function' ){
	callback.call();
}
}
;
	if( support.animations ){
	el.addEventListener( animEndEventName,onEndCallbackFn );
}
else{
	onEndCallbackFn();
}
}
;
	/** * Revealer obj */
function Revealer(options){
	this.options = extend({
}
,this.options );
	extend( this.options,options );
	this._init();
}
/** * Revealer default options */
Revealer.prototype.options ={
	// total number of revealing layers (min is 1)nmbLayers:1,// bg color for the revealing layersbgcolor:'#fff',// effect classnameeffect:'anim--effect-1',// callbackonStart:function(direction){
	return false;
}
,// callbackonEnd:function(direction){
	return false;
}
}
;
	/** * build layer structure * add effect class * init/bind events */
Revealer.prototype._init = function(){
	// add revealer layersthis._addLayers();
	// now we have access to the layersthis.layers = [].slice.call(this.revealerWrapper.children);
	// init/bind eventsthis._initEvents();
}
;
	/** * init/bind events */
Revealer.prototype._initEvents = function(){
	// window resize:recalculate window sizesthis.debounceResize = debounce(function(ev){
	winsize ={
	width:window.innerWidth,height:window.innerHeight}
;
}
,10);
	window.addEventListener('resize',this.debounceResize);
}
;
	/** * build layer structure and append it to the body * add effect class */
Revealer.prototype._addLayers = function(){
	this.revealerWrapper = document.createElement('div');
	this.revealerWrapper.className = 'revealer';
	classie.add(bodyEl,this.options.effect);
	var strHTML = '';
	for(var i = 0;
	i < this.options.nmbLayers;
	++i){
	var bgcolor = typeof this.options.bgcolor === 'string' ? this.options.bgcolor:(this.options.bgcolor instanceof Array && this.options.bgcolor[i] ? this.options.bgcolor[i]:'#fff');
	strHTML += '<div style="background:' + bgcolor + '" class="revealer__layer"></div>';
}
this.revealerWrapper.innerHTML = strHTML;
	bodyEl.appendChild(this.revealerWrapper);
}
;
	/** * reveal the layers * direction:right || left || top || bottom || cornertopleft || cornertopright || cornerbottomleft || cornerbottomright */
Revealer.prototype.reveal = function(direction,callbacktime,callback){
	// if animating returnif( this.isAnimating ){
	return false;
}
this.isAnimating = true;
	// current directionthis.direction = direction;
	// onStart callbackthis.options.onStart(this.direction);
	// set the initial position for the layers´ parentvar widthVal,heightVal,transform;
	if( direction === 'cornertopleft' || direction === 'cornertopright' || direction === 'cornerbottomleft' || direction === 'cornerbottomright' ){
	var pageDiagonal = Math.sqrt(Math.pow(winsize.width,2) + Math.pow(winsize.height,2));
	widthVal = heightVal = pageDiagonal + 'px';
	if( direction === 'cornertopleft' ){
	transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,135deg) translate3d(0,' + pageDiagonal + 'px,0)';
}
else if( direction === 'cornertopright' ){
	transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,-135deg) translate3d(0,' + pageDiagonal + 'px,0)';
}
else if( direction === 'cornerbottomleft' ){
	transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,45deg) translate3d(0,' + pageDiagonal + 'px,0)';
}
else if( direction === 'cornerbottomright' ){
	transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) translate3d(0,' + pageDiagonal + 'px,0)';
}
}
else if( direction === 'left' || direction === 'right' ){
	widthVal = '100vh'heightVal = '100vw';
	transform = 'translate3d(-50%,-50%,0) rotate3d(0,0,1,' + (direction === 'left' ? 90:-90) + 'deg) translate3d(0,100%,0)';
}
else if( direction === 'top' || direction === 'bottom' ){
	widthVal = '100vw';
	heightVal = '100vh';
	transform = direction === 'top' ? 'rotate3d(0,0,1,180deg)':'none';
}
this.revealerWrapper.style.width = widthVal;
	this.revealerWrapper.style.height = heightVal;
	this.revealerWrapper.style.WebkitTransform = this.revealerWrapper.style.transform = transform;
	this.revealerWrapper.style.opacity = 1;
	// add direction and animate classes to parentclassie.add(this.revealerWrapper,'revealer--' + direction || 'revealer--right');
	classie.add(this.revealerWrapper,'revealer--animate');
	// track the end of the animation for all layersvar self = this,layerscomplete = 0;
	this.layers.forEach(function(layer){
	onEndAnimation(layer,function(){
	++layerscomplete;
	if( layerscomplete === self.options.nmbLayers ){
	classie.remove(self.revealerWrapper,'revealer--' + direction || 'revealer--right');
	classie.remove(self.revealerWrapper,'revealer--animate');
	self.revealerWrapper.style.opacity = 0;
	self.isAnimating = false;
	// callbackself.options.onEnd(self.direction);
}
}
);
}
);
	// reveal fn callbackif( typeof callback === 'function'){
	if( this.callbacktimeout ){
	clearTimeout(this.callbacktimeout);
}
this.callbacktimeout = setTimeout(callback,callbacktime);
}
}
;
	/** * destroy method */
Revealer.prototype.destroy = function(){
	classie.remove(bodyEl,this.options.effect);
	window.removeEventListener('resize',this.debounceResize);
	bodyEl.removeChild(this.revealerWrapper);
}
;
	window.Revealer = Revealer;
}
)(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{box-sizing:border-box;}
body{font-family:'Source Sans Pro',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;color:#444;background:#f6f6f6;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{outline:none;color:#45a8f1;text-decoration:none;}
a:hover,a:focus{color:#544f4a;outline:none;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
/* Header */
.codrops-header{letter-spacing:2px;text-transform:uppercase;position:relative;padding:0 0 2em 0;margin:0 0 1em 0;min-height:250px;}
.codrops-header__title{font-size:1.2em;color:#fff;border:3px solid #fff;padding:1.5em 2em;margin:0 0 0 3em;display:inline-block;}
.codrops-header__subbox{background:#fff;color:#66c6ff;max-width:260px;padding:2em 2em 4em;font-size:0.85em;font-weight:bold;line-height:1.25;text-align:right;margin:-1.25em 0 0 0;}
.codrops-header__subbox span{display:block;margin:0 0 1em 0;}
/* Custom styles for https://github.com/filamentgroup/select-css */
.custom-select{border:3px solid #303840;background:#56B4F9;}
.custom-select::after{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid #303840;margin-top:-3px;}
.custom-select select{font-family:'Source Sans Pro',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:0px;font-weight:700;color:#303840;line-height:1.5;cursor:pointer;}
/* Focus style */
.custom-select select:focus{outline:none;box-shadow:none;border:1px solid transparent;}
/* Set options to normal weight */
.custom-select option{font-weight:bold;background:#fff;box-shadow:none;}
/* Top Navigation Style */
.codrops-links{position:absolute;display:inline-block;text-align:center;white-space:nowrap;border:3px solid #fff;background:#66c6ff;bottom:0;left:11em;}
.codrops-links::after{position:absolute;top:-5%;left:50%;width:3px;margin-left:-1px;height:110%;background:#fff;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.codrops-icon{display:inline-block;margin:1em;width:1.5em;text-decoration:none;}
.codrops-icon span{display:none;}
.codrops-icon::before{margin:0 5px;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";color:#0099cc;}
.codrops-icon--prev::before{content:"\e004";}
.pater{-webkit-box-flex:0;-ms-flex:none;flex:none;display:block;border:3px solid #fff;padding:4.5em 2.5em 2.5em;width:100%;max-width:460px;position:relative;color:#fff;background:rgba(102,198,255,1);margin:auto 0 3em auto;}
.pater:hover,.pater:focus{color:#fff;outline:none;}
.pater::after{content:'Sponsored by';position:absolute;top:3.5em;left:4em;font-size:0.65em;letter-spacing:2px;text-transform:uppercase;font-weight:bold;}
@media screen and (min-width:50em){.pater::before{content:'';position:absolute;background:url(../img/terminal.svg) no-repeat 0 0;background-size:contain;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;-webkit-transition:-webkit-transform 0.3s,opacity 0s 0.3s;transition:transform 0.3s,opacity 0s 0.3s;}
.pater:hover::before,.pater:focus::before{opacity:1;-webkit-transform:translate3d(-30px,30px,0);transform:translate3d(-30px,30px,0);-webkit-transition:-webkit-transform 0.3s cubic-bezier(.43,.04,.32,.97);transition:transform 0.3s cubic-bezier(.43,.04,.32,.97);}
}
.pater__img{display:block;width:50%;}
.pater__title{text-transform:uppercase;letter-spacing:1px;font-size:1.35em;margin:1em 0;}
.pater__desc{color:#3D3935;font-weight:600;line-height:1.1;margin:0;}
/* Colors */
/* 1 */
.anim--effect-1 .codrops-header__subbox{color:#605BD4;}
.anim--effect-1 .custom-select,.anim--effect-1 .codrops-links,.anim--effect-1 .pater{background:#605BD4;}
/* 2 */
.anim--effect-2 .codrops-header__subbox{color:#9cdab1;}
.anim--effect-2 .custom-select,.anim--effect-2 .codrops-links,.anim--effect-2 .pater{background:#9cdab1;}
/* 4 */
.anim--effect-4 .codrops-header__subbox{color:#999;}
.anim--effect-4 .custom-select,.anim--effect-4 .codrops-links,.anim--effect-4 .pater{background:#16161D;}
.anim--effect-4 .custom-select select{color:white;}
.anim--effect-4 .custom-select select option{color:black;}
.anim--effect-4 .custom-select::after{border-top-color:white;}
@media screen and (max-width:50em){.codrops-header{width:100%;font-size:0.8em;-webkit-box-flex:0;-ms-flex:none;flex:none;margin:0;padding:0;min-height:0;}
.codrops-header__title{display:block;margin:0;width:100%;padding:1em;}
.codrops-header__subbox{max-width:none;width:100%;margin:0;text-align:left;font-size:1em;padding:1em;}
.codrops-links{position:relative;left:auto;bottom:auto;border-right:0;padding:0;width:100%;border:3px solid #fff;border-bottom:0;text-align:center;display:block;}
.pater{margin:0;max-width:none;font-size:0.85em;padding:2.5em 1em 1em;}
.pater::after{top:1em;left:1em;}
.pater__img{width:160px;}
.container .page{padding:2.85em;}
.container .pagenav{top:0.5em;left:0.5em;right:0.5em;bottom:0.5em;font-size:0.85em;}
}
@media screen and (max-width:40em){.pater__title{font-size:1em;}
.pater__img{max-width:75%;}
}

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