jQueryからステージアップ
動きのデザインと

１歩先行くためのJavaScript
フロントエンドの連携
to-R 西畑一馬

株式会社トゥーアール
株式会社トゥーアール
代表取締役 / フロントエンドエンジニア
代表取締役 / フロントエンドエンジニア
西畑一馬
西畑一馬

株式会社トゥーアール
代表取締役 / フロントエンドエンジニア
西畑一馬

to-R
フロントエンドに特化したWeb制作会社
• Angular / React / Vue.js
• jQuery / JavaScript
• HTML / CSS
• テクニカルディレクション

制作
教育

動きのデザイン

誰が動きを設計する？
クライアント
ディレクター
フロントエンド
デザイナー
エンジニア

動きは必要なのか？

アニメーションの目的
ユーザーに挙動を伝える

• アコーディオンが開いたことを示す
• ページがスクロールしたことを示す
• サイドドロワーが開いたことを示す
• スワイプ可能なことを示す

例えばページTOPへのスムーズスクロール

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

Google Material motion
大きなアニメーション 300ms - 400ms
小さなアニメーション 150ms - 200ms
https://material.io/guidelines/motion/

Google Material motion
ユーザーの待ち時間を作らない
ただし、移行を認識できる必要
https://material.io/guidelines/motion/

Google Material motion
移動距離、要素の速度、サーフェスの変化に合わせて
アニメーションごとに継続時間を調整
https://material.io/guidelines/motion/

Google Web Fundamentals
ease-out と ease-in は 200ms - 500ms
bounce と elastic ease は、800ms - 1200ms
https://developers.google.com/web/fundamentals/design-and-ux/animations/?hl=ja

<a href="#foo" class="js-smoothScroll">リンク</a>
$(".js-smoothScroll").click( function(){
var target = 0
if( this.hash && this.hash !== "#top"){
target = $(this.hash).offset().top - 100;
}
$("html, body").animate({
scrollTop: target
},300);
return false;
});

Swing

Easing plugin
http://gsgd.co.uk/sandbox/jquery/easing/

CSS Easing
a{
transtion: opacity .3s ease-in-out;
&:hover{
opacity: .5;
}
}

CSS Easing
http://cubic-bezier.com/

基本はease-out
http://cubic-bezier.com/

bounce と elastic ease は、800ms - 1200ms
http://cubic-bezier.com/

cubic-bezier
a{
transition: opacity .8s
cubic-bezier(.71,1.04,.76,1.43);
&:hover{
opacity: .5;
}
}

フロントエンドエンジニア以外が
Easingを指定したい場合は？

フロントエンドエンジニア以外が
Easingを指定したい場合は？
http://cubic-bezier.com/#.17,.67,.83,.67

こだわりすぎない

複雑なアニメーション制御
img:hover{
animation : sampleAnime 400ms;
}
@keyframes sampleAnime {
25% { transform:scale(1.1) }
100% { transform:scale(1) }
}

fpsAnimation.js
http://blog.webcreativepark.net/2013/04/07-193704.html

複雑なアニメーション制御
fpsAnimation(
"img:hover",
"sampleAnime",
100,
[{
f:1,
c:"transform:scale(1.1)"
},{
f:3,
c:"transform:scale(1)"
}]
);

クライアントワークでよくあるやり取り
ここのアニメーションちょっと早すぎない？

対策1
事前にサイトの雰囲気に合わせて
速度を調整しておきましたと伝えておく

対策2
400msで設定していましたが
600msに変更しました確認いただけますか？

アニメーションの目的
ユーザー操作に対するフィードバック

簡易インタラクション
a{
transition: opacity .5s ease-in-out;
&:hover{
opacity: .5;
}
}

透明度ではなく純粋に輝度を上げる方法がある

簡易インタラクション(今風)
a{
transition: all .8s ease-in-out;
&:hover{
filter: brightness(150%);
}
}

normal
opacity : 0.5
filter: brightness(150%)

フィードバックインタラクションを強くすると
主張が強くなる
控えめにしたいならopacityで十分

IE11は非対応

グレースフルデグラデーション

簡易インタラクション(今風 + IE11)
a{
transition: all .8s ease-in-out;
&:hover{
filter: brightness(150%);
@media all and (-ms-high-contrast:none){
opacity: .5;
}
}
}

Sass の Mixin
@mixin mq($level: pc) {
@if $level == pc {
@media (min-width: 768px){
@content;
}
} @else if $level == small {
@media (max-width: 374px){
@content;
}
} @else if $level == ie {
@media all and (-ms-high-contrast:none){
@content;
}
} @else {
@media (max-width: 767px){
@content;
}
}
}

簡易インタラクション(今風 + IE11)
a{
transition: all .8s ease-in-out;
&:hover{
filter: brightness(150%);
@include mq(ie){
opacity: .5;
}
}
}

アニメーションの目的
ユーザーを楽しませる

Thank You!!