Do you know these Web front-end effects?

Friendly note: all special effects are GIF image demo (all have source download), so this blog may load slowly, please understand.

Winter Is ComingIn my last blog postWinter is coming. Warm up with some special effectsI got a good response, so I decided to create another blog about special effects.

V1.0 is written first

All the special effects given in this article are shown to you after I upload some JS or CSS files that need to be introduced to local for testing. If you have any questions during debugging, feel free to ask them. Because each case code too much, so all of the code are given only part of the main code (facilitate everybody before get the source code, can better understand the special effects), of course you can also see the effects according to the lower right of the navigation bar directly, after in the rendering is interested in a special effects, here I will provide the source code to download the corresponding address.

V2.0 statistical figure

2.1 HTML code:

<table style="margin-left:auto; margin-right:auto;" > <tr> <td style="text-align:center;" > <h3 style="margin-bottom:0px;" >Example 1</h3> <div id="chart1" style="width:540px; height:250px; padding:5px;" ></div> <div style="text-align:right; padding-right:5px;" > Start delay: <input id="start" style="width:35px" value="0" /> Steps: <input id="steps" style="width:25px" value="135" /> Duration: <input id="duration" style="width:35px" value="3000" /> <i>ms</i> Direction: <select id="dir"><option value="right">Right</option><option value="left" selected>Left</option><option value="center">Center</option></select> <button id="bnt1" type="button">Animate</button> </div> </td> <td style="text-align:center;" > <h3 style="margin-bottom:0px;" >Example 2</h3> <div id="chart2" style="width:540px; height:250px; padding:5px;" ></div> <button id="bnt2" type="button">Draw Evolution Line</button> </td> </tr> </table>Copy the code

2.2. Js code:

function pInit(arr){ var x = []; x.push([arr[0][0], Math.max.apply(Math, arr.map(function(i) { return i[1];}))]); x.push([arr[0][0], null]); x.push([arr[0][0], Math.min.apply(Math, arr.map(function(i) { return i[1];}))]); for(var i = 0; i < arr.length; i++) { x.push([arr[i][0], null]); } data[serie].data = x; return $.plot(chart, data, g); } var d0 = data[serie]; var oData = d0.data; var plot = pInit(oData); var isLines = (data[serie].lines)? true:false; var steps = (data[serie].animator && data[serie].animator.steps) || 135; var duration = (data[serie].animator && data[serie].animator.duration) || 1000; var start = (data[serie].animator && data[serie].animator.start) || 0; var dir = (data[serie].animator && data[serie].animator.direction) || "right"; function stepData() { var Si = oData[0][0]; var Fi = oData[oData.length-1][0]; var Pas = (Fi-Si)/steps; var d2 = []; d2.push(oData[0]); var nPointPos = 1; lPoint = oData[0]; nPoint = oData[nPointPos]; for (var i = Si+Pas; i < Fi+Pas; i += Pas) { if (i>Fi) {i=Fi; } $("#m2").html(i); while (i > nPoint[0]) { lPoint = nPoint; nPoint = oData[nPointPos++]; } if (i == nPoint[0]) { d2.push([i,nPoint[1]]); lPoint = nPoint; nPoint = oData[nPointPos++]; } else { var a = ((nPoint[1]-lPoint[1]) / ((nPoint[0]-lPoint[0]))); curV = (a * i) + (lPoint[1] - (a * lPoint[0])); d2.push([i,curV]); } } return d2; }Copy the code

2.3. Code Effect:

2.4. Source code download:

Github.com/toutouge/We…

V3.0 image 3D switch

3.1 HTML code:

<div id="te-wrapper" class="te-wrapper">        
                    <div class="te-images">
                        <img src="images/1.jpg"/>
                        <img src="images/2.jpg"/>
                        <img src="images/3.jpg"/>
                        <img src="images/4.jpg"/>
                        <img src="images/5.jpg"/>
                    </div>
                    <div class="te-cover">
                        <img src="images/1.jpg"/>
                    </div>
                    <div class="te-transition">
                        <div class="te-card">
                            <div class="te-front"></div>
                            <div class="te-back"></div>
                        </div>
                    </div>                    
                </div>
Copy the code

3.2. The CSS code:

.te-card, .te-back, .te-front { width: 100%; height: 100%; position: absolute; } .te-card { -webkit-transform-style: preserve-3d; } .te-front, .te-back { -webkit-backface-visibility: hidden; }. Te-back {-webkit-transform: rotate3d(1,0,0,-180deg); }Copy the code

3.3. Js code:

showNext = function() { if( hasPerspective ) { if( $.inArray( type, wPerspective ) ! == -1 ) { $teWrapper.addClass('te-perspective'); } $teTransition.addClass('te-show'); $teCover.addClass('te-hide'); } updateImages(); }, updateImages = function() { var $back = $teTransition.find('div.te-back'), $front = $teTransition.find('div.te-front'); ( currentImg === imagesCount - 1 ) ? ( last_img = imagesCount - 1, currentImg = 0 ) : ( last_img = currentImg, ++currentImg ); var $last_img = $teImages.eq( last_img ), $currentImg = $teImages.eq( currentImg ); $front.empty().append('<img src="' + $last_img.attr('src') + '">'); $back.empty().append('<img src="' + $currentImg.attr('src') + '">'); $teCover.find('img').attr( 'src', $currentImg.attr('src') ); };Copy the code

3.4. Code effect:

3.5. Download source code:

Github.com/toutouge/We…

V4.0 lottery

4.1 HTML code:

The < div > < input type = "button" id = "start" value = "shake" / > < / div > <! <div class="odometer">111111111</div>Copy the code

4.2. The CSS code:

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  display: block;
  -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
Copy the code

4.3. Js code:

trigger = function(el, name) { var evt; if (document.createEvent ! = null) { evt = document.createEvent('HTMLEvents'); evt.initEvent(name, true, true); return el.dispatchEvent(evt); }}; now = function() { var _ref, _ref1; return (_ref = (_ref1 = window.performance) ! = null ? typeof _ref1.now === "function" ? _ref1.now() : void 0 : void 0) ! = null ? _ref : +(new Date); }; round = function(val, precision) { if (precision == null) { precision = 0; } if (! precision) { return Math.round(val); } val *= Math.pow(10, precision); Val + = 0.5; val = Math.floor(val); return val /= Math.pow(10, precision); };Copy the code

4.4. Code Effect:

4.5. Download source code:

Github.com/toutouge/We…

V5.0 turntable raffle

PS: This needs to be improved, temporarily not use, if there are useful and improved garden friends can share.

5.1 HTML code:

<canvas id="canvas" width="500" height="500"></canvas>
Copy the code

5.2. Js code:

_rotate: function () {
        this._options.spinTime += 30;
        if (this._options.spinTime >= this._options.spinTimeTotal) {
            this.stop();
            return;
        }
        var spinAngle = this._options.spinAngleStart - easeOut(this._options.spinTime, 0, this._options.spinAngleStart, this._options.spinTimeTotal);
        this._options.currentAngle += (spinAngle * Math.PI / 180);
        this._draw();
        var widget = this;
        this._options.spinTimeout = setTimeout(function () {
            widget._rotate();
        }, 30);
    },

    is_rotating: function () {
        return this._options.rotating;
    },

    spin: function () {
        this._options.rotating = true;
        this._options.spinAngleStart = Math.random() * 100 + 5 * Math.random() + 5 * Math.random() + 2 * Math.random();
        this._options.spinTime = 0;
        this._options.spinTimeTotal = Math.random() * 3000 + 4 * 1000 + 2 * Math.random();
        this._rotate();
    },

    stop: function () {
        this._options.rotating = false;
        clearTimeout(this._options.spinTimeout);
        this._draw();

        var degrees = this._options.currentAngle * 180 / Math.PI + 90;
        var arcd = this._options.arc * 180 / Math.PI;
        var index = Math.floor((360 - degrees % 360) / arcd);


        var keys = Object.keys(this.options.items);
        var key = keys[index];
        this.options.selected(key, this.options.items[key]);
    }
Copy the code

5.3. Code Effects:

5.4. Source code download:

Github.com/toutouge/We…

V6.0 various login loading

6.1 HTML code:

<form>
                <label>Name</label>
                <input type="text">
                <label>Email</label>
                <input type="text">
                <label>Phone</label>
                <input type="text">
                <button type="button" class="btn btn-primary" id="waitMe_ex">Submit</button>
            </form>
            
            <div class="controlContainer">
                <div>To start click Submit button</div>
                Effect
                <select id="waitMe_ex_effect">
                    <option>none</option>
                    <option selected>bounce</option>
                    <option>rotateplane</option>
                    <option>stretch</option>
                    <option>orbit</option>
                    <option>roundBounce</option>
                    <option>win8</option>
                    <option>win8_linear</option>
                    <option>ios</option>
                    <option>facebook</option>
                    <option>rotation</option>
                    <option>timer</option>
                    <option>pulse</option>
                    <option>progressBar</option>
                    <option>bouncePulse</option>
                    <option>img</option>
                </select>
                <button class="btn" id="waitMe_ex_close">STOP</button>
            </div>
Copy the code

6.2. The CSS code:

/* stretch */ .waitMe_container .waitMe_progress.stretch > div {width:1px; height:60px; margin:4px; Animation :stretch 1.2s infinite ease-in-out}.waitme_container.waitme_progress.stretch.waitme_progress_elem2 {animation-delay:-1s}.waitme_container.waitme_progress.stretch. WaitMe_progress_elem3 {animation-delay:-1s} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem4 {animation-delay:-.9s} .waitMe_container .waitMe_progress.stretch .waitMe_progress_elem5 {animation-delay:-.8s} @keyframes stretch { 0%, 40%, 100% {transform:scaleY(.4)} 20% {transform:scaleY(1)} } /* orbit */ .waitMe_container .waitMe_progress.orbit {width:40px; height:40px; margin:auto; animation:orbit_rotate 2s infinite linear} .waitMe_container .waitMe_progress.orbit > div {width:50%; height:50%; border-radius:50%; top:0; position:absolute; animation:orbit 2s infinite ease-in-out} .waitMe_container .waitMe_progress.orbit .waitMe_progress_elem2 {top:auto; bottom:0; animation-delay:-1s} @keyframes orbit_rotate { 100% {transform:rotate(360deg)} } @keyframes orbit { 0%, 100% {transform:scale(0)} 50% {transform:scale(1)} }Copy the code

6.3. Js code:

function waitMeClose() { var currentID = elem.attr('data-waitme_id'); elem.removeClass(elemClass + '_container').removeAttr('data-waitme_id'); elem.find('.' + elemClass + '[data-waitme_id="' + currentID + '"]').remove(); } if (methods[method]) { return methods[method].apply( this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || ! method) { return methods.init.apply(this, arguments); } $.event.special.destroyed = { remove: function(o) { if (o.handler) { o.handler(); }}};Copy the code

6.4. Code Effects:

6.5. Source code download:

Github.com/toutouge/We…

V7.0 doing Web version

7.1 HTML code:

<div class="s-page random-restored-page"> <h2 class="page-title">Some minimized App</h2> <div class="close-button s-close-button">x</div> </div> <div class="s-page custom-page"> <h2 class="page-title">Thank You! </h2> <div class="close-button s-close-button">x</div> </div> <div class="r-page random-r-page"> <div class="page-content"> <h2 class="page-title">App Screen</h2> <p> $text</p> </div> <div class="close-button r-close-button">x</div> </div>Copy the code

7.2. The CSS code:

. SlidePageInFromLeft {-webkit-animation: slidePageInFromLeft.8s Cubic - Bezier (.01,1,.22,.99) 1 0.25s normal forward; -O-animation: slidePageInFromLeft.8s Cubic - Bezier (.01,1,.22,.99) 1 0.25s normal forward; Animation: slidePageInFromLeft.8s Cubic - Bezier (.01,1,.22,.99) 1 0.25s normal forward}. Openpage {-webkit-animation: slidePageInFromLeft. RotatePageInFromRight 1s Cubic - Bezier (.66,.04,.36,1.03) 1 Normal forward; -O-animation: rotatePageInFromRight 1s Cubic - Bezier (.66,.04,.36,1.03) 1 Normal forward; Animation: rotatePageInFromRight 1s Cubic - Bezier (.66,.04,.36,1.03) 1 Normal forward}. SlidePageBackLeft {opacity: 1; left: 0; -webkit-animation: slidePageBackLeft .8s ease-out 1 normal forwards; -o-animation: slidePageBackLeft .8s ease-out 1 normal forwards; animation: slidePageBackLeft .8s ease-out 1 normal forwards } .slidePageLeft { opacity: 1; -webkit-transform: rotateY(0) translateZ(0); -ms-transform: rotateY(0) translateZ(0); -o-transform: rotateY(0) translateZ(0); transform: rotateY(0) translateZ(0); -webkit-animation: slidePageLeft .8s ease-out 1 normal forwards; -o-animation: slidePageLeft .8s ease-out 1 normal forwards; animation: slidePageLeft .8s ease-out 1 normal forwards } .fadeOutback { -webkit-animation: FadeOutBack 0.3s ease-out 1 Normal forward; -O-animation: fadeOutBack 0.3s ease-out 1 Normal forward; Animation: fadeOutBack 0.3s ease-out 1 Normal forward}Copy the code

7.3. Js code:

$('.tile').each(function(){
        var $this= $(this),
            page = $this.data('page-name'),
            bgcolor = $this.css('background-color'),
            textColor = $this.css('color');
            
            //if the tile rotates, we'll use the colors of the front face
            if($this.hasClass('rotate3d')) {
              frontface = $this.find('.front');
              bgcolor = frontface.css('background-color');
              textColor = frontface.css('color');
            }

            //if the tile has an image and a caption, we'll use the caption styles
            if($this.hasClass('fig-tile')) {
              caption = $this.find('figcaption');
              bgcolor = caption.css('background-color');
              textColor = caption.css('color');
            }

        $this.on('click',function(){
          $('.'+page).css({'background-color': bgcolor, 'color': textColor})
                     .find('.close-button').css({'background-color': textColor, 'color': bgcolor});
        });
    });
Copy the code

7.4. Code Effect:

7.5. Source code download:

Github.com/toutouge/We…

About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or direct private message I support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article [recommendation]. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \