jquery - 使用 JQuery 转换 Translate 3d

标签 jquery animation scroll onscroll translate3d

我有一个小问题 我尝试在滚动时为 div 制作动画 但看起来我在某个地方犯了错误 一开始，加载页面时，定位不会发生在窗口的中心，正如我所指出的，而是向左偏移 这是我的代码 如果有人知道或看到什么问题将不胜感激

$(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();
        }

    });
  
});
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{
  
}
<!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>

最佳答案

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

$(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();
        }

    });
  
});
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{
  
}
<!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 - 使用 JQuery 转换 Translate 3d，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55112530/

上一篇：jquery - 提交表单之前检查互联网连接

下一篇：jquery 自动完成，字体很棒

相关文章：

java - Android Spinner 包含很长的文本

html - $anchorScroll 效果与鼠标滚动而不是单击 Angular

javascript - Kendo UI 自动完成 全选

javascript - 为什么 .ajax 总是转到成功处理程序？

list - SwiftUI:列表中的动画圆圈

ios - 如何在路径末尾停止具有负时间偏移的 CAKeyframeAnimation

CSS 过渡

vb.net - 自动滚动到由 backgroundworker 更新的多行文本框的底部

javascript - 根据 innerHTML 显示/隐藏 HTML 元素

javascript - 全屏背景上的热点，背景位置为 : center

©2024 IT工具网  联系我们