So implementieren Sie eine 3D-Fotowand mit Javascript (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung einer 3D-Fotowand mit JavaScript (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Der heute mit Ihnen geteilte Fall ist eine coole 3D-Fotowand

Dieser Fall ist hauptsächlich durch CSS3 und It wird mit nativem JS implementiert. Als Nächstes werde ich Ihnen den Prozess zur Erzielung dieses Effekts erläutern. Ich weiß nicht, wie man lokale Videos in den Blog einfügt, daher kann ich nur zwei Screenshots der Effekte veröffentlichen.

1. Statische Spread-Effektbilder implementieren

HTML-Inhalt:

<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 style:

<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>

In diesem Teil sind mehrere Punkte zu beachten

(1) Nachdem Sie das Bild im selben Div positioniert haben, legen Sie das Transformationsstil-Attribut von fest das div in „preserve-3d“ und platzieren Sie dann das Bild entlang seiner Y-Achse Die Achse dreht sich um einen bestimmten Winkel. Die Summe der Drehwinkel dieser Bilder muss 360 Grad betragen, um nach dem Drehwinkel tatsächlich die Z-Achsenrichtung jedes Bildes zu ändern (z Die Achse steht immer senkrecht zum Bild und kann dann entlang der Z-Achse verschoben werden, was einer Spreizung des Div entspricht, ähnlich einem Karussell in einem Vergnügungspark. Abschließend wird ein verstreutes Rendering erstellt.

(2) Um einen 3D-Umgebungseffekt zu erstellen, verlassen Sie sich hauptsächlich auf den Transformationsstil in CSS3: Preserve-3d;Perspektive:800px;Here-Perspektive Das Attribut wird im äußeren p platziert, sodass beim Drehen des Div mit der Wrap-ID nicht der Eindruck entsteht, dass das vordere Bild groß und das hintere Bild klein ist, was hier möglicherweise schwierig zu verstehen ist Es ist die Tiefe der Szene. Nach der Einstellung dieses Attributs sehen die Bilder auf der Rückseite klein und die Bilder auf der Vorderseite groß aus, ähnlich wie bei den großen Fernsehern der Vergangenheit. Wenn die Szenentiefe hier im p von Wrap platziert wird, ist es beim Drehen so, als würde man den gesamten Fernseher drehen, anstatt den Inhalt in der Szene zu drehen.

2. Erkennen Sie die Drehung der Fotowand

Der Effekt dieses Teils besteht darin, dass sich die Fotowand auch in die Richtung dreht, in die Sie sich bewegen Je schneller du dich bewegst, desto schneller dreht es sich.

Implementierungsideen:

(1) Bestimmen Sie die Bewegungsgeschwindigkeit basierend auf der Entfernung der Punktänderung während der Mausbewegung

(2) Kann über den Ereignisparameter erhalten werden der Zeitfunktion Ereignisbezogene Informationen

event.clientX: Gibt den Abstand der aktuellen Maus von der linken Seite der Seite an

Event.clinetY: Gibt den Abstand der aktuellen Maus von an Seitenanfang

(3) Maus Während der Bewegung ändern sich diese beiden Werte ständig, sodass die Fotowand basierend auf der Differenz zwischen diesen beiden Werten gedreht werden kann. Je größer der Unterschied, desto schneller die Rotation.

JS implementiert Rotation

<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 implementiert Reflexion

<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. Rotationsträgheit Implementierung

Idee: Wenn die Maus angehoben wird, dreht sie sich mit einem immer kleineren Wert, implementiert durch einen Timer

JS-Implementierung der Trägheit

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)

Fügen Sie den obigen Code hinzu die onmouseup-Ereignisfunktion.

5. Eingangsanimation hinzufügen

Das letzte Bild kommt zuerst heraus, das erste Bild kommt zuletzt heraus, die Transformationsanimation wird entsprechend verzögert und der JS-Code wird wie folgt geändert

Das Obige ist eine grobe Beschreibung dieses Falles.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine 3D-Fotowand mit Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!