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
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
790
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
rage against annotate_predecessor
junk0612
0
170
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
testingを眺める
matumoto
1
140
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Music & Morning Musume
bryan
46
6.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
29
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
It's Worth the Effort
3n
187
28k
How GitHub (no longer) Works
holman
315
140k
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