[Перевод] Как использовать анимацию CSS для достижения эффекта скользящих картинок для отображения текста

Оригинальный адрес:Slide an Image to Reveal Text with CSS Animations

Оригинальный автор:Jesper Ekstrom

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:Fengziyin1234

Корректор:portandbridge, Baddyo

В этой статье я надеюсь привести вас к пониманиюCSS animation property, и подробно объясните мойперсональный сайтОдин из эффектов: текст появляется за движущимися объектами. Если вы хотите увидеть окончательный результат, вот одинпример.

Мы начнем здесь:

Пожалуйста, проверьте здесьJesper EkstromизRevealing Text Animation Part 4 - Responsiveкейс.

Даже если вы не очень заинтересованы в этом эффекте, это все равно будет хорошим упражнением для расширения ваших знаний CSS, и вы можете начать с этого эффекта для создания собственных анимационных эффектов. Что касается меня, то углубленное изучение анимации дало мне больше уверенности в своих способностях к CSS, сделало меня более изобретательным и заинтересовало фронтенд-разработку в целом.

вы готовы? Давайте начнем.

Шаг 1: Отметьте свой основной элемент

Прежде чем мы начнем анимировать, давайте сначала создадим родительский элемент, который будет содержать всю область просмотра. В этом элементе мы добавляем текст и изображения к двум элементам div, чтобы облегчить последующую настройку. HTML будет следующим:

<!-- 父容器 -->
<div class="container"> 
  <!-- 包含图片的 div -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- 包含将展示的文字的 div -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>

Мы будем использовать надежныйСоветы по конвертации, в родительском элементе используйте position: absolute; чтобы центрировать два элемента div по горизонтали и по вертикали в родительском контейнере. Поскольку мы хотим, чтобы наше изображение отображалось перед текстом, здесь мы увеличиваем изображение.z-indexстоимость.

/* 父元素占据整个页面。 */
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* 内含图片的 div  */
/* 居中小技巧：https://css-tricks.com/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2; /* 确保图片在上 */
}

/* 第一个 div 中的图片 */
.image-container img {
  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));
  height: 200px;
}

/* 包括将要被显示出来的文字的 div */
/* 同样的居中方法 */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* 将此 div 置于图片容器之下 */
  margin-left: -100px;
}

Мы не зарезервировали префиксы браузера во всех примерах в этой статье, но если вы используете эти эффекты в рабочей среде, обязательно рассмотрите возможность их добавления.

Теперь наш пример должен выглядеть так: элемент изображения поверх текстового элемента.

Пожалуйста, проверьте здесьRevealing Text Animation Part 1 - Mail Elementsкейс.

Шаг 2. Скройте текст за div

Чтобы наш текст отображался слева направо, мы.text-containerДобавьте еще один div в .

<!-- ... -->

  <!-- 包括将要被显示出来的文字的 div -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<!-- ... -->

Затем добавьте следующие свойства CSS и присвойте им значения:

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}

Как видите, этот div имеет белый фон, который сливается с родительским элементом, а текст прячется за ним.

Если мы попытаемся изменить длину этого div, текст начнет появляться. Вы можете попробовать это в нашем примере ниже:

Пожалуйста, проверьте здесьRevealing Text Animation Part 2 - Hiding Block.

Есть еще один способ добиться того же эффекта, не добавляя лишний div с фоном. Я расскажу об этом позже в статье. 🙂

Шаг 3: Определите ключевые кадры анимации

Теперь приступим к самой веселой части! мы будем использоватьanimation propertyи это@keyframesфункция, чтобы начать анимировать нашу цель. Начнем с создания двух разных@keyframes, один для наших изображений и один для нашего текста. код показывает, как показано ниже:

/* 把图片从左侧（-250px）滑到右侧（150px）*/
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}

/* 把目标缩小至消失（100% 到 0%）来滑动文字 */
@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}

рекомендую ставить все@keyframesДобавьте в начало файла CSS и структура файла станет лучше, конечно это только мои личные предпочтения.

я использую только@keyframesПричина небольшого процента процентных значений (в основном от 60% до 100%) заключается в том, что я решил анимировать оба объекта в один и тот же период времени, а не добавлять к ним одинanimation-delay.这只是我的个人喜好。如果你选择和我一样的方法，一定记得要为 0% 和 100% 设值；否则，动画效果就会开始循环或者是造成一些很奇怪的结果。

Чтобы включить в нашем классе@keyframes, нам нужно добавить свойство CSSanimationпри вызове нашего имени анимации. Например, чтобыimage-slideЧтобы добавить к элементу изображения, мы должны сделать это:

.image-container img {
  /* [动画名称] [动画时间] [动画变形方法] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}

@keyframesИмя используется так же, как при создании класса. Другими словами, не имеет значения, какое здесь имя анимации, просто убедитесь, что вы используете то же имя для элемента, для которого хотите использовать анимацию.

если здесьcubic-bezierНекоторые делают вашу голову большой, так что проверьте Мишель Баркерэта почта. Она подробно объяснила тему. Если это просто для целей демонстрации этой статьи, я думаю, что этого будет достаточно: это способ создать пользовательскую кривую анимации для всего движения объекта.cubic-bezier.comВеб-сайты — отличный сайт, который поможет вам сгенерировать эти значения (а не угадывать).

Ранее мы упоминали, что хотим избежать зацикливания анимации. Мы можем использоватьanimation-fill-modeподсвойство, чтобы заставить объект прекратить движение после того, как прогресс анимации достигнет 100%.

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}

Все идет нормально!

Пожалуйста, проверьте здесьRevealing Text Animation Part 3 - @keyframes.

Шаг 4: Достижение отзывчивости

Поскольку анимация основана на фиксированном размере (в пикселях), изменение ширины окна просмотра приведет к отклонению элементов, что невыгодно скрывать и показывать элементы в зависимости от их положения. Мы могли бы решить эту проблему, создав несколько анимаций для разных медиазапросов (что я и сделал изначально), но работать с таким количеством анимаций одновременно неинтересно. Мы можем использовать ту же анимацию, чтобы исправить это, изменив ее свойства в контрольной точке функции.

Например:

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* 改变动画的参数来适应大至 1000 像素的宽度 */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}

Вот и все. Все отзывчиво!

Пожалуйста, проверьте здесьRevealing Text Animation Part 4 - Responsive.

Альтернатива: используйте анимацию текста вместо непрозрачного элемента div.

Ранее я обещал, что представлю другой метод скрытого текста. Давайте представим это сейчас.

Вместо того, чтобы использовать совершенно новый div -<div class="fading-effect">, мы можем использовать небольшую практическую хитростьbackground-clipПоказать цвет фона через текст:

.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Прозрачный текст позволяет проникать цвету фона позади него, что может эффективно скрыть текст. И, поскольку текст скрыт фоном, мы можем изменить ширину фона и посмотреть, как обрезается текст по заданной ширине. Это также позволяет добавлять линейные градиенты к тексту и даже к фоновым изображениям.

Я не использовал этот метод в предыдущей демонстрации, потому что он плохо работает с IE (видите ли, код имеет браузерный префикс -webkit). Метод, использованный в нашей реальной демонстрации, все еще работает, если текст заменен изображением или любым элементом.

Очень простая маленькая анимация, не правда ли? Это довольно тонко и может добавить цвет вашим элементам пользовательского интерфейса. Например, его можно использовать в качестве подписи, раскрывающей пояснительный текст или даже картинку. В качестве альтернативы можно использовать небольшой фрагмент кода JavaScript для прослушивания событий щелчка или прокрутки, чтобы вызвать анимацию, которая сделает веб-страницу более интерактивной.

Есть вопросы по нашей анимации? Есть несколько советов, как сделать их лучше? Позвольте мне знать в комментариях ниже!

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.