js实现图形文字粒子变换过渡效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现图形文字粒子变换过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en" class="no-js">

	<head>

		<meta charset="UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr-2.js"></script>
<style>
    .ip-slideshow-wrapper,
.ip-slideshow {
	position: relative;
	background: #f1c40f;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.ip-nav-left,
.ip-nav-right {		
	width: 80px;
	height: 80px;
	top: 50%;
	margin-top: -40px;
	z-index: 100;		
	position: absolute;
	border: 6px solid #fff;
	border-radius: 50%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;				
}
			
.ip-nav-left {
	left: 20px;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0;
}
				
.ip-nav-right {
	right: 20px;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
	opacity: 0;
}

.ip-nav-left:hover, 
.ip-nav-right:hover {		
	background-color: rgb(255, 165, 0);
	cursor: pointer;
}

.ip-nav-left:after,
.ip-nav-right:after {
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: 'Lato', sans-serif;		
	font-size: 70px;
	line-height: 62px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
				
.ip-nav-left:after {		
	content: '<';						
}
				
.ip-nav-right:after {		
	content: '>';
}
	
.ip-nav-show {			
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
	opacity: 1;			
}
</style>

	</head>

	<body>

		<div class="container">



			<div class="ip-slideshow-wrapper">

				<nav>

					<span class="ip-nav-left"></span>

					<span class="ip-nav-right"></span>

				</nav>

				<div class="ip-slideshow"></div>

			</div>

		</div><!-- /container -->

<script>
    /*
 * Copyright MIT © <2013> <Francesco Trillini>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and 
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
 * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
 * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
var self = window;
 
;(function(self) {
		
	var canvas,
		context, 
		particles = [], 
		text = [], 
		nextText = [], 
		shape = {}, 
		mouse = { x: -99999, y: -99999 }, 
		currentTransition = 'circle', 
		left, right, 
		layout = 0, 
		type = ['circle', 'ovals', 'drop', 'ribbon'], 
		FPS = 60,
		
		/*
		 * List words.
		 */
		
		words = [ 'circle', 'ovals', 'drop', 'ribbon' ],
		
		/*
		 * List colors.
		 */
		
		colors = {
			circle: [ '#e67e22', '#2c3e50' ],
			ovals: [ '#c0392b', '#ff7e15' ],
			drop: [ '#1d75cf', '#3a5945' ],
			ribbon: [ '#702744', '#f98d00' ]
		};
	
	/*
 	 * Init.
	 */
	
	function init() {
		
		var slideshowContainer = document.querySelector('.ip-slideshow');
		
		canvas = document.createElement('canvas');
					
        canvas.width = innerWidth;
		canvas.height = 500;
		
        slideshowContainer.appendChild(canvas);

		// Browser supports canvas?
		if(!!(capable)) {
		
			context = canvas.getContext('2d');
		
			// Events
			if('ontouchmove' in window) {
				canvas.addEventListener('touchup', onTouchUp, false);
				canvas.addEventListener('touchmove', onTouchMove, false);	
			}
			else {
				canvas.addEventListener('mousemove', onMouseMove, false);
			}
			
			// Arrows
			handleClick('bind', 'left');
			handleClick('bind', 'right');
			
			window.onresize = onResize;
			
			createParticles();

			// Arrows elements
			left = document.querySelector('.ip-nav-left');
			right = document.querySelector('.ip-nav-right');

			// Show right arrow
			right.classList.add('ip-nav-show');
		
		}
		else {
			console.error('Sorry, switch to a better browser to see this experiment.');
		}
        
	}
	
	/*
	 * Checks if browser supports canvas element.
	 */
	
	function capable() {
		return canvas.getContext && canvas.getContext('2d');
	}
	
	/*
	 * On resize window event.
	 */
	
	function onResize() {
	
		canvas.width = window.innerWidth;
		canvas.height = 500;
		
		// Reset the text particles, and align again on the center of screen
		nextText = [];
		updateText();
					
	}
	
	function scrollX() {
		return window.pageXOffset || window.document.documentElement.scrollLeft; 
	}
	
	function scrollY() {
		return window.pageYOffset || window.document.documentElement.scrollTop;
	}

	/*
	 * Mouse move event.
	 */
	
	function onMouseMove(event) {
		event.preventDefault();		
		mouse.x = event.pageX - ( scrollX() + canvas.getBoundingClientRect().left );
		mouse.y = event.pageY - ( scrollY() + canvas.getBoundingClientRect().top );
	}
	
	/*
	 * Touch up event.
	 */
	
	function onTouchUp(event) {
		event.preventDefault();	
		// Reset mouse position
		mouse = { 
			x: -99999, 
			y: -99999 
		};
	}
	
	/*
	 * Touch move event.
	 */
	
	function onTouchMove(event) {
		event.preventDefault();	
		mouse.x = event.touches[0].pageX - ( scrollX() + canvas.getBoundingClientRect().left );
		mouse.y = event.touches[0].pageY - ( scrollY() + canvas.getBoundingClientRect().top );
	}
	
	/*
	 * Left click event.
	 */
	
	function onLeftClick(event) {
		
		event.preventDefault();
					
		currentTransition = type[Math.max(0, --layout)];
		
		// Reset towards points, and fill with new
		nextText = [];
		updateText();

		if(layout === 0) {
			left.classList.remove('ip-nav-show');	
			handleClick('unbind', 'left');
			return;
		}
		
		if(layout === type.length - 2) {
			right.classList.add('ip-nav-show');
			handleClick('bind', 'right');
		}
					
	}
	
	/*
	 * Right click event.
	 */
	
	function onRightClick(event) {
		
		event.preventDefault();
							
		currentTransition = type[Math.min(type.length, ++layout)];

		// Reset towards points, and fill with new
		nextText = [];
		updateText();
				
		if(layout === 1) {
			left.classList.add('ip-nav-show');
			handleClick('bind', 'left');
		}
		if(layout === type.length - 1) {	
			right.classList.contains('ip-nav-show') ? right.classList.remove('ip-nav-show') : null;
			handleClick('unbind', 'right');
		}
				
	}
	
	/*
	 * Handle click events for arrows.
	 */
	
	function handleClick(action, type) {
	
		var direction = type === 'left' ? onLeftClick : onRightClick;
	
		switch(action) {
		
			case 'bind':
			
				document.querySelector('.ip-nav-' + type).addEventListener('touchstart', direction, false);
				document.querySelector('.ip-nav-' + type).addEventListener('click', direction, false);
				document.querySelector('.ip-nav-' + type).style.cursor = 'pointer';
				break;
				
			case 'unbind':
			
				document.querySelector('.ip-nav-' + type).removeEventListener('touchstart', direction, false);
				document.querySelector('.ip-nav-' + type).removeEventListener('click', direction, false);
				document.querySelector('.ip-nav-' + type).style.cursor = 'default';
				break;
				
			default: break;
		
		}
	
	}
	
	/*
	 * Create particles.
	 */
	
	function createParticles() {
			
		for(var quantity = 0, len = 200; quantity < len; quantity++) {
				
			var x, y, steps, 
			
			steps = Math.PI * 2 * quantity / len;
			
			x = canvas.width * 0.5 + 10 * Math.cos(steps);
			y = 180 + 10 * Math.sin(steps);
			
			var radius = randomBetween(0, 12);
			var hasBorn = radius > 0 || radius < 12 ? false : true;
			
			var color = colors.circle[~~(Math.random() * colors.circle.length)];
			
			particles.push({
			
				x: x,
		.........完整代码请登录后点击上方下载按钮下载查看