Спасибо!
Ваше сообщение отправлено.
Раздел в стадии подготовки!
Подпишись и узнай первым о запуске виртуальной школы веб разработки!
<
Программы для дизайна
Динамика / Эффекты
В данной категории пока нет уроков
В данной категории пока нет уроков
В данной категории пока нет уроков
Есть вопросы или предложения?
Пишите нам!

Всем привет друзья! Сегодня мы будем с вами делать анимацию для сайта на чистом CSS, без использования JS скриптов. В итоге у нас получится эффект, который часто применяют на вступительных титрах фильмов. Заканчиваю вступление, переходим к делу!

Видео урок
Поделись с друзьями
Урок
Содержание урока
1ШРИФТ для анимации
2HTML каркас блоков с анимируемыми фразми
3СТИЛИ нашей css анимации
4АНИМАЦИЯ — стили ключевых кадров
5ДЕМО

Для реализации эффекта нам понадобятся всего два файла, это HTML документ и таблица стилей CSS. Ну и более-менее подходящий под наши титры шрифт.
Погнали!
Начнем с html. Первое, что нам нужно прописать, это базовую разметку, а также подключить шрифт (Roboto) и таблицу стилей (style.css).

ШРИФТ для анимации

Шрифт подключим из онлайн коллекции google – fonts.google.com Как договорились ранее используем шрифт Roboto. Находим шрифт и жмем на плюсик.

Анимация для сайта

Внизу страницы жмем на появившуюся темную вкладку «Family Selected». И во всплывшем окне переходим на вкладку «CUSTOMIZE». Отмечаем нужные нам размеры шрифта «Light 300» и «bold 700». Убираем галочку с лишнего «regular 400».

Анимация для сайта

Переходим на вкладку «EMBED» и копируем код для подключения шрифта.

Вставляем скопированный код в наш index.html, между тегами head. Там же подключим таблицу стилей «style.css».

HTML каркас блоков с анимируемыми фразми

Отлично! Все файлы подключили, теперь заготовим каркас из div блоков с фразами для анимации. Стоит отметить, что часть фразы в div блоках мы обернем тегом span, внутри которого текст будет жирным.

СТИЛИ нашей css анимации

Тут начинается самое интересное, так как все эффекты анимации будем реализовывать в CSS стилях! Основным контейнером для наших блоков с фразами будет являться тег body. Уберем все отступы и зададим высоту на всю высоту окна браузера. Для этого тегам html и body поставим margin и padding в 0, а высоту в 100%.

Сделаем тег body флекс боксом, чтобы нам было удобнее выровнять фразы по центру. А div блокам зададим свойство margin со значением auto, это выровняет блоки по центру флекс бокса body. Фразы мы будем анимировать поочередно, так что лишние фразы нам нужно убрать за пределы области видимости, для этого пропишем абсолютное позиционирование блоков со сдвигом в верх на 100px. Прописываем свойства шрифта: ширина шрифта 100, размер 42px, межстрочный интервал 1.1em название Roboto.

Через свойство text-transform: uppercase сделаем все буквы заглавными и зададим тексту выравнивание по центру. Так же сделаем наши div блоки флекс боксами, и зададим выравнивание элементов по вертикали, через свойство flex-direction: column. Таким образом части фразы блока разграничатся по вертикали в две строчки, текст внутри тега span встанет под начальный текст блока.
Текст внутри тега span сделаем жирным.

Чтобы было с чем работать, отобразим первый div блок, воспользовавшись псевдо селектором :nth-child(1). И присвоим первому div блоку нашу будущую анимацию, называться она будет text-intro, ее длительность поставим 5 секунд и зациклим свойством infinite.

АНИМАЦИЯ — стили ключевых кадров

Теперь переходим непосредственно к анимации, пропишем ключевые кадры через свойство @keyframes. Фразы будут менять свое позиционирование с абсолютного на относительное во время анимации, для этого прописываем от начала (0%) и до конца (100%) анимации свойство position со значением relative и свойство top поставим в 0, чтобы сбросить сдвиг на 100px вверх.

Отлично, теперь сделаем плавное появление и исчезновение текста, с 0% до 40% времени анимации текст будет прозрачным, а на 50% станет белым и затем опять плавно станет прозрачным к концу (100%).

Текст будет изначально появляться рассеянным и мутным, становясь резче, для этого используем тень текста, свойство text-shadow и зададим размытие тени в 50px с 0%, а к 40% анимации размытие тени будет 10px и ее цвет будет меняться на белый. Затем сделаем красную вспышку из тени на 60%, добавив три (для большей насыщенности) красных тени, размытием в 120px. Ну а к 100% тени красной вспышки будут менять цвет на черный и тем самым растворяться в фоне.

Так же можно добавить тень без размытия со сдвигом влево на -2px и темно красным цветом, что придаст нашему тексту объем.

Далее сделаем эффект сборки/группировки текста, воспользовавшись CSS свойством letter-spacing со значением 5px и пропишем его в начале анимации (0%).

Здорово! Теперь, после того, как текст собирается и становиться четким, добавим эффект движения текста на нас, в то время как появляется красная вспышка. Для этого нам нужно воспользоваться свойством perspective и translateZ CSS3.

Свойство perspective со значением 100px добавим тегу body, что сделает наш body как бы трехмерной коробкой размером 100px в глубину/ в даль, кому как больше нравиться, думаю суть ясна. Это даст нам возможность двигать элементы внутри body в трехмерном пространстве. В самой CSS анимации пропишем свойство transform и значением translateZ(0px) в 0% и 40%, таким образом наш текст до с 0% до 40% будет оставаться неподвижным.

Далее добавим то же свойство в конечный кадр (100%) но со значением translateZ(15px), это придаст эффект медленного приближения к нам текста от 40% до конца анимации.

Ну что, все практически готово! Осталось применить нашу анимацию ко всем div блокам с фразами поочередно, с задержкой относительно каждой фразы в 5 секунд.

ДЕМО

See the Pen NjQBKQ by Анатолий Ивашов (@anatoly_ivashov) on CodePen.

Вуаля! Наше INTRO, анимированное вступление для сайта готово! И как вы уже заметили друзья, никаких js скриптов использовать не пришлось, чистый HTML и CSS, но в итоге такой потрясающий эффект. Думаю, теперь у вас появилось желание произвести собственные эксперименты с CSS3 анимацией уже на своих сайтах!

Желаю вам успехов друзья, оставляйте свои комментарии, у кого что получилось, надеюсь урок был вам полезен. До встречи в новых уроках!

Комментарии
Улучши обучение! Ответь на пару вопросов.
В какой области знания тебе нужны больше всего?
HTML5 / CSS3
Java Script / jQuery
Ajax
Php
Json
Базы данных MySQL
1234
В какой области ты хочешь прокачаться?
Дизайн сайтов
FrontEnd - Верстка
FrontEnd - Программирование
FrontEnd - Фреймворки (Bootstrap...)
FrontEnd - Препроцессоры (Scss,Less...)
BackEnd - Программирование
BackEnd - Фреймворки (Yii2...)
BackEnd - Посадка верстки на CMS
Ускорение и эффективность кодинга
1234
Для кого ты создаешь сайты?
Для себя (хобби)
Для организации (работаю в офисе)
Фриланс заказы (работаю на дому)
У меня своя веб студия
1234
В каком тренинге Вы бы хотели принять участие?
В любом!
Мне похуй!
1234
Большое спасибо!
Ты внес ценный вклад в качаство обучения на сайте!
Уверен этот сайт поможет тебе прокачать себя!