Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ナウいJavaScriptアニメーション実装法
Search
Daisuek Nagai
July 01, 2016
Programming
6
3.3k
ナウいJavaScriptアニメーション実装法
【ヒカ☆ラボ】JavaScriptの情報交換LT会~React/Redux,Node.js,アニメーション,Processing等々~
Daisuek Nagai
July 01, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
明日から始めるリファクタリング
ryounasso
0
110
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Advance Your Career with Open Source
ivargrimstad
0
340
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
CSC509 Lecture 01
javiergs
PRO
1
430
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
株式会社 Sun terras カンパニーデック
sunterras
0
230
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
How GitHub (no longer) Works
holman
315
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Designing for Performance
lara
610
69k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Facilitating Awesome Meetings
lara
56
6.6k
Visualization
eitanlees
148
16k
Become a Pro
speakerdeck
PRO
29
5.5k
The Language of Interfaces
destraynor
162
25k
Making Projects Easy
brettharned
119
6.4k
Transcript
φ͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮๏ ʲώΧˑϥϘʳ +BWB4DSJQUͷใަ-5ձ4QFBLFS/P ӬҪେี Daisuke Nagai
ӬҪେี %0/(63**OD!VXXXEBJTVLFOBHBJDPN ՎͬͯགྷΕΔ8FCσβΠφʔ ࣗݾհ
8FCʹ͓͚ΔΞχϝʔγϣϯͷྺ࢙ (*'Ξχϝʕγϣϯ )5.- FYNBSRVFF +BWB4DSJQU 'MBTI K2VFSZ
$44 ʁ ʁ ʁ ʜ ŘŵŠŠ
XXXEPOHVSJDPN ࡐ
͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS
animation
01 Parallax scrolling 02 Stop motion animation 03 CSS animation
͓͠ͳ͕͖
top ʹͦΕͧΕζϥͨ͠εΫϩʔϧͷΛೖ ཁૉΛposition:fixed;Ͱஔ εΫϩʔϧͷΛऔಘ ͍··Ͱͷ1BSBMMBYTDSPMMJOH $44 +BWB4DSJQU 1 2 3
top ʹͦΕͧΕζϥͨ͠εΫϩʔϧͷΛೖ ཁૉΛposition:fixed;Ͱஔ εΫϩʔϧͷΛऔಘ ͍··Ͱͷ1BSBMMBYTDSPMMJOH $44 +BWB4DSJQU 1 2 3
ॏ͍
ߴղ૾ʢQYʣ ͷը૾ʷຕ ࠓճ༻͍ͯ͠Δഎܠը૾
8FC(- φ͍1BSBMMBYTDSPMMJOH
8FC(-ͱ 8FC(-<> ʢΣϒδʔΤϧʣ ɺ ΣϒϒϥβͰ࣍ݩίϯϐϡʔλάϥϑΟ οΫεΛදࣔͤ͞ΔͨΊͷඪ४༷ɻ 0QFO(- ޙड़ͷͱ͓Γ ࣄ্࣮0QFO(- ͘͠
0QFO(-&4Λαϙʔ τ͢Δϓϥο τϑΥʔϜ্Ͱɺ ಛผͳϒϥβͷϓϥάΠϯͳ͠Ͱɺ ϋʔ υΣΞͰΞΫηϥ Ϩʔ τ͞Εͨࡾ࣍ݩάϥϑΟ οΫεΛදࣔՄೳʹ͢Δɻ ٕज़తʹɺ +BWB4DSJQUͱωΠςΟ ϒͷ0QFO(-&4ͷόΠϯσΟ ϯάͰ͋Δɻ 8FC(-ඇӦརஂମͷ,ISPOPT(SPVQͰཧ͞Ε͍ͯΔɻ 8FC(-)5.-ͷDBOWBTཁૉΛ͏ɻ ରԠΣϒϒϥβҎԼͷ௨Γ<>ɻ ओཁͳϒϥβ࠷৽൛Ͱશͯͷϒϥβ͕ରԠ͍ͯ͠Δɻ ͨͩ͠ɺ ϏσΦΧʔ υ͕0QFO(-Λαϙʔ τ͍ͯ͠Δඞཁ͕͋Δɻ ·ͨɺ ޙड़ ͷηΩϡϦςΟ্ͷ͔Β(-@"3#@SPCVTUOFTT 0QFO(- ͘͠ (-@&95@SPCVTUOFTT 0QFO(-&4 ͷରԠ͕ඞཁͰ ͋Δɻ ͦͷͨΊɺ ྫ͑*OUFM)%(SBQIJDTͰ ʮ8JOEPXTͰ0QFO(-·ͰͷରԠ͕ͩ.BD049-JOVYͰ0QFO(-·Ͱ ରԠ͍ͯ͠Δ4BOEZ#SJEHFʯ Ҏ߱ 4BOEZ#SJEHFͰ0QFO(-ͷ.BD049͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT(-@"3#@SPCVTUOFTTʹඇରԠͷͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ෦తʹ%JSFDU%Λ༻ͯ͠8FC(-Λ ࣮ݱ͢Δ߹͋Δ ͷੈ͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ෦తʹ%JSFDU%Λ༻ͯ͠8FC(-Λ࣮ݱ͢Δ߹ઃఆෆ ཁͰιϑ τΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ߹ͳͲΛআ͖0QFO(-Yੈ0QFO(-0QFO(-Σϒϒϥβଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͷ༻ͳͲؚΉ Λ͠ͳ͍ͱ8FC(-Λར༻Ͱ͖ͳ͍ ߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τΣΞϨϯμϦϯάͱผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͳͲͷ༻ͳͲʹΑΓιϑ τΣΞϨϯμϦϯάʹΑΔ8FC(-ͷ࣮ߦ ࣮ݱՄೳͰ͋Δɻ ·ͨɺ ͨͱ͑*OUFM(.νοϓηο τͱ.FTBυϥΠόͱͷΈ߹ΘͤͰ0QFO(-Λαϙʔ τ͠ͳ͍͕ 0QFO(-Λαϙʔ τ͠ɺ ͔ͭɺ ֦ுػೳͱ ͯ͠(-@"3#@SPCVTUOFTTΛαϙʔ τ͢ΔͨΊ-JOVY൛'JSFGPYͰඳը͍ͦ͜ͷͷϋʔ υ ΣΞΞΫηϥϨʔγϣϯ͕༗ޮͳ8FC(-Λ࣮ߦՄೳͰ͋Δɻ ͲͷΑ ͏ ͳ04 ɾ ϒϥβͰ8FC(-Λ࣮ߦ͢Δʹ֤ͯ͠ϒϥβ͝ͱʹผʹఆΊ ΒΕͨ(16ϒϩοΫϦε τ ֤ϒϥβ͝ͱʹ04ผ ɾ ϏσΦνοϓผ ɾ ϏσΦ υϥΠόͷόʔδϣϯผ ɾ ֤ϒϥβͷόʔδϣϯผͷ ʢҎԼུʣ 8FC(-8JLJQFEJB IUUQTKBXJLJQFEJBPSHXJLJ8FC(-
8FC(-ͱ 8FC(-<> ʢΣϒδʔΤϧʣ ɺ ΣϒϒϥβͰ࣍ݩίϯϐϡʔλάϥϑΟ οΫεΛදࣔͤ͞ΔͨΊͷඪ४༷ɻ 0QFO(- ޙड़ͷͱ͓Γ ࣄ্࣮0QFO(- ͘͠
0QFO(-&4Λαϙʔ τ͢Δϓϥο τϑΥʔϜ্Ͱɺ ಛผͳϒϥβͷϓϥάΠϯͳ͠Ͱɺ ϋʔ υΣΞͰΞΫηϥ Ϩʔ τ͞Εͨࡾ࣍ݩάϥϑΟ οΫεΛදࣔՄೳʹ͢Δɻ ٕज़తʹɺ +BWB4DSJQUͱωΠςΟ ϒͷ0QFO(-&4ͷόΠϯσΟ ϯάͰ͋Δɻ 8FC(-ඇӦརஂମͷ,ISPOPT(SPVQͰཧ͞Ε͍ͯΔɻ 8FC(-)5.-ͷDBOWBTཁૉΛ͏ɻ ରԠΣϒϒϥβҎԼͷ௨Γ<>ɻ ओཁͳϒϥβ࠷৽൛Ͱશͯͷϒϥβ͕ରԠ͍ͯ͠Δɻ ͨͩ͠ɺ ϏσΦΧʔ υ͕0QFO(-Λαϙʔ τ͍ͯ͠Δඞཁ͕͋Δɻ ·ͨɺ ޙड़ ͷηΩϡϦςΟ্ͷ͔Β(-@"3#@SPCVTUOFTT 0QFO(- ͘͠ (-@&95@SPCVTUOFTT 0QFO(-&4 ͷରԠ͕ඞཁͰ ͋Δɻ ͦͷͨΊɺ ྫ͑*OUFM)%(SBQIJDTͰ ʮ8JOEPXTͰ0QFO(-·ͰͷରԠ͕ͩ.BD049-JOVYͰ0QFO(-·Ͱ ରԠ͍ͯ͠Δ4BOEZ#SJEHFʯ Ҏ߱ 4BOEZ#SJEHFͰ0QFO(-ͷ.BD049͕(-@"3#@SPCVTUOFTTʹରԠͦ͠Εͱಉ༷ʹ 0QFO(-ͷ-JOVY͕(-@"3#@SPCVTUOFTTʹରԠ͠0QFO(-ͷ8JOEPXT(-@"3#@SPCVTUOFTTʹඇରԠͷͣ ֦ுػೳͱ ͠ ͯ(-@"3#@SPCVTUOFTTΛαϙʔ τ͍ͯ͠Δ ʁ <ಠࣗݚڀ >͕ͩޙड़ͷ"/(-&Λܦ༝͢Δ͜ͱͳͲͰ෦తʹ%JSFDU%Λ༻ͯ͠8FC(-Λ ࣮ݱ͢Δ߹͋Δ ͷੈ͕ݪଇͱ ͯ͠ඞཁͰ͋Γɺ ྫ֎ͱ ͯ͠ઃఆෆཁͰ෦తʹ%JSFDU%Λ༻ͯ͠8FC(-Λ࣮ݱ͢Δ߹ઃఆෆ ཁͰιϑ τΣΞϨϯμϦϯάʹΑΔ8FC(-Λ࣮ݱ͢Δ߹ͳͲΛআ͖0QFO(-Yੈ0QFO(-0QFO(-Σϒϒϥβଆ Ͱڧ੍తʹར༻͢Δઃఆ .FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͷ༻ͳͲؚΉ Λ͠ͳ͍ͱ8FC(-Λར༻Ͱ͖ͳ͍ ߹͕͋Δɻ ͔͠͠ɺ લड़ͷྫ֎ͱ ͯ͠ͷઃఆෆཁͳιϑ τΣΞϨϯμϦϯάͱผͷํ๏ͱ ͯ͠ɺ ϢʔβʔʹΑΔར༻ͷઃఆ͕ඞཁʹͳͬͯ͠ ·͏͕લड़ͷ.FTB0⒎TDSFFOSFOEFSJOHFYUFOTJPO ྫMJCPTNFTB ͳͲͷ༻ͳͲʹΑΓιϑ τΣΞϨϯμϦϯάʹΑΔ8FC(-ͷ࣮ߦ ࣮ݱՄೳͰ͋Δɻ ·ͨɺ ͨͱ͑*OUFM(.νοϓηο τͱ.FTBυϥΠόͱͷΈ߹ΘͤͰ0QFO(-Λαϙʔ τ͠ͳ͍͕ 0QFO(-Λαϙʔ τ͠ɺ ͔ͭɺ ֦ுػೳͱ ͯ͠(-@"3#@SPCVTUOFTTΛαϙʔ τ͢ΔͨΊ-JOVY൛'JSFGPYͰඳը͍ͦ͜ͷͷϋʔ υ ΣΞΞΫηϥϨʔγϣϯ͕༗ޮͳ8FC(-Λ࣮ߦՄೳͰ͋Δɻ ͲͷΑ ͏ ͳ04 ɾ ϒϥβͰ8FC(-Λ࣮ߦ͢Δʹ֤ͯ͠ϒϥβ͝ͱʹผʹఆΊ ΒΕͨ(16ϒϩοΫϦε τ ֤ϒϥβ͝ͱʹ04ผ ɾ ϏσΦνοϓผ ɾ ϏσΦ υϥΠόͷόʔδϣϯผ ɾ ֤ϒϥβͷόʔδϣϯผͷ ʢҎԼུʣ 8FC(-8JLJQFEJB IUUQTKBXJLJQFEJBPSHXJLJ8FC(- ͍ܰ
8FC(-Λѻ͑ΔϥΠϒϥϦ $SFBUF+4 QJYJKT UISFFKT 1SPDFTTJOH ʜ
8FC(-Λѻ͑ΔϥΠϒϥϦ ʜ $SFBUF+4 QJYJKT UISFFKT 1SPDFTTJOH
˞ͦͷ··ͩͱ8FC(-Λѻ͑ͳ͍ͷͰผ్ ʮXFCHM7&34*0/NJOKTʯ ΛಡΈࠐΈ·͢ IUUQTHJUIVCDPN$SFBUF+4&BTFM+4USFFNBTUFSMJC ࣮ྫ $PG GFF4DSJQU
͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS
animation
setInterval Ͱbackground-position Λը૾෯Ҿ͘ εϓϥΠ τγʔ τΛ࡞ 1 ͍··Ͱͷ4UPQNPUJPOBOJNFUJPO +BWB4DSJQU *NH
2
setInterval Ͱbackground-position Λը૾෯Ҿ͘ εϓϥΠ τγʔ τΛ࡞ 1 ͍··Ͱͷ4UPQNPUJPOBOJNFUJPO +BWB4DSJQU *NH
2 ͍ʹ͘ ͍
ࠓճ༻͍ͯ͠ΔεϓϥΠ τγʔ τ ʮʙϑϨʔϜճ܁Γฦ͍ͨ͠ʯ ʮϑϨʔϜ͚ͩඵʹ͍ͨ͠ʯ ͳͲʜʜ
$SFBUF+4 φ͍4UPQNPUJPOBOJNBUJPO
$SFBUF+4 4QSJUF4IFFU$MBTT Ξχϝʔγϣϯ͝ͱʹͲͷϑϨʔϜΛ༻͢Δ͔ઃఆͰ͖Δ +BWB4DSJQU
࣮ྫ $PG GFF4DSJQU
͓͠ͳ͕͖ 01 Parallax scrolling 02 Stop motion animation 03 CSS
animation
͍··Ͱͷ$44"OJNBUJPO +BWB4DSJQU K2VFSZBOJNBUFΛͬͯΞχϝʔγϣϯ͢Δ 1
͍··Ͱͷ$44"OJNBUJPO +BWB4DSJQU K2VFSZBOJNBUFΛͬͯΞχϝʔγϣϯ͢Δ 1 ΧΫͭ͘
7FMPDJUZKT φ͍$44BOJNBUJPO
࣮ྫ $PG GFF4DSJQU
·ͱΊ Γਚ͘ ͞ΕͨදݱͰ ࣮ํ๏Λݟ͢͜ͱͰ ͬͱύϑΥʔϚϯεΛΑ͘ ͨ͠Γ ͬͱ͔ͬ͜Α͘ Ͱ͖ͨΓ ͠·͢
·ͱΊ ʮྲྀߦ͍ͬͯΔ͔Βʯ ͱ͍͏ج४Ͱͳ͘ ͯ ʮͳʹΛ͍͔͑ͨʯ ͰΞχϝʔγϣϯΛߟ͑·͠ ΐ ͏ɹ
͝ਗ਼ௌ͋Γ͕ͱ ͏ ͍͟͝·ͨ͠ φ͍ +BWB4DSJQUΞχϝʔγϣϯ ࣮๏ ʲώΧˑϥϘʳ +BWB4DSJQUͷใަ-5ձ4QFBLFS/P