js realisiert supercoole Fotowand-Display-Renderings mit Quellcode-Download_Javascript-Kenntnissen

Dies ist ein supercooler Fotowand-Anzeigeeffekt. Viele Fotos werden mit Fade-, Rotations-, Zoom-, Neige- und 3D-Effekten kombiniert. Die Fotos werden schnell von links ausgeschnitten, mit einem 3D-Effekt versehen und schließlich ordentlich auf der Fotowand angeordnet . Benutzer zeigten coole Fotowand-Displayeffekte.

Demo ansehen Quellcode herunterladen

HTML

In diesem Artikel werden Beispiele verwendet, um Ihnen den coolen Fotowandeffekt vorzustellen. Dieser Effekt basiert auf jQuery und Easing-Plug-Ins, daher werden diese beiden Dateien zuerst geladen.

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

Als nächstes platzieren wir den folgenden Code dort, wo wir die Fotowand anzeigen müssen:

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

CSS

CSS definiert den Grundstil der Fotowand, die Fotoanordnung und den Button-Stil.

.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

Zuerst laden wir dynamisch 50 Fotos auf die Seite, und die Fotoquellen stammen aus dem 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); 

Wenn Sie auf die Schaltfläche klicken, werden die 50 Bilder unterschiedlich stark verformt, vergrößert, überblendet und ausgeblendet, da es Zeit ist, zur nächsten Fotowand zu wechseln Die Fotowand beginnt und die Funktion „storm()“ wird aufgerufen.

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

Die benutzerdefinierte Funktion Storm () vervollständigt die Winkeldrehung und Z-Achsen-Verschiebung jedes Fotos. Sie wird mit CSS3 kombiniert, um einen 3D-Effekt zu erzeugen, und ruft dann die Beschleunigung auf, um den Puffereffekt zu erzielen, wodurch die gesamte Fotowand sehr geschnitten wird reibungslos. Bitte beachten Sie den Code:

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