Question

我有一个小问题，我尝试为div滚动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;
}

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

Answer 1

问题是image-1的转换属性在百分比值之间缺少逗号。

尝试在transform属性中添加逗号，例如：transform: translate(-50%, -50%);

这将使图像在第一次加载时居中，但是您必须调整top属性以及JS中的某些逻辑。

或者，您可以简单地更改image-1的属性，例如：transform: translate(-50%);，不带Y轴。您也可以用相同的方式调整其他图像。

填充页面时违反位置

1 个答案: