Автор

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

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


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

 

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

 

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

В скачиваемом файле находятся 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 для извлечения видеоролика.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close