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() + canva.........完整代码请登录后点击上方下载按钮下载查看