Способ добавить элемент при перемещении вниз / переводе сверху? - PullRequest
Новая
       8

Способ добавить элемент при перемещении вниз / переводе сверху?

0 голосов
/ 10 июня 2018

Я пытаюсь найти способ, чтобы первый заголовок и абзац определенной веб-страницы одновременно переводились на место сверху при вставке.

Я рассмотрел использование @keyframesчто определенно похоже на решение.Но с учетом вышесказанного я не смог найти способ перевести элементы без указания заданного расстояния для перевода.Вместо этого я просто хочу перевести элементы сверху, в их текущее место (или где они были бы в противном случае).

Вот мой сайт для справки: http://thefloodplains.com/About.html. У меня есть второйраздел с постепенным увеличением (без перевода), но я хочу, чтобы верхний раздел постепенно исчезал сверху.

В основном я хочу сделать следующее: https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_keyframes,, но без указанного количествапикселей для перевода - я просто хочу перевести его сверху в его текущее местоположение.

Вот еще один подобный пример, но я не хочу эффект затухания (первый): https://codepen.io/kianoshp/pen/PPeWzb.

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Любая помощь будет принята с благодарностью.Хорошего дня!

1 Ответ

0 голосов
/ 11 июня 2018 

.box {
  height: 20rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  100% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }
}

h {
  font-size: 45px;
  color: #00A5D1;
  font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
  position: absolute;
  top: 5rem;
  opacity: 1;
  left: 0;
  right: 0;  
  display: flex;
  justify-content: center;
  animation-name: topFadeOut;
  animation-duration: 5s;
}
  <section class="box">
    <h>The Floodplains</h>
  </section>
...