文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >使用JQuery变换平移3d

问使用JQuery变换平移3d
EN

Stack Overflow用户
提问于 2019-03-12 08:51:17
回答 1查看 2.3K关注 0票数 2

我有一个小问题，我试图在滚动上动画div，但看起来我在一开始就犯了一个错误，当加载页面时，定位不会发生在窗口的中心，正如我所指出的，但如果有一个偏移量到左边，这是我的代码，如果有人知道或看到这个问题将非常感激

​

代码语言：javascript
运行
复制
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-1").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
      var img = $('.image-1');

      $(window).scroll(function(){
          if ($(window).scrollTop() > 400) {
              img.fadeOut();
          } else {
              img.fadeIn();
          }

      });
    
  });



  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-2").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
    var img = $('.image-2');

    $(window).scroll(function(){
        if ($(window).scrollTop() > 1200) {
            img.fadeOut();
        } else {
            img.fadeIn();
        }

    });
  
});



$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-3").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
    var img = $('.image-3');

    $(window).scroll(function(){
        if ($(window).scrollTop() > 800) {
            img.fadeOut();
        } else {
            img.fadeIn();
        }

    });
  
});
代码语言：javascript
运行
复制
body{
    height: 6000px;
    width: 80%;
}

.image-4, .image-5, .image-6, .image-7{
    width: 450px;
    height: 300px;
}
.image-2{
    position: fixed;
    top: 30%;
    left: 60%;
    width: 20%;
    height: 25%;
}
.image-3{
    position: fixed;
    top: 30%;
    left: 40%;
    width: 20%;
    height: 25%;
}
.container{
    display: flex;
   
}
.image-1{
    position: fixed;
    top: 30%;
    left: 50%;
    width: 30%;
    height: 35%;
    transform: translate(-50% -50%);
    -webkit-transform: translate(-50% -50%);
    -moz-transform: translate(-50% -50%);
    -ms-transform: translate(-50% -50%);
    -o-transform: translate(-50% -50%);
}
.first-block{
    position: relative;
    z-index: 20;
}
.second-block{
    position: relative;
    z-index: 15;
}
.image-4{
  
}
代码语言：javascript
运行
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <div class="container">
        <div class="first-block">
            <img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt="">
        </div>
        <div class="second-block">
            <img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt="">
            <img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt="">
        </div>

    </div>
</body>

</html>

​

jquery
animation
scroll
onscroll
translate3d
EN

回答 1

Stack Overflow用户

发布于 2019-03-12 14:42:10

检查包含图像的类的css解决方案-它将在文档准备就绪之前居中对齐所有图像。就这样!

​

代码语言：javascript
运行
复制
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-1").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
      var img = $('.image-1');

      $(window).scroll(function(){
          if ($(window).scrollTop() > 400) {
              img.fadeOut();
          } else {
              img.fadeIn();
          }

      });
    
  });



  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-2").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
    var img = $('.image-2');

    $(window).scroll(function(){
        if ($(window).scrollTop() > 1200) {
            img.fadeOut();
        } else {
            img.fadeIn();
        }

    });
  
});



$(window).scroll(function() {
    var scroll = $(window).scrollTop();
      $(".image-3").css({
          transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
          //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
          //"-webkit-filter": "blur(" + (scroll/200) + "px)",
          //filter: "blur(" + (scroll/200) + "px)"
      });
  });
  $(document).ready(function () {
    var img = $('.image-3');
    $(window).scroll(function(){
        if ($(window).scrollTop() > 800) {
            img.fadeOut();
        } else {
            img.fadeIn();
        }

    });
  
});
代码语言：javascript
运行
复制
body{
    height: 6000px;
    width: 80%;
}

.image-4, .image-5, .image-6, .image-7{
    width: 450px;
    height: 300px;
}
[class*="image-"] {
  transform: translate3d(-50%, 0%, 0);
}
.image-2{
    position: fixed;
    top: 30%;
    left: 60%;
    width: 20%;
    height: 25%;
}
.image-3{
    position: fixed;
    top: 30%;
    left: 40%;
    width: 20%;
    height: 25%;
}
.container{
    display: flex;
   
}
.image-1{
    position: fixed;
    top: 30%;
    left: 50%;
    width: 30%;
    height: 35%;
    transform: translate(-50% -50%);
    -webkit-transform: translate(-50% -50%);
    -moz-transform: translate(-50% -50%);
    -ms-transform: translate(-50% -50%);
    -o-transform: translate(-50% -50%);
}
.first-block{
    position: relative;
    z-index: 20;
}
.second-block{
    position: relative;
    z-index: 15;
}
.image-4{
  
}
代码语言：javascript
运行
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <div class="container">
        <div class="first-block">
            <img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt="">
        </div>
        <div class="second-block">
            <img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt="">
            <img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt="">
        </div>

    </div>
</body>

</html>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55112530

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档