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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Gemini CLI のはじめ方
ttnyt8701
1
100
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
290
「App Intent」よくわからんけどすごい!
rinngo0302
1
130
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
980
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
650
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
140
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Understanding Kotlin Multiplatform
l2hyunwoo
0
170
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Scaling GitHub
holman
461
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
KATA
mclloyd
30
14k
Fireside Chat
paigeccino
37
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building an army of robots
kneath
306
45k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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