Желая скользящего раскрытия перехода путем ввода изображения из верхней части страницы - PullRequest
Новая
       24

Желая скользящего раскрытия перехода путем ввода изображения из верхней части страницы

1 голос
/ 26 июня 2019

Я хочу создать с помощью CSS только для Chrome, переход, который начинается с изображения, которое является полной шириной тела (независимо от того, что это такое), и это изображение скользит вниз сверху (не перекошено) и медленно нажимает все, что ниже, внизу. То есть воспринимайте это как бейсбольную карточку, которая скользит сверху вниз по экрану, пока не достигнет полной высоты. HTML в основном будет выглядеть так: 

<body>
  <img id='myimage' class='myimageclass' src=.../>
  <div>... lots more stuff
  ...
</body>

Я пытался изменить высоту, но это просто заставляет изображение начинаться с 0x0 и медленно увеличиваться до полного размера. Я надеюсь каким-то образом заставить его заполнить всю ширину тела и просто скатиться вниз, пока он не будет полностью раскрыт.

Вот мой нерабочий css. 

<style>
  .myimageclass {
    height: 0%;
  }
  .myimageclass.fadeIn {
    height: 100%;
    transition: 2.0s height;
  }
</style>

В моем onReady есть что-то, что просто добавляет класс fadeIn к тегу изображения.

Ответы [ 2 ]

1 голос
/ 26 июня 2019

Вы можете использовать CSS-анимацию, чтобы анимировать свойство top элемента контейнера, эффективно перемещая весь фрагмент контента вниз по странице, сохраняя при этом относительные местоположения детей.

Это не идеально, но у него есть изображение, которое масштабируется до ширины устройства. Он работает в Chrome, но вы все равно можете добавить префиксы поставщиков в свойство animation.

Ключ к анимации, запускаемой один раз: animation-fill-mode: forwards. 

$(document).ready(() => {
  $('.slide').addClass('slide-anim');
});
html,
body {
  padding: 0;
  margin: 0;
}

.slide {
  position: relative;
  top: -200px;
}

.slide-anim {
  animation: slideDown 1s linear forwards;
}

.slide-image {
  display: block;
  height: auto;
  width: 100%;
}

@keyframes slideDown {
  from {
    top: -200px;
  }
  to {
    top: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="slide">
  <image class="slide-image" src="https://via.placeholder.com/800x200.jpg" />
  <div>
    hello page content
  </div>
</main>

Потому что вы спросили ...

Анимация работает путем смещения содержимого страницы на величину, равную высоте (отображаемой или встроенной) изображения. Указанное значение CSS top должно равняться этой высоте (я полагаю, положительное значение bottom достигло бы того же эффекта). Вот изображение, где x = top смещение И высота изображения (черный - <html>, а синий - <main>): enter image description here

Если вы знаете высоту изображения, вы можете подключить его как значение в пикселях (в данном случае 200px, потому что оно хорошо вписывается в панель предварительного просмотра SO). Если вы знаете размер экрана, который вы хотели бы занять, вы можете использовать vh. Если вы ничего не знаете, я уверен, что где-то есть умное решение:)

0 голосов
/ 27 июня 2019

Вот мой окончательный код, но у @frish все верно 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }

      .slide {
        position: relative;
        top: -50vh;
        animation: slideDown 4s linear forwards;
      }

      .slide-image {
        background-image: url("https://via.placeholder.com/800x800.jpg");
        background-size: cover;
        height: 50vh;
        width: 100vw;
      }

      @keyframes slideDown {
        from {
          top: -50vh;
        }
        to {
          top: 0;
        }
      }
    </style>

    <script type="application/javascript">
      $(document).ready(function() {
        $("#myimage").addClass("slideDown");
      });
    </script>
  </head>
  <body class="slide">
      <div>
        <img src="stars.jpeg" class="slide-image" id="myimage" />
      </div>
      <hr />
      <br />
      <img src="stars.jpeg" />

  <span>text of page</span>
  </body>
</html>
...