Нарушение позиционирования при заполнении страницы - PullRequest
Новая
       23

Нарушение позиционирования при заполнении страницы

1 голос
/ 13 марта 2019

У меня небольшая проблема. Я пытаюсь анимировать 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>

1 Ответ

0 голосов
/ 13 марта 2019

Проблема в том, что в свойстве transform изображения 1 отсутствует запятая между процентными значениями.

Попробуйте добавить запятую в свойстве transform, например: transform: translate(-50%, -50%);

Это будет центрировать изображение при первой загрузке, но вам придется настроить свойство top и, возможно, некоторую логику в вашем JS.

В качестве альтернативы, вы можете просто изменить свойство image-1, например: transform: translate(-50%);без оси Y.Вы также можете настроить другие изображения таким же образом.

...