자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)

본 글의 내용은 자바스크립트(코드 포함)를 이용하여 3D 포토월을 구현하는 방법에 대한 내용으로, 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.

오늘 여러분과 공유하고 싶은 케이스는 멋진 3D 포토 월입니다

이 케이스는 주로 CSS3와 Native JS를 통해 구현되었습니다. 다음으로 이 효과를 구현하는 과정을 공유하겠습니다. 블로그에 로컬 영상을 올리는 방법을 몰라서 효과 스크린샷을 2개만 올릴 수 있습니다.

1. 정적 확산 효과 사진을 얻으려면

HTML 콘텐츠:

<div id="perspective">
        <div id="wrap">
            <img  src="/static/imghwm/default1.png"  data-src="img2/1.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/2.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/3.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/4.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/5.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/6.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/7.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/8.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/9.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></img>
            <img  src="/static/imghwm/default1.png"  data-src="img2/10.jpg"  class="lazy"   alt="자바스크립트로 3D 포토월을 구현하는 방법(코드 포함)" ></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(&#39;img&#39;);
        var deg=360/(oImgs.length);
        for(var i=0;i<oImgs.length;i++){
            oImgs[i].style.transform=&#39;rotateY(&#39;+i*deg+&#39;deg) translateZ(400px)&#39;;
            
        }
</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=&#39;rotateX(&#39;+roX+&#39;deg) rotateY(&#39;+roY+&#39;deg)&#39;;
                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 중국어 웹사이트의 기타 관련 기사를 참조하세요!