js réalise des rendus d'affichage de murs de photos super cool avec les compétences de download_javascript du code source

Il s'agit d'un effet d'affichage de mur de photos super cool. De nombreuses photos sont combinées avec des effets de fondu, de rotation, de zoom, d'inclinaison et 3D. Les photos sont rapidement coupées à partir de la gauche, pivotées avec un effet 3D et finalement disposées soigneusement sur le mur de photos. Les utilisateurs ont montré des effets d'affichage de murs de photos sympas.

Voir la démo Télécharger le code source

HTML

Cet article utilise des exemples pour partager avec vous l'effet cool du mur de photos. Cet effet repose sur jQuery et des plug-ins d'assistance, donc ces deux fichiers sont chargés en premier.

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

Ensuite, nous plaçons le code suivant à l'endroit où nous devons afficher le mur de photos :

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

CSS

CSS définit le style de base du mur de photos, la disposition des photos et le style des boutons.

.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

Nous chargeons d'abord dynamiquement 50 photos sur la page, et les sources des photos proviennent d'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); 

Lorsque vous cliquez sur le bouton, les 50 images subissent différents degrés de déformation, de zoom, de transition et d'effets de fondu car il est temps de passer au mur de photos suivant. Lorsque toutes ces actions sont terminées, l'effet d'animation du mur de photos est activé. le mur de photos commence et la fonction storm() est appelée.

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

La fonction personnalisée storm() complète la rotation angulaire et le déplacement de l'axe Z de chaque photo. Elle est combinée avec CSS3 pour produire un effet 3D, puis appelle l'assouplissement pour obtenir l'effet tampon, rendant l'ensemble du mur de photos très découpé. en douceur. Veuillez consulter le 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' 
    }) 
  }) 
}