suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit CSS3 Umschalteffekte für unregelmäßige Bilder

So erstellen Sie mit CSS3 Umschalteffekte für unregelmäßige Bilder

php中世界最好的语言
php中世界最好的语言Original
2017-11-25 10:24:192322Durchsuche

Ich bringe Ihnen einen Quellcode zur Verwendung von CSS3 zum Erstellen von Umschalteffekten für unregelmäßige Bilder. Freunde in Not können ihn verwenden. 

<!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>

Das sind die Codes zum Erzeugen von Schaltspezialeffekten für unregelmäßige Bilder. Für weitere spannende Inhalte beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS3-Medienabfragen

Was sind Webstandards in HTML

So erstellen Sie ein responsives Layout mit CSS3

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 Umschalteffekte für unregelmäßige Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erstellen Sie mit CSS3 Textanimationen unter LichtbeleuchtungNächster Artikel：So erstellen Sie mit CSS3 Textanimationen unter Lichtbeleuchtung

In Verbindung stehende Artikel

Mehr sehen