Вдохните жизнь в ваш сайт на WordPress. “Правильные” анимации в вебе.

Всем Салют!

Меня зовут Алексей

Я веселый WordPress разработчик

Я создаю сайты

и преподаю в

Зачем нам анимировать ВЕБ?

ФАКТЫ

ФАКТ 1

Красота сайта равна его удобству, реальной или потенциальной пользе для посетителя.

Стоит рассмотреть интересный частный случай. Сайт с необычным дизайном кажется красивым, хотя очевидной пользы посетителю может не нести. У человека есть шаблон — за необычной обложкой находится необычное содержание. Мы ждем что-то новое. Новизна информации повышает ее потенциальную пользу для нас.

ФАКТ 2

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

ФАКТ 3

Интернет интегрирован в повседневную жизнь.

Мы ориентируемся на сайтах не хуже, чем в реальном мире.

Особенности виртуальности стали очевидными, как-будто так было всегда.

ЗАЧЕМ ЭТО НУЖНО?

1. Мы живем в реальном мире
2. Природность использования веба
3. Удовольствие
4. Анимация - это часть хорошего UI
5. Запоминаемость вашего сайта

Анимация как часть интерфейса

Сравните эти два примера

Движение создает понимание

Но "напихав" кучу анимации, все не будет хорошо  

Как бывает в "раздутых" платных темах

Рассмотрим примеры

Loading animations

http://waaark.com/

Homepage animations

http://loft.co.ua/​

Preloader animations plugin

Ultimate WordPress Preloader

Page Transition

http://waaark.com/

Page Transition - простой пример

http://loft.co.ua/​

Page Transition - простой пример - реализация

var introOverlay =  $("#intro-overlay");

// Transition in
introOverlay.transition({right: '100%'}, 500, "easeInOutQuint");

// Transition out
$("a[href*='http://loft']:not([data-uk-lightbox])").click(function(event){
	event.preventDefault();
	linkLocation = this.href;
	introOverlay.transition(
            {left: 0, opacity:1 },
            500,
            "easeInOutQuint",
            function(){
		redirectPage();
	});
});

jQuery plugin - Transit

Page transition plugin

Page Transition​

Hover animations

Some More Subtle Hover Effect Ideas #

Hover animations examples

• Ideas for Subtle Hover Effects
• Icon Hover Effects
• Creative Link Effects
• Inspiration for Text Styles and Hover Effects

Galleries, slideshow

Background animation/video

https://beetroot.se​

Background video - код

<video poster="<?php the_field('video_poster') ?>" autoplay loop muted class="be-footage">
    <source src="<?php the_field('video') ?>" type="video/mp4">
</video>


.be-footage {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: contain;
}

Navigation and menus

Fixed navigation and menus

Fixed navigation and menus

Menu links hover

Inspiration for Line Menu Styles (Hovers)

Morphing

Morphing

Story-telling animations

Story-telling animations

"Вау" эффект / Запоминаемость

"Попсовый" параллакс

https://beetroot.se/contact-us/

Не "попсовый" параллакс

http://themes.evgenyfireform.com/wp-brama/

Совсем не "попсовый" параллакс

http://tympanus.net/Development/SegmentEffect/

Еще?

Инфографика

http://jakearchibald.com/2014/offline-cookbook/

Анимированый Хедер

http://blog.studio.gd/​

Анимация элементов форм

http://codepen.io/SaraSoueidan/pen/40433575e3d0d026c7d9c00eb45522a1?editors=110

Более выразительная обратная связьи взаимодействие

http://tympanus.net/Development/AnimatedCheckboxes/

http://tympanus.net/Development/TextInputEffects/index2.html

Анимация плейсхолдеров

https://beetroot.se/career/

Анимация плейсхолдеров

Эластичность Добавляет Иллюзию реалистичного движения

Эластичность (SVG)

Эффекты "Motion blur" (SVG фильтры)

http://codepen.io/lbebber/full/zxpMZw

Как анимировать ВЕБ

CSS Animation

1. CSS transitions
2. CSS animation (keyframes)

SVG Animation

JavaScript Animations

• Для очень сложных анимаций 
• requestAnimationFrame()
• Web Animations API
• GreenSock Animations Platform (GSAP)
• Velocity.JS

JavaScript Animations: GreenSock (GSAP)

Для полного контроля над анимацией

• pause()
• play()
• seek()
• reverse()
• ratio()
• callback paradise (start, update, finish etc)
• tween, timeline
• plugins: css, svg, canvas

Scroll Animations: ScrollMagic

http://scrollmagic.io/

Примеры с кодом

и напоследок...

Это Анимации

Анимируйте

Спасибо за внимание!

http://alexcss.com

http://academy.beetroot.se