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

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

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

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

035e26d167208e8645a70f7b76b70781?s=128

Kazuma Nishihata

March 11, 2018
Tweet

Transcript

  1. K2VFSZ͔ΒεςʔδΞοϓ ̍าઌߦͨ͘Ίͷ+BWB4DSJQU ੢ാҰഅ to-R ಈ͖ͷσβΠϯͱ ϑϩϯτΤϯυͷ࿈ܞ ੢ാҰഅ

  2. גࣜձࣾτΡʔΞʔϧ ୅දऔక໾ϑϩϯτΤϯυΤϯδχΞ ੢ാҰഅ גࣜձࣾτΡʔΞʔϧ ୅දऔక໾ϑϩϯτΤϯυΤϯδχΞ ੢ാҰഅ

  3. גࣜձࣾτΡʔΞʔϧ ୅දऔక໾ϑϩϯτΤϯυΤϯδχΞ ੢ാҰഅ

  4. ϑϩϯτΤϯυʹಛԽͨ͠8FC੍࡞ձࣾ w "OHVMBS3FBDU7VFKT 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.BUFSJBMNPUJPO େ͖ͳΞχϝʔγϣϯ 300ms - 400ms খ͞ͳΞχϝʔγϣϯ 150ms - 200ms https://material.io/guidelines/motion/

  19. (PPHMF.BUFSJBMNPUJPO Ϣʔβʔͷ଴ͪ࣌ؒΛ࡞Βͳ͍ ͨͩ͠ɺҠߦΛೝࣝͰ͖Δඞཁ
 https://material.io/guidelines/motion/

  20. (PPHMF.BUFSJBMNPUJPO Ҡಈڑ཭ɺཁૉͷ଎౓ɺαʔϑΣεͷมԽʹ߹Θͤͯ Ξχϝʔγϣϯ͝ͱʹܧଓ࣌ؒΛௐ੔
 https://material.io/guidelines/motion/

  21. (PPHMF8FC'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. &BTJOHQMVHJO 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ͱFMBTUJDFBTF͸ɺNTNT 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