動きのデザインとフロントエンドの連携

2017年3月9日に新潟で行われたイベント、新潟グラム2018 Vol.1で行なったセッション「動きのデザインとフロントエンドの連携」の講演資料です。

https://www.to-r.net/niigm-2018-1/

Transcript

1. K2VFSZ͔ΒεςʔδΞοϓ
   ̍าઌߦͨ͘Ίͷ+BWB4DSJQU ੢ാҰഅ to-R ಈ͖ͷσβΠϯͱ
   ϑϩϯτΤϯυͷ࿈ܞ ੢ാҰഅ
2. גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ
3. גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ
4. ϑϩϯτΤϯυʹಛԽͨ͠8FC੍࡞ձࣾ w "OHVMBS
   
   
   3FBDU
   
   7VFKT
   
   w K2VFSZ
   
   +BWB4DSJQU
   w )5.-
   
   $44
   w ςΫχΧϧσΟϨΫγϣϯ to-R
5. ڭҭ ੍࡞
6. ಈ͖ͷσβΠϯ
7. ΫϥΠΞϯτ σΟϨΫλʔ σβΠφʔ ϑϩϯτΤϯυ
   ΤϯδχΞ ୭͕ಈ͖Λઃܭ͢Δʁ
8. ಈ͖͸ඞཁͳͷ͔ʁ
9. ϢʔβʔʹڍಈΛ఻͑Δ Ξχϝʔγϣϯͷ໨త
10. •ΞίʔσΟΦϯ͕։͍ͨ͜ͱΛࣔ͢ •ϖʔδ͕εΫϩʔϧͨ͜͠ͱΛࣔ͢ •αΠυυϩϫʔ͕։͍ͨ͜ͱΛࣔ͢ •εϫΠϓՄೳͳ͜ͱΛࣔ͢
11. ྫ͑͹ϖʔδ501΁ͷεϜʔζεΫϩʔϧ
12. $(".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>
13. $(".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>
14. $(".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>
15. $(".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>
16. $(".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>
17. $(".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>
18. (PPHMF
    .BUFSJBM
    NPUJPO େ͖ͳΞχϝʔγϣϯ 300ms - 400ms খ͞ͳΞχϝʔγϣϯ 150ms - 200ms https://material.io/guidelines/motion/
19. (PPHMF
    .BUFSJBM
    NPUJPO Ϣʔβʔͷ଴ͪ࣌ؒΛ࡞Βͳ͍ ͨͩ͠ɺҠߦΛೝࣝͰ͖Δඞཁ
 https://material.io/guidelines/motion/
20. (PPHMF
    .BUFSJBM
    NPUJPO Ҡಈڑ཭ɺཁૉͷ଎౓ɺαʔϑΣεͷมԽʹ߹Θͤͯ Ξχϝʔγϣϯ͝ͱʹܧଓ࣌ؒΛௐ੔
 https://material.io/guidelines/motion/
21. (PPHMF
    8FC
    'VOEBNFOUBMT ease-out ͱ ease-in ͸ 200ms - 500ms bounce ͱ elastic ease ͸ɺ800ms - 1200ms https://developers.google.com/web/fundamentals/design-and-ux/animations/?hl=ja
22. $(".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>
23. 4XJOH
24. &BTJOH
    QMVHJO http://gsgd.co.uk/sandbox/jquery/easing/
25. $44
    &BTJOH a{ transtion: opacity .3s ease-in-out; &:hover{ opacity: .5; } }
26. $44
    &BTJOH http://cubic-bezier.com/
27. جຊ͸FBTFPVU http://cubic-bezier.com/
28. CPVODF
    ͱ
    FMBTUJD
    FBTF
    ͸ɺNT
    
    NT http://cubic-bezier.com/
29. DVCJDCF[JFS a{ transition: opacity .8s cubic-bezier(.71,1.04,.76,1.43); &:hover{ opacity: .5; } }
30. ϑϩϯτΤϯυΤϯδχΞҎ֎͕
 &BTJOHΛࢦఆ͍ͨ͠৔߹͸ʁ
31. ϑϩϯτΤϯυΤϯδχΞҎ֎͕
 &BTJOHΛࢦఆ͍ͨ͠৔߹͸ʁ http://cubic-bezier.com/#.17,.67,.83,.67
32. ͩ͜ΘΓ͗͢ͳ͍
33. ෳࡶͳΞχϝʔγϣϯ੍ޚ img:hover{ animation : sampleAnime 400ms; } @keyframes sampleAnime { 25% { transform:scale(1.1) } 100% { transform:scale(1) } }
34. GQT"OJNBUJPOKT http://blog.webcreativepark.net/2013/04/07-193704.html
35. ෳࡶͳΞχϝʔγϣϯ੍ޚ fpsAnimation( "img:hover", "sampleAnime", 100, [{ f:1, c:"transform:scale(1.1)" },{ f:3, c:"transform:scale(1)" }] );
36. ΫϥΠΞϯτϫʔΫͰΑ͋͘Δ΍ΓऔΓ ͜͜ͷΞχϝʔγϣϯͪΐͬͱૣ͗͢ͳ͍ʁ
37. ରࡦ ࣄલʹαΠτͷงғؾʹ߹Θͤͯ ଎౓Λௐ੔͓͖ͯ͠·ͨ͠ͱ఻͓͑ͯ͘
38. ରࡦ 400msͰઃఆ͍ͯ͠·͕ͨ͠ 600msʹมߋ͠·ͨ֬͠ೝ͍͚ͨͩ·͔͢ʁ
39. Ϣʔβʔૢ࡞ʹର͢ΔϑΟʔυόοΫ Ξχϝʔγϣϯͷ໨త
40. http://niigm.com/
41. ؆қΠϯλϥΫγϣϯ a{ transition: opacity .5s ease-in-out; &:hover{ opacity: .5; } }
42. http://blog.webcreativepark.net/2007/07/18-221039.html
43. ಁ໌౓Ͱ͸ͳ͘७ਮʹً౓Λ্͛Δํ๏͕͋Δ
44. ؆қΠϯλϥΫγϣϯ ࠓ෩ a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); } }
45. normal opacity : 0.5 filter: brightness(150%)
46. ϑΟʔυόοΫΠϯλϥΫγϣϯΛڧ͘͢Δͱ
    ओு͕ڧ͘ͳΔ
    ߇͑Ίʹ͍ͨ͠ͳΒPQBDJUZͰे෼
47. *&͸ඇରԠ
48. άϨʔεϑϧσάϥσʔγϣϯ
49. ؆қΠϯλϥΫγϣϯ ࠓ෩
    
    *& a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); @media all and (-ms-high-contrast:none){ opacity: .5; } } }
50. 4BTT
    ͷ
    .JYJO @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; } } }
51. ؆қΠϯλϥΫγϣϯ ࠓ෩
    
    *& a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); @include mq(ie){ opacity: .5; } } }
52. ϢʔβʔΛָ͠·ͤΔ Ξχϝʔγϣϯͷ໨త
53. 5IBOL
    :PV