Comment utiliser CSS3 pour créer des effets de commutation pour des images irrégulières-tutoriel CSS-php.cn

Comment utiliser CSS3 pour créer des effets de commutation pour des images irrégulières

php中世界最好的语言

Libérer： 2017-11-25 10:24:19

original

2380 Les gens l'ont consulté

Je vous apporte un code source sur la façon d'utiliser CSS3 pour créer des effets de commutation pour les images irrégulières. Les amis dans le besoin peuvent l'utiliser.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TweenMax不规则图片切换特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container"> </div>
<script src=&#39;js/delaunay.js&#39;></script>
<script src=&#39;js/TweenMax.js&#39;></script>
<script>
 
const TWO_PI = Math.PI * 2;
 
var images = [],
    imageIndex = 0;
 
var image,
    imageWidth = 768,
    imageHeight = 485;
 
var vertices = [],
    indices = [],
    prevfrag = [],
    fragments = [];
 
var margin = 50;
 
var container = document.getElementById(&#39;container&#39;);
 
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
 
window.onload = function() {
    TweenMax.set(container, {perspective:500});
 
    // images from http://www.hdwallpapers.in
    var urls = [
            &#39;images/1.jpg&#39;,
            &#39;images/2.jpg&#39;,
            &#39;images/3.jpg&#39;,
            &#39;images/4.jpg&#39;
        ],
        image,
        loaded = 0;
    // very quick and dirty hack to load and display the first image asap
    images[0] = image = new Image();
        image.onload = function() {
            if (++loaded === 1) {
               
                for (var i = 1; i < 4; i++) {
                    images[i] = image = new Image();
 
                    image.src = urls[i];
                }
                placeImage();
            }
        };
        image.src = urls[0];
};
 
function placeImage(transitionIn) {
    image = images[imageIndex];
 
    if (++imageIndex === images.length) imageIndex = 0;
 
    var num = Math.random();
    if(num < .25) {
      image.direction = "left";
    } else if(num < .5) {
      image.direction = "top";
    } else if(num < .75) {
      image.direction = "bottom";
    } else {
      image.direction = "right";
    }
 
    container.appendChild(image);
    image.style.opacity = 0;
 
    if (transitionIn !== false) {
        triangulateIn();
    }
}
 
function triangulateIn(event) {
    var box = image.getBoundingClientRect(),
        top = box.top,
        left = box.left;
 
    if(image.direction == "left") {
      clickPosition[0] = 0;
      clickPosition[1] = imageHeight / 2;
    } else if(image.direction == "top") {
      clickPosition[0] = imageWidth / 2;
      clickPosition[1] = 0;
    } else if(image.direction == "bottom") {
      clickPosition[0] = imageWidth / 2;
      clickPosition[1] = imageHeight;
    } else if(image.direction == "right") {
      clickPosition[0] = imageWidth;
      clickPosition[1] = imageHeight / 2;
    }
   
 
    triangulate();
    build();
}
 
function triangulate() {
    for(var i = 0; i < 40; i++) {     
      x = -margin + Math.random() * (imageWidth + margin * 2);
      y = -margin + Math.random() * (imageHeight + margin * 2);
      vertices.push([x, y]);
    }
    vertices.push([0,0]);
    vertices.push([imageWidth,0]);
    vertices.push([imageWidth, imageHeight]);
    vertices.push([0, imageHeight]);
 
    vertices.forEach(function(v) {
        v[0] = clamp(v[0], 0, imageWidth);
        v[1] = clamp(v[1], 0, imageHeight);
    });
 
    indices = Delaunay.triangulate(vertices);
}
 
function build() {
    var p0, p1, p2,
        fragment;
 
    var tl0 = new TimelineMax({onComplete:buildCompleteHandler});
 
    for (var i = 0; i < indices.length; i += 3) {
        p0 = vertices[indices[i + 0]];
        p1 = vertices[indices[i + 1]];
        p2 = vertices[indices[i + 2]];
 
        fragment = new Fragment(p0, p1, p2);
 
        var dx = fragment.centroid[0] - clickPosition[0],
            dy = fragment.centroid[1] - clickPosition[1],
            d = Math.sqrt(dx * dx + dy * dy),
            rx = 30 * sign(dy),
            ry = 90 * -sign(dx),
            delay = d * 0.003 * randomRange(0.9, 1.1);
        fragment.canvas.style.zIndex = Math.floor(d).toString();
 
        var tl1 = new TimelineMax();
 
        if(image.direction == "left") {
          rx = Math.abs(rx);
          ry = 0;         
        } else if(image.direction == "top") {
          rx = 0;
          ry = Math.abs(ry);
        } else if(image.direction == "bottom") {
          rx = 0;
          ry = - Math.abs(ry);
        } else if(image.direction == "right") {
          rx = - Math.abs(rx);
          ry = 0;
        }
       
        tl1.from(fragment.canvas, 1, {
              z:-50,
              rotationX:rx,
              rotationY:ry,
              scaleX:0,
              scaleY:0,
              ease:Cubic.easeIn
         });
        tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);
     
        tl0.insert(tl1, delay);
 
        fragments.push(fragment);
        container.appendChild(fragment.canvas);
    }
}
 
function buildCompleteHandler() {
    // add pooling?
    image.style.opacity = 1;
    image.addEventListener(&#39;transitionend&#39;, function catchTrans() {
      fragments.forEach(function(f) {
          container.removeChild(f.canvas);
      });
 
      fragments.length = 0;
      vertices.length = 0;
      indices.length = 0;
 
      placeImage();
      this.removeEventListener(&#39;transitionend&#39;,catchTrans,false);
    }, false);
   
}
 
//////////////
// MATH UTILS
//////////////
 
function randomRange(min, max) {
    return min + (max - min) * Math.random();
}
 
function clamp(x, min, max) {
    return x < min ? min : (x > max ? max : x);
}
 
function sign(x) {
    return x < 0 ? -1 : 1;
}
 
//////////////
// FRAGMENT
//////////////
 
Fragment = function(v0, v1, v2) {
    this.v0 = v0;
    this.v1 = v1;
    this.v2 = v2;
 
    this.computeBoundingBox();
    this.computeCentroid();
    this.createCanvas();
    this.clip();
};
Fragment.prototype = {
    computeBoundingBox:function() {
        var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),
            xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),
            yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),
            yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);
 
         this.box = {
            x:Math.round(xMin),
            y:Math.round(yMin),
            w:Math.round(xMax - xMin),
            h:Math.round(yMax - yMin)
        };
 
    },
    computeCentroid:function() {
        var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
            y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
 
        this.centroid = [x, y];
    },
    createCanvas:function() {
        this.canvas = document.createElement(&#39;canvas&#39;);
        this.canvas.width = this.box.w;
        this.canvas.height = this.box.h;
        this.canvas.style.width = this.box.w + &#39;px&#39;;
        this.canvas.style.height = this.box.h + &#39;px&#39;;
        this.canvas.style.left = this.box.x + &#39;px&#39;;
        this.canvas.style.top = this.box.y + &#39;px&#39;;
        this.ctx = this.canvas.getContext(&#39;2d&#39;);
    },
    clip:function() {
        this.ctx.save();
        this.ctx.translate(-this.box.x, -this.box.y);
        this.ctx.beginPath();
        this.ctx.moveTo(this.v0[0], this.v0[1]);
        this.ctx.lineTo(this.v1[0], this.v1[1]);
        this.ctx.lineTo(this.v2[0], this.v2[1]);
        this.ctx.closePath();
        this.ctx.clip();
        this.ctx.drawImage(image, 0, 0);
        this.ctx.restore();
    }
};//@ sourceURL=pen.js
</script>
 
<div style="text-align:center;margin:10px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
</div>
</body>
</html>

Copier après la connexion

C'est tout pour les codes permettant de produire des effets spéciaux de commutation pour les images irrégulières. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment utiliser les requêtes multimédias CSS3

Que sont les standards Web en HTML

Comment créer une mise en page réactive avec CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!