js ソースコードで超クールなフォトウォールディスプレイレンダリングを実現 download

js ソースコードで超クールなフォトウォールディスプレイレンダリングを実現 download_javascript スキル

WBOY

リリース： 2016-05-16 15:37:09

オリジナル

1594 人が閲覧しました

これは非常にクールな写真ウォール表示効果です。多くの写真がフェード、回転、ズーム、傾き、3D 効果と組み合わされて、写真が左から素早く切り取られ、回転して、最後に写真の壁にきれいに配置されます。ユーザーはクールなフォトウォールディスプレイエフェクトを披露しました。

デモを見るソースコードをダウンロード

HTML

この記事では例を使用してクールなフォトウォールエフェクトを共有します。このエフェクトは jQuery とイージングプラグインに依存しているため、これら 2 つのファイルが最初に読み込まれます。

<script src="jquery.min.js"></script> 
<script src="jquery.easing.1.3.js"></script>

ログイン後にコピー

次に、フォトウォールを表示する必要がある場所に次のコードを配置します。

<div class="grid"></div> 
<div class="animate">点击看效果</div>

ログイン後にコピー

CSS

CSS は、フォトウォールの基本スタイル、写真の配置、ボタンのスタイルを定義します。

.grid { 
  width: 600px; height: 300px; margin: 100px auto 50px auto; 
  perspective: 500px; /*For 3d*/ 
} 
.grid img {width: 60px; height: 60px; display: block; float: left;} 
 
.animate { 
  text-transform: uppercase; 
  background: rgb(0, 100, 0); color: white; 
  padding: 10px 20px; border-radius: 5px; 
  cursor: pointer;margin:10px auto;width:100px;text-align:center; 
} 
.animate:hover {background: rgb(0, 75, 0);}

ログイン後にコピー

まず、ページに 50 枚の写真を動的に読み込みます。写真のソースはインターネットからのものです。

var images = "", count = 50; 
for(var i = 1; i <= count; i++) 
  images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />'; 
   $(".grid").append(images);

ログイン後にコピー

ボタンをクリックすると、50 枚の写真にさまざまな程度の変形、ズーム、トランジション、フェードアウト効果がかかります。これらのアクションがすべて完了すると、次の写真ウォールのアニメーション効果が切り替わります。フォトウォールが開始され、storm() 関数が呼び出されます。

var d = 0; //延时 
var ry, tz, s; //定义转换参数 
$(".animate").on("click", function(){ 
  $("img").each(function(){ 
    d = Math.random()*1000; //1ms to 1000ms delay 
    $(this).delay(d).animate({opacity: 0}, { 
      step: function(n){ 
        s = 1-n; //scale - will animate from 0 to 1 
        $(this).css("transform", "scale("+s+")"); 
      }, 
      duration: 1000 
    }) 
  }).promise().done(function(){ 
    storm(); //淡出效果全部完成时调用 
  }) 
})

ログイン後にコピー

カスタム関数 storm() は、各写真の角度回転と Z 軸変位を完了し、CSS3 と組み合わせて 3D 効果を生成し、イージングを呼び出してバッファリング効果を実現し、写真の壁全体を非常にカットします。コードをご覧ください:

function storm(){ 
  $("img").each(function(){ 
    d = Math.random()*1000; 
    $(this).delay(d).animate({opacity: 1}, { 
      step: function(n){ 
        //rotating the images on the Y axis from 360deg to 0deg 
        ry = (1-n)*360; 
        //translating the images from 1000px to 0px 
        tz = (1-n)*1000; 
        //applying the transformation 
        $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)"); 
      }, 
      duration: 3000, 
      easing: 'easeOutQuint' 
    }) 
  }) 
}

ログイン後にコピー