js merealisasikan pemaparan paparan dinding foto yang hebat dengan kemahiran download_javascript kod sumber

Ini ialah kesan paparan dinding foto yang sangat hebat digabungkan dengan kesan pudar, putar, zum, senget dan 3D Foto dipotong dengan cepat dari kiri, kesan 3D diputar dan akhirnya disusun dengan kemas pada dinding foto . Pengguna menunjukkan kesan paparan dinding foto yang hebat.

Lihat demo Muat turun kod sumber

HTML

Artikel ini menggunakan contoh untuk berkongsi dengan anda kesan dinding foto yang menarik Kesan ini bergantung pada jQuery dan pemalam pelonggaran, jadi kedua-dua fail ini dimuatkan dahulu.

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

Seterusnya, kami meletakkan kod berikut di mana kami perlu memaparkan dinding foto:

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

CSS

CSS mentakrifkan gaya asas dinding foto, susunan foto dan gaya butang.

.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);} 

JS

Mula-mula kami memuatkan 50 foto secara dinamik pada halaman dan sumber foto adalah daripada Internet.

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

Apabila butang diklik, 50 gambar mengalami tahap ubah bentuk, zum, peralihan dan kesan pudar yang berbeza-beza kerana sudah tiba masanya untuk beralih ke dinding foto seterusnya Apabila semua tindakan ini selesai, kesan animasi daripada dinding foto bermula dan fungsi storm() dipanggil.

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(); //淡出效果全部完成时调用 
  }) 
}) 

Fungsi tersuai storm() melengkapkan putaran sudut dan anjakan paksi-Z setiap foto Ia digabungkan dengan CSS3 untuk menghasilkan kesan 3D, dan kemudian memanggil pelonggaran untuk mencapai kesan penimbalan, menjadikan keseluruhan dinding foto dipotong sangat. dengan lancar. Sila lihat kod:

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' 
    }) 
  }) 
}