3D映像デモンストレーションを実現するコツを伝授

この記事では3D写真の作り方を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. 親コンテナを作成し、すべての写真を一緒に積み重ねます。

コードは次のとおりです (html):

  <div>
      <!-- 父容器，相当于把所有图片都放在一起 -->
    <div>
      <img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="2.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="6.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      <img  src="/static/imghwm/default1.png" data-src="8.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >

      <a>
        <img  src="/static/imghwm/default1.png" data-src="7.jpg" class="lazy" alt="3D映像デモンストレーションを実現するコツを伝授" >
      </a>
  

      <!-- <video controls autoplay="autoplay" loop>
        <source src="8.jpg" type="video/mp4">
      </video> -->

      <p>3D Tiktok Carousel</p>
    </div>
    <div></div>
  </div>

2. すべての写真に回転アニメーションを追加します。

コードは次のとおりです (js):

function init(delayTime) {
  // 给所有的图片加动画
  for (var i = 0; i <h2 id="マウス-イベントを監視します">3. マウス イベントを監視します</h2><p>コードは次のとおりです (js): </p><pre class="brush:php;toolbar:false">// 滚轮滚动
// 监听鼠标滚轮事件，该函数不用调用直接生效
document.onmousewheel = function(e){
    // console.log(e)
    e = e || window.event
    var d  = e.wheelDelta / 10 || -e.detail
    radius += d
    init(1)

} 
var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;
// 鼠标拖动页面
document.onpointerdown = function(e){
    // console.log(e);
    e = e || window.event//防止出错,如果e不存在，则让window.event为e
    var sX = e.clientX,
    sY = e.clientY
    //监听鼠标移动函数
    this.onpointermove = function(e){
        console.log(e);
        e = e || window.event//防止出错,如果e不存在，则让window.event为e
        var nX = e.clientX,
            nY = e.clientY;
        desX = nX - sX;//在x轴上滑动的距离
        desY = nY - sY;
        tX += desX * 0.1
        tY += desY * 0.1
        // 让页面跟着鼠标动起来
        applyTransform(oDarg)
    }
    this.onpointerup = function(e){
        //每个多久实现一次setInterval
        oDarg.timer = setInterval(function(){
            desX *= 0.95
            desY *= 0.95
            tX += desX * 0.1
            tY += desY * 0.1
            applyTransform(oDarg)
            playSpin(false)
            if(Math.abs(desX)  180)tY = 180
    if(tY <p> [推奨学習: <a href="https://www.php.cn/course/list/2.html" target="_blank">JavaScript 上級チュートリアル</a>]</p>

以上が3D映像デモンストレーションを実現するコツを伝授の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。