Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ϑϩϯτΤϯυʹಛԽͨ͠8FC੍࡞ձࣾ w "OHVMBS3FBDU7VFKT w K2VFSZ+BWB4DSJQU w )5.-$44 w ςΫχΧϧσΟϨΫγϣϯ to-R

Slide 5

Slide 5 text

ڭҭ ੍࡞

Slide 6

Slide 6 text

ಈ͖ͷσβΠϯ

Slide 7

Slide 7 text

ΫϥΠΞϯτ σΟϨΫλʔ σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ ୭͕ಈ͖Λઃܭ͢Δʁ

Slide 8

Slide 8 text

ಈ͖͸ඞཁͳͷ͔ʁ

Slide 9

Slide 9 text

ϢʔβʔʹڍಈΛ఻͑Δ Ξχϝʔγϣϯͷ໨త

Slide 10

Slide 10 text

•ΞίʔσΟΦϯ͕։͍ͨ͜ͱΛࣔ͢ •ϖʔδ͕εΫϩʔϧͨ͜͠ͱΛࣔ͢ •αΠυυϩϫʔ͕։͍ͨ͜ͱΛࣔ͢ •εϫΠϓՄೳͳ͜ͱΛࣔ͢

Slide 11

Slide 11 text

ྫ͑͹ϖʔδ501΁ͷεϜʔζεΫϩʔϧ

Slide 12

Slide 12 text

$(".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; }); ϦϯΫ

Slide 13

Slide 13 text

$(".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; }); ϦϯΫ

Slide 14

Slide 14 text

$(".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; }); ϦϯΫ

Slide 15

Slide 15 text

$(".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; }); ϦϯΫ

Slide 16

Slide 16 text

$(".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; }); ϦϯΫ

Slide 17

Slide 17 text

$(".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; }); ϦϯΫ

Slide 18

Slide 18 text

(PPHMF.BUFSJBMNPUJPO େ͖ͳΞχϝʔγϣϯ 300ms - 400ms খ͞ͳΞχϝʔγϣϯ 150ms - 200ms https://material.io/guidelines/motion/

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

(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

Slide 22

Slide 22 text

$(".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; }); ϦϯΫ

Slide 23

Slide 23 text

4XJOH

Slide 24

Slide 24 text

&BTJOHQMVHJO http://gsgd.co.uk/sandbox/jquery/easing/

Slide 25

Slide 25 text

$44&BTJOH a{ transtion: opacity .3s ease-in-out; &:hover{ opacity: .5; } }

Slide 26

Slide 26 text

$44&BTJOH http://cubic-bezier.com/

Slide 27

Slide 27 text

جຊ͸FBTFPVU http://cubic-bezier.com/

Slide 28

Slide 28 text

CPVODFͱFMBTUJDFBTF͸ɺNTNT http://cubic-bezier.com/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ϑϩϯτΤϯυΤϯδχΞҎ֎͕
 &BTJOHΛࢦఆ͍ͨ͠৔߹͸ʁ

Slide 31

Slide 31 text

ϑϩϯτΤϯυΤϯδχΞҎ֎͕
 &BTJOHΛࢦఆ͍ͨ͠৔߹͸ʁ http://cubic-bezier.com/#.17,.67,.83,.67

Slide 32

Slide 32 text

ͩ͜ΘΓ͗͢ͳ͍

Slide 33

Slide 33 text

ෳࡶͳΞχϝʔγϣϯ੍ޚ img:hover{ animation : sampleAnime 400ms; } @keyframes sampleAnime { 25% { transform:scale(1.1) } 100% { transform:scale(1) } }

Slide 34

Slide 34 text

GQT"OJNBUJPOKT http://blog.webcreativepark.net/2013/04/07-193704.html

Slide 35

Slide 35 text

ෳࡶͳΞχϝʔγϣϯ੍ޚ fpsAnimation( "img:hover", "sampleAnime", 100, [{ f:1, c:"transform:scale(1.1)" },{ f:3, c:"transform:scale(1)" }] );

Slide 36

Slide 36 text

ΫϥΠΞϯτϫʔΫͰΑ͋͘Δ΍ΓऔΓ ͜͜ͷΞχϝʔγϣϯͪΐͬͱૣ͗͢ͳ͍ʁ

Slide 37

Slide 37 text

ରࡦ ࣄલʹαΠτͷงғؾʹ߹Θͤͯ ଎౓Λௐ੔͓͖ͯ͠·ͨ͠ͱ఻͓͑ͯ͘

Slide 38

Slide 38 text

ରࡦ 400msͰઃఆ͍ͯ͠·͕ͨ͠ 600msʹมߋ͠·ͨ֬͠ೝ͍͚ͨͩ·͔͢ʁ

Slide 39

Slide 39 text

Ϣʔβʔૢ࡞ʹର͢ΔϑΟʔυόοΫ Ξχϝʔγϣϯͷ໨త

Slide 40

Slide 40 text

http://niigm.com/

Slide 41

Slide 41 text

؆қΠϯλϥΫγϣϯ a{ transition: opacity .5s ease-in-out; &:hover{ opacity: .5; } }

Slide 42

Slide 42 text

http://blog.webcreativepark.net/2007/07/18-221039.html

Slide 43

Slide 43 text

ಁ໌౓Ͱ͸ͳ͘७ਮʹً౓Λ্͛Δํ๏͕͋Δ

Slide 44

Slide 44 text

؆қΠϯλϥΫγϣϯ ࠓ෩ a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); } }

Slide 45

Slide 45 text

normal opacity : 0.5 filter: brightness(150%)

Slide 46

Slide 46 text

ϑΟʔυόοΫΠϯλϥΫγϣϯΛڧ͘͢Δͱ ओு͕ڧ͘ͳΔ ߇͑Ίʹ͍ͨ͠ͳΒPQBDJUZͰे෼

Slide 47

Slide 47 text

*&͸ඇରԠ

Slide 48

Slide 48 text

άϨʔεϑϧσάϥσʔγϣϯ

Slide 49

Slide 49 text

؆қΠϯλϥΫγϣϯ ࠓ෩*& a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); @media all and (-ms-high-contrast:none){ opacity: .5; } } }

Slide 50

Slide 50 text

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; } } }

Slide 51

Slide 51 text

؆қΠϯλϥΫγϣϯ ࠓ෩*& a{ transition: all .8s ease-in-out; &:hover{ filter: brightness(150%); @include mq(ie){ opacity: .5; } } }

Slide 52

Slide 52 text

ϢʔβʔΛָ͠·ͤΔ Ξχϝʔγϣϯͷ໨త

Slide 53

Slide 53 text

5IBOL:PV