js는 소스 코드 다운로드_javascript 기술을 사용하여 매우 멋진 포토 월 디스플레이 렌더링을 실현합니다.

이것은 매우 멋진 사진 벽 디스플레이 효과입니다. 많은 사진이 페이드, 회전, 확대/축소, 기울기 및 3D 효과와 결합되어 있습니다. 사진은 왼쪽에서 빠르게 자르고 회전된 3D 효과를 거쳐 사진 벽에 깔끔하게 배열됩니다. . 사용자들은 멋진 포토월 디스플레이 효과를 선보였습니다.

데모 보기 소스 코드 다운로드

HTML

이 기사에서는 멋진 포토 월 효과를 공유하기 위해 예제를 사용합니다. 이 효과는 jQuery 및 이징 플러그인을 사용하므로 이 두 파일이 먼저 로드됩니다.

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

JS

먼저 페이지에 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 효과를 생성한 다음 easing을 호출하여 버퍼링 효과를 구현하여 전체 사진 벽을 매우 잘립니다. 원활하게 코드를 참조하세요:

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