Открыть мобильное меню

Микроанимация элементов с помощью transition в сss3

Элементы на сайте можно сделать более интересными применив микроанимацию. Самый простой способ — использовать доступные инструменты прямо в css3.

transition обеспечивает плавное изменение в значениях свойств класса и псевдоклассах hover и active. Так же его можно применять используя javascript.

Параметры свойства transition: [all или конкретное свойство] [2s - продолжительность анимации] [ease - вариант интерполяции перехода] [0s - задержка до начала анимации]

Плавная смена цвета

Поменяю цвет
.but-bg{ 
   transition: all .2s ease-in-out; 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-bg:hover{ 
   color:#d2f8fb; 
   background:#149fab; 
}

Масштабирование элемента

scale - масштабирование элемента по двум осям (x, y).
scaleX - масштабирование по горизонтали. Ось x.
scaleY - масштабирование по вертикали. Ось y.

Увеличюсь
.but-scale{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-scale:hover{ 
   transform:scale(1.1); 
} 

Поворот

rotate - поворот в двумерном пространстве. rotate(5deg)
rotate3d - поворот в трёхмерном пространстве. rotate3d(1,1,1,15deg)
rotateX, rotateY, rotateZ - поворот по оси.

Повернусь
.but-rot{ 
   transition:transform .2s cubic-bezier(0.6, 0.4, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-rot:hover{ 
   transform:rotate(5deg); 
}

Изменение размера

Расширюсь
.but-size{ 
   transition:all .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-size:hover{ 
   padding: 5px 29px; 
   transform: translateX(-7px); 
}

Смещение по осям

translate - смещение элемента по двум осям (x, y).
translateX - смещение по горизонтали. Ось x.
translateY - смещение по вертикали. Ось y.

Передвинусь
.but-pos{ 
   transition:transform .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-pos:hover{ 
   transform:translateX(15px); 
}

Несколько одновременных изменений

Увеличюсь и повернусь
.but-multi{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-multi:hover{ 
   transform:scale(1.1) rotate(-3deg);
 }

Проекция 3d модели на плоскость. Делаем 3d картинку.

3d картинка создаёт иллюзию глубины в изображении, поэтому зритель под определённым углом наблюдает реалистичное присутствие изображённого объекта.

Вся работа, для получения конечной проекции, делится условно на два шага.

Шаг 1 — получаем изображение, которое должен увидеть зритель.

Расположение объектов и камеры на 3d сцене

Размещаем объекты на сцене нужным нам образом. Устанавливаем поверхность, имитирующую пол, на которую будет падать тень.

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

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

Изображение после рендера. Шаг 1

Не забывайте — удачный ракурс и правильная тень 90% успеха.

Устанавливаем направленную на объект камеру. Стоит учитывать масштаб сцены и расположить её в том месте, с которого зритель будет наблюдать 3д эффект в реальности.

Рендерим изображение. Для листа A4 вполне хватит 2500 пикселов. Получаем картинку по примеру логотипа сверху.

Шаг 2 — получаем проекцию 3d изображения.

Расположение камеры для рендера и проектора

Получив нужное изображение, скрываем в отдельном слое все объекты из прошлой сцены.

Устанавливаем проектор в тех же координатах и под таки же углом, как и камера прошлой сцены. (В Cinema 4d используется камера с тегом Camera Calibrator. В 3D Max в роли проектора выступаем направленный источник света.)

Перед камерой ставим плоскость, на которую будет проецироваться изображение. Материал используем белый, без отражений и бликов.

Над созданной плоскостью устанавливаем "камеру для рендера", направленную точно в низ. Отрендерив, мы получим необходимую проекцию 3d изображения.

Стоит учитывать при печати проекции.

3д эффект максимально проявляется только из одной точки на определённом расстоянии. Отметить место можно наклейкой, чтобы зритель точно знал откуда смотреть.

Небольшие изображения с близкого расстояния нужно смотреть прикрыв один глаз. Более масштабные проекции с расстояния более нескольких метров уже можно смотреть обоими глазами.

HTML5 баннер для Google Adwords

Изучив ниже приведённый список, становится очевидным выбор в пользу баннеров на технологии HTML5:
  • JPG, PNG — статичная картинка.
  • GIF — устаревший формат анимации, с неоправданно огромным весом и ограничением 256 цветов.
  • SWF (Flash) — нужен дополнительный плагин, плюс новые версии браузеров блокируют автостарт.
  • HTML5 — на данный момент неоспоримый лидер, а с новыми инструментами позволяет делать анимацию такой же сложности, как и во флэш.

Баннер в HTML5 можно сделать с помощью таких программ как Google Web Designer, Adobe Edge Animate или Adobe Animate CC.

Подготовка к размещению рекламы

Когда баннер готов, заходим в настройки экспорта и снимаем галочку с Hosted libraries (файл библиотеки не должен подгружаться извне). Теперь при экспорте мы получаем не только html и основной js, а так же папку libs.

Далее в редакторе открываем html файл и в head прописываем <meta name="ad.size" content="width=336,height=280"> (width и height соответственно размер баннера)

Теперь архивируем в zip все экспортированные файлы. Для Google Adwords архив не должен превышать 150 кб. Детали можно найти в центре правил AdWords