자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)
- 不言원래의
- 2018-09-15 17:24:138402검색
본 글의 내용은 자바스크립트(코드 포함)를 이용하여 3D 포토월을 구현하는 방법에 대한 내용으로, 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.
오늘 여러분과 공유하고 싶은 케이스는 멋진 3D 포토 월입니다
이 케이스는 주로 CSS3와 Native JS를 통해 구현되었습니다. 다음으로 이 효과를 구현하는 과정을 공유하겠습니다. 블로그에 로컬 영상을 올리는 방법을 몰라서 효과 스크린샷을 2개만 올릴 수 있습니다.
1. 정적 확산 효과 사진을 얻으려면
HTML 콘텐츠:
<div id="perspective">
<div id="wrap">
<img src="img2/1.jpg"></img>
<img src="img2/2.jpg"></img>
<img src="img2/3.jpg"></img>
<img src="img2/4.jpg"></img>
<img src="img2/5.jpg"></img>
<img src="img2/6.jpg"></img>
<img src="img2/7.jpg"></img>
<img src="img2/8.jpg"></img>
<img src="img2/9.jpg"></img>
<img src="img2/10.jpg"></img>
</div>
</div> 스타일 스타일: <style>
*{margin:0;padding: 0;}
body{background: #000;}
#perspective{perspective: 800px;}
#wrap{
width: 245px;
height: 125px;
border:1px solid red;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-10deg)
}
#wrap img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 1px;
box-shadow: 0 0 2px #fff;
}
</style>JS
<script>
var oWrap=document.getElementById("wrap");
var oImgs=oWrap.getElementsByTagName('img');
var deg=360/(oImgs.length);
for(var i=0;i<oImgs.length;i++){
oImgs[i].style.transform='rotateY('+i*deg+'deg) translateZ(400px)';
}
</script> 이 부분에는 몇 가지 주의할 점이 있습니다
(1) 이미지를 동일한 div에 배치한 후 div의 변환 스타일 속성을 Preserve-3d로 설정한 다음 이미지를 y 방향으로 이동합니다. 축은 특정 각도로 회전합니다. 이러한 사진의 회전 각도의 합은 360도여야 하며, 회전 각도 이후에 원을 형성하려면 실제로 각 사진의 z축 방향을 변경해야 합니다. 축은 항상 그림에 수직입니다) 그런 다음 Z축을 따라 변위될 수 있습니다. 이는 놀이 공원의 회전목마와 유사하게 div를 펼치는 것과 같습니다. 마지막으로 분산된 렌더링이 형성됩니다.
(2) 3D 환경 효과를 구축하려면 주로 CSS3의 변환 스타일을 사용합니다. 보존-3d;원근감:800px;여기 원근감 속성은 외부 p에 배치되므로 ID가 Wrap인 div를 회전할 때 앞 그림은 크고 뒷 그림은 작아 보이지 않습니다. 여기서는 이해하기 어려울 수 있습니다. 장면의 깊이입니다. 이 속성을 설정하면 과거의 대형 TV처럼 뒤쪽의 사진은 작게 보이고 앞의 사진은 크게 보입니다. 여기서 랩의 p에 장면 깊이를 배치하면 회전할 때 장면의 콘텐츠를 회전시키는 것이 아니라 TV 전체를 회전시키는 것과 같습니다.
2. 포토월 회전 실현
이 부분의 효과는 마우스를 누르고 이동하면 이동하는 방향으로 포토월도 회전하며, 빠르게 움직일수록 더 빠르게 회전하는 것입니다. .
구현 아이디어 :
(1) 마우스 이동 중 점 변화의 거리를 기준으로 이동 속도를 판단
(2) 시간 함수의 이벤트 매개변수를 통해 이벤트 관련 정보를 얻을 수 있습니다.
Event.clientX: 현재 마우스와 페이지 왼쪽 사이의 거리를 나타냅니다.
Event.clinetY: 현재 마우스와 페이지 상단 사이의 거리를 나타냅니다.
(3) 마우스가 이동하는 동안 마우스를 사용하면 이 두 값이 계속 변경되며, 이 두 값의 차이에 따라 차이를 만들 수 있습니다. 사진 벽이 회전합니다. 차이가 클수록 회전 속도가 빨라집니다.
JS는 회전을 구현합니다
<script>
var nowX,nowY,lastX,lastY,minusX,minusY;
var roX=-10,roY=0;
document.onmousedown=function(ev){
ev = ev || window.event;
lastX=ev.clientX;
lastY=ev.clientY;
this.onmousemove=function(ev){
ev = ev || window.event;
//当前鼠标距离页面左边的距离
nowX=ev.clientX;
//当前鼠标距离页面上边的距离
nowY=ev.clientY;
//X方向上的差值
minusX=nowX - lastX;
//Y方向上的差值
minusY=nowY - lastY;
//X轴的旋转角度(乘0.1是防止旋转过快)
roX-=minusY*0.1;
//y轴的旋转角度(乘0.2是防止旋转过快)
roY+=minusX*0.2;
oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)';
lastX=nowX;
lastY=nowY;
}
this.onmouseup=function(){
//鼠标抬起，结束鼠标移动事件
this.onmousemove=null;
}
return false;
}
</script>3. CSS3는 반사를 구현합니다
<style>
#wrap img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 1px;
box-shadow: 0 0 2px #fff;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
}
</style>4. 회전의 관성 구현
아이디어: 타이머를 통해 점점 더 작은 값으로 회전합니다.
JS를 구현하여 관성을 구현합니다.
timer=setInterval(function(){
minusX*=0.95;
minusY*=0.95;
roY+=minusX*0.2;
roX-=minusY*0.1;
oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)';
if(Math.abs(minusX)<0.5 && Math.abs(minusY)<0.5){
clearInterval(timer);
}
},13)onmouseup 이벤트 함수에 위 코드를 추가합니다.
5. 입장 애니메이션 추가
마지막 사진이 먼저 나오고, 첫 번째 사진이 마지막에 나오고, 이에 따라 변환 애니메이션이 지연되며, JS 코드는 다음과 같이 수정됩니다
위 내용은 대략적인 내용입니다. 이 경우에 대해 설명합니다.
위 내용은 자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!