Автор

30 09.2017
Анимированная начальная страница

Анимированная начальная страница


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

 

ДЕМО
ИСХОДНИКИ

 

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

В скачиваемом файле находятся 8 примеров анимированных эффектов.

 

Создание структуры

Структура HTML для каждого эффекта довольно проста: section.cd-intro используется в качестве контейнера для div.cd-intro-content, которое обертывает основную tagline.

Структура основного тега немного отличается от одного эффекта к другому: например, для эффектного эффекта мы использовали <h1> для заголовка страницы, тега <p> как tagline и div.action-wrapper для оберните кнопки действий:

<section class="cd-intro">
<div class="cd-intro-content bouncy">
<h1>Animated Intro Section</h1>
<p>A collection of text effects for the intro section of your website</p>
<div class="action-wrapper">
<a href="#0" class="cd-btn main-action">Get started</a>
<a href="#0" class="cd-btn">Learn More</a>
</div>
</div>
</section>

Класс .bouncy, добавленный в .cd-into-content, используется для запуска анимации.

 

Добавление стиля

По умолчанию мы скрываем содержимое intro, устанавливая его непрозрачность на ноль, а затем мы анимируем его с помощью анимации CSS.
Например, для эффектного эффекта мы создали 3 различные анимации для кнопок <h1><p> и .cd-btn:

.cd-intro-content h1,
.cd-intro-content p,
.cd-intro-content .cd-btn {
  opacity: 0;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
 
.bouncy.cd-intro-content h1 {
  animation-name: cd-bounce-right;
}
 
.bouncy.cd-intro-content p {
  animation-name: cd-bounce-left;
}
 
.bouncy.cd-intro-content h1,
.bouncy.cd-intro-content p {
  animation-duration: 0.6s;
}
 
.bouncy.cd-intro-content .cd-btn {
  animation-name: cd-bounce-rotate;
  animation-duration: 0.5s;
}
 
.bouncy.cd-intro-content .cd-btn.main-action {
  animation-delay: 0.4s;
}
 
@keyframes cd-bounce-right {
  0% {
    opacity: .2;
    transform: translateX(-200px);
  }
  60% {
    opacity: .7;
    transform: translateX(15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
 
@keyframes cd-bounce-left {
  0% {
    opacity: .2;
    transform: translateX(200px);
  }
  60% {
    opacity: .7;
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
 
@keyframes cd-bounce-rotate {
  0% {
    opacity: .2;
    transform: perspective(800px) rotateX(-80deg);
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: perspective(800px) rotateX(20deg);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(0);
  }
}

Теперь давайте посмотрим на видеоэффект: если вы откроете файл video.html, вы увидите, что добавлена ​​дополнительная div.cd-bg-video-wrapper; этот элемент используется для обертывания фонового видео (вы не увидите какой-либо элемент <video> внутри HTML, потому что он загружается с помощью Javascript - подробнее ниже в разделе «Обработка событий»).

Кроме того, мы вставили два элемента svg (.svg-mask и .svg-mask-mobile) внутри <h1>: эти svg используются для создания эффекта прозрачности заголовка (первый, когда ширина устройства больше 768 пикселей, второй для других устройств).
В принципе, идея такова: мы создаем непрозрачный прямоугольный элемент <path>, но затем добавляем прозрачную область в форме заголовка страницы (в нашей демонстрации «Видеоэффект»).
Затем svg используется как слой для покрытия всего содержимого .cd-intro-content область svg позволяет вам видеть, что ниже (фоновое видео).

Вы можете создать маску svg просто с помощью векторного графического редактора. Мы использовали Adobe Illustrator, где мы создали прямоугольник, а затем удалили текст, используя инструмент pathfinder.

.cd-bg-video-wrapper {
  /* background cover video */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/bg-img.jpg) no-repeat center center;
  background-size: cover;
}
.cd-bg-video-wrapper video {
  /* you won't see this element in the html, but it will be injected using js */
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
}
 
.video.cd-intro-content svg {
  position: absolute;
  z-index: 2;
  /* center the svg inside its parent */
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
}
.video.cd-intro-content svg.svg-mask {
  /* this is the svg mask used on desktop version */
  display: none;
}
@media only screen and (min-width: 768px) {
  .video.cd-intro-content svg.svg-mask-mobile {
    display: none;
  }
  .video.cd-intro-content svg.svg-mask {
    display: block;
  }
}

 

Обработка событий

Эти вступительные эффекты были созданы только с использованием CSS.
Мы использовали jQuery для видеоэффекта только для загрузки фонового видео, если ширина устройства больше 768 пикселей. В div.cd-bg-video-wrapper добавлено data-video для извлечения видеоролика.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

23 04.2013
Анимированная начальная страница

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


28 05.2017
Анимированная начальная страница

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


12 05.2017
Анимированная начальная страница

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


06 06.2014
Анимированная начальная страница

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close