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
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
XSLTで作るBrainfuck処理系
makki_d
0
210
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
Gleamという選択肢
comamoca
6
760
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Benchmark
sysong
0
270
Create a website using Spatial Web
akkeylab
0
300
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimizing for Happiness
mojombo
379
70k
Rails Girls Zürich Keynote
gr2m
94
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
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