CSS3 を使用して不規則な画像の切り替え効果を作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 を使用して不規則な画像の切り替え効果を作成する方法

php中世界最好的语言

Nov 25, 2017 am 10:24 AM

csscss3

CSS3 を使用して不規則な画像の切り替え効果を作成する方法のソースコードを提供します。必要な友達はそれを使用できます。

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

不規則な画像の切り替え特殊効果を生成するコードは以上です。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3メディアクエリの使用方法

HTMLのWeb標準とは

CSS3でレスポンシブレイアウトを作成する方法

以上がCSS3 を使用して不規則な画像の切り替え効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

アンカーポジショニングは、ソースの順序を気にしませんApr 29, 2025 am 09:37 AM

アンカーの位置決めがHTMLソースの順序を避けているという事実は、コンテンツとプレゼンテーションの間の懸念の別の分離のため、非常にCSS-Yです。

マージンは何ですか：40px 100px 120px 80pxは意味しますか？Apr 28, 2025 pm 05:31 PM

記事では、CSSマージンプロパティ、特に「マージン：40px 100px 120px 80px」、そのアプリケーション、およびWebページレイアウトへの影響について説明します。

さまざまなCSSボーダープロパティとは何ですか？Apr 28, 2025 pm 05:30 PM

この記事では、カスタマイズ、ベストプラクティス、および応答性に焦点を当てたCSSボーダープロパティについて説明します。主な議論：Border-Radiusは、レスポンシブデザインに最も効果的です。

CSSの背景とは何ですか、プロパティをリストしますか？Apr 28, 2025 pm 05:29 PM

この記事では、CSSのバックグラウンドプロパティ、Webサイトの設計の強化における使用、および避けるべき一般的な間違いについて説明します。重要な焦点は、バックグラウンドサイズを使用したレスポンシブデザインです。

CSS HSLの色とは何ですか？Apr 28, 2025 pm 05:28 PM

記事では、CSS HSLの色、Webデザインでの使用、およびRGBよりも利点について説明します。主な焦点は、直感的な色の操作を通じて設計とアクセシビリティを向上させることです。

CSSにコメントを追加するにはどうすればよいですか？Apr 28, 2025 pm 05:27 PM

この記事では、CSSでのコメントの使用について説明し、シングルラインとマルチラインのコメント構文を詳述しています。コメントはコードの読みやすさ、保守性、コラボレーションを強化するが、適切に管理されていないとウェブサイトのパフォーマンスに影響を与える可能性があると主張しています。

CSSセレクターとは何ですか？Apr 28, 2025 pm 05:26 PM

この記事では、HTML要素のスタイリングのCSSセレクター、その種類、および使用法について説明します。 IDとクラスのセレクターを比較し、複雑なセレクターでパフォーマンスの問題に対処します。

どのタイプのCSSが最優先事項を保持していますか？Apr 28, 2025 pm 05:25 PM

この記事では、CSSの優先順位について説明し、特異性が最も高いインラインスタイルに焦点を当てています。 CSS競合を管理するための特異性レベル、オーバーライド方法、およびデバッグツールを説明します。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。