Css плавное появление – Как плавно передвигать блок после появления над ним другого блока на CSS? — Хабр Q&A

26/11/2019 14:39

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Несколько неочевидных frontend-хитростей / Wargaming corporate blog / Habr

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

.multiple {
  text-decoration: underline overline;
}

.color {
  text-decoration-color: blue;
}

.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Плавная прокрутка страницы на CSS (scroll-behaviour)

 body {
  scroll-behavior: smooth;
}

• smooth — плавная прокрутка;
• instant — мгновенная прокрутка;
• auto — на усмотрение браузера.

Если плавная прокрутка страницы на вашем сайте не является чем-то критичным, смело используйте это свойство. Вы получите плавный скролл при переходе по якорям с помощью всего одного CSS-правила как минимум, в Firefox .
Пример

Анимация появления элемента (быстро и легко)

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

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
  animation: fade-in .4s ease;
}

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

.break:after {
    content: '<br />';
}

.break:after {
    content: '\A'; //код переноса строки
    white-space: pre; //заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}

SVG с интерактивными элементами

Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            rect {
                fill: blue;
            }
            rect:hover {
                fill: orange;
            }
        </style>
    </defs>

    <rect />
    <rect />
    <rect />
    <rect />
</svg>

<iframe src="icon.svg"></iframe>

<object type="image/svg+xml" data="icon.svg"></object>

Возможно, это не самое красивое решение, но оно явно лучше, чем захламленная SVG-кодом страница. Если вы знаете более красивый способ, пожалуйста, поделитесь им в комментариях!

UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            @keyframes fill-change {
                0% {
                    fill: blue;
                }
                50% {
                    fill: orange;
                }
                100% {
                    fill: blue;
                }
            }
        
            rect {
                animation: 2s ease fill-change infinite;
                fill: blue;
            }
        </style>
    </defs>
    
    <rect />
    <rect />
    <rect />
    <rect />
    <path />
</svg>

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!

Анимация появления блоков для Landing Page

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

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

Посмотреть Demo

Параметры jQuery плагина Revealator

Задержка:

Продолжительность:

Показывать эффект только один раз

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Revealator

Как это работает?

Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.

Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Revealator Plugin</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="fm.revealator.jquery.css">
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/fm.revealator.jquery.js"></script>
   </head>
   <body>
      <div>
         <h2>
            ↓↓↓ Scroll down ↓↓↓
         </h2>
      </div>
      <div>
         <div>
            revealator-slideup revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slidedown revealator-once revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slideleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
      </div>
      <div>
         <div>
            revealator-slideright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
      </div>
      <div>
         <div>
            revealator-zoomin revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
      </div>
      <div>
         <div>
            revealator-zoomout revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
      </div>
      <div>
         <div>
            revealator-fade revealator-delay# revealator-duration10
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
      </div>
      <div>
         <div>
            revealator-rotateleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
      </div>
      <div>
         <div>
            revealator-rotateright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
      </div>
      <div>
         <div>
            End
         </div>
      </div>
   </body>
</html>

На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.

Скачать демо просмотр