Главная > Анимация > 3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей
3 великолепных CSS3-эффекта анимации, которые точно привлекут ваших пользователей10 июля 2014, 15:00. Разместил: Design FactoRy |
Сегодня уже недостаточно использовать просто красивый визуальный дизайн, так как ваши сайты должны уметь привлечь внимание посетителей. И с данной задачей отлично справляются незначительные, но хорошо продуманные анимации. Очень хорошо, если ваш сайт привлекает посетителей к интерактиву, однако такие преимущества зачастую дорого обходятся при разработке дизайна, и зачастую дизайнерам и разработчикам бывает довольно сложно объяснить, что именно вы хотите от них. CSS-переходы предлагают отличную возможность дизайнерам с ограниченными значениями в области кода развить идею собственных дизайнов при помощи великолепных эффектов, которые точно привлекут внимание пользователей. Давайте начнем с чего-нибудь более простого: перемещения одной окна просмотра в другое Простая техника view-slider Вы можете создать подобный эффект при помощи текстового редактора и браузера, однако мы бы рекомендовали вам воспользоваться преимуществами jsfiddle или codepen. Создайте простой шаблон наподобие этого:
Внутри шаблона вам понадобятся “screen” и “slider”. Slider простирается за пределы экрана, и содержит в себе изображения макетов. Чтобы добиться подобного эффекта, вам нужно будет добавить overflow:hidden к div-элементу .screen. Ваш CSS должен быть сформирован следующим образом:
Завершающее выражение в CSS-коде отвечает за расположение слайдера, - оно перемещает div-элемент .slider влево на 320 пикселей, раскрывая для вас второе изображение. * Предлагаем вашему вниманию ресурс со всем нужным кодом. Применив творческий подход, вы сможете действительно без труда применять подобную технику, и создавать привлекательные анимации и эффекты. Все становится еще более интересным, если комбинировать эффекты между собой. К примеру, нам удалось разработать интересный эффект, который используется в мобильном приложении Twitter. * С кодом можно ознакомиться здесь. 3D transforms Рекомендуем вам закрепить знания 3D Transforms, так как эта технология позволит вам создавать действительно привлекательные эффекты. Используя свойство -webkit-transform:, мы можем превратить наш браузер в 3D-пространство, которое позволяет создавать глубокие эффекты анимации. iOS7, к примеру, для своих приложений использует своего рода “единое пространство”. К тому же, 3D-трансформации очень удобно подходят для создания анимаций с подпрыгиваниями и встрясками. Мы воспользовались той же техникой :hover из нашего предыдущего примера, и добавили к ней 3d-трансформацию для создания следующего эффекта: * Здесь можно просмотреть весь необходимый код. Применение jQuery и javascript Итак, до сих пор мы рассматривали лишь :hover-эффекты для создания анимаций. С jQuery же, мы можем использовать преимущества click()-событий для динамического применения addClass() и removeClass() к элементам. Это дает нам большую гибкость в создании по-настоящему невероятных эффектов. Ниже мы используем функцию под названием kaskade, которая позволяет нам применять класс open к каждому из 4 пунктов меню с интервалами в 0.15 сек. Класс open задает иконкам свойство opacity:1; и left:0;, в то время как до этого они использовали opacity:0; и left:-50px. Это создает привлекательный эффект открывания меню. Поэкспериментируйте самостоятельно. Последний пример довольно странный, однако он позволяет нам в полной мере оценивать возможности системы прототипирования: И снова, приглашаем вас ознакомиться с кодом. Разрабатывая собственные анимации, вы можете сэкономить свои средства и силы, а также вашей команды. CSS позволяет нам экспериментировать с анимациями и высылать вашим разработчикам функциональные примеры того, что вы хотите получить. Все, что вам потребуется, это лишь небольшая адаптация под ваши проекты. Вернуться назад |