—»     —»   3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей
  Раздел: Анимация   Нет комментариев  

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей



Сегодня уже недостаточно использовать просто красивый визуальный дизайн, так как ваши сайты должны уметь привлечь внимание посетителей. И с данной задачей отлично справляются незначительные, но хорошо продуманные анимации.

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

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

Давайте начнем с чего-нибудь более простого: перемещения одной окна просмотра в другое

Простая техника view-slider

Вы можете создать подобный эффект при помощи текстового редактора и браузера, однако мы бы рекомендовали вам воспользоваться преимуществами jsfiddle или codepen.

Создайте простой шаблон наподобие этого:

<div class="screen">
<div class="slider">
<img alt="" src="img1.png" />
<img alt="" src="img2.png" />
</div>
</div>

Внутри шаблона вам понадобятся “screen” и “slider”. Slider простирается за пределы экрана, и содержит в себе изображения макетов.

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

Чтобы добиться подобного эффекта, вам нужно будет добавить overflow:hidden к div-элементу .screen.

Ваш CSS должен быть сформирован следующим образом:

.screen {
overflow:hidden;
width:320px;
height:568px;
}
.slider {
position:relative;
float:left;
height:568px;
width:700px;
left:0;
-webkit-transition:all 0.5s ease-in-out;
}
.slider img {
position:relative;
float:left;
height:568px;
width:320px;
}
.screen:hover .slider {
left:-320px;
}

Завершающее выражение в CSS-коде отвечает за расположение слайдера, - оно перемещает div-элемент .slider влево на 320 пикселей, раскрывая для вас второе изображение.

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

* Предлагаем вашему вниманию ресурс со всем нужным кодом.

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

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей
3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

* С кодом можно ознакомиться здесь.

3D transforms

Рекомендуем вам закрепить знания 3D Transforms, так как эта технология позволит вам создавать действительно привлекательные эффекты.

Используя свойство -webkit-transform:, мы можем превратить наш браузер в 3D-пространство, которое позволяет создавать глубокие эффекты анимации. iOS7, к примеру, для своих приложений использует своего рода “единое пространство”. К тому же, 3D-трансформации очень удобно подходят для создания анимаций с подпрыгиваниями и встрясками.

Мы воспользовались той же техникой :hover из нашего предыдущего примера, и добавили к ней 3d-трансформацию для создания следующего эффекта:

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

* Здесь можно просмотреть весь необходимый код.

Применение jQuery и javascript

Итак, до сих пор мы рассматривали лишь :hover-эффекты для создания анимаций. С jQuery же, мы можем использовать преимущества click()-событий для динамического применения addClass() и removeClass() к элементам. Это дает нам большую гибкость в создании по-настоящему невероятных эффектов.

Ниже мы используем функцию под названием kaskade, которая позволяет нам применять класс open к каждому из 4 пунктов меню с интервалами в 0.15 сек. Класс open задает иконкам свойство opacity:1; и left:0;, в то время как до этого они использовали opacity:0; и left:-50px. Это создает привлекательный эффект открывания меню. Поэкспериментируйте самостоятельно.

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

Последний пример довольно странный, однако он позволяет нам в полной мере оценивать возможности системы прототипирования:

3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей

И снова, приглашаем вас ознакомиться с кодом.

Разрабатывая собственные анимации, вы можете сэкономить свои средства и силы, а также вашей команды. CSS позволяет нам экспериментировать с анимациями и высылать вашим разработчикам функциональные примеры того, что вы хотите получить. Все, что вам потребуется, это лишь небольшая адаптация под ваши проекты.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4724   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Эпра для люминесцентных ламп
Оптовая продажа ламп. Интернет-магазин светильников и ламп
gesmsk.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31