VisualInkling & Stick
Π‘ΡΠΈΠΊ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Ρ ΡΠ΅Π±Π΅ ΠΈΡΡΠΎΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ HTML β Π±Π΅Π· JavaScript. Π‘ ΡΠ΅Π³ΠΎ Π±Ρ ΡΡ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π°ΡΠ°Π» Π΅Ρ ΠΊΠΎΠ΄ΠΈΡΡ?
ΠΠ°ΡΠ½ΠΈ Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΆΠ΅ΡΠ° ΡΠ΅ΡΠ΅Π· CSS-ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉ ΡΠΊΡΡΡΡΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ°Π·Π΄Π΅Π»Ρ. ΠΠ°ΠΆΠ΄Π°Ρ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ° Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Π½ΠΎ ΡΡ ΠΌΠΎΠΆΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ `:target` Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Ρ
ΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ»Ρ ΡΡΡΠ΅ΠΊΡΠ° ΡΠ°ΠΌΠΎΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΎΠΏΠΈΡΠ°ΠΉΡΡ Π½Π° CSS `@keyframes`, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ `::before/::after`. ΠΡΡΠ°Π²Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: `<div class="story"><input type="radio" id="s1" name="slide" checked hidden>β¦</div>`. ΠΠ°ΡΠ΅ΠΌ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΡΡ ΡΠΌΠΎΠΆΠ΅ΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ `:checked` ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΡΠ΅ΡΡΠΈΠΊΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΈΡΡΠΎΡΠΈΠΈ. JavaScript Π½Π΅ Π½ΡΠΆΠ΅Π½, ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΡΡΠ΅ CSS-ΡΡΡΠΊΠΈ.
ΠΡΡΡΠΎ, Π·Π½Π°ΡΠΈΡ, ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ Π³Π»Π°Π²Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π» ΠΊ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡ :target Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ β ΠΊΠ°ΠΊ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° CSS. ΠΡΠΎΡΡΠΎ ΡΠ»Π΅Π΄ΠΈ Π·Π° ΡΠΈΡΡΠΎΡΠΎΠΉ HTML ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ keyframes Π΄Π»Ρ ΡΡΠΈΡ
Π΅Π΄Π²Π° Π·Π°ΠΌΠ΅ΡΠ½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΠ½Π°, Π½Π°ΠΌΠ΅ΠΊΠ°ΡΡΠΈΡ
Π½Π° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ»Π°Π²Π½ΠΎΠ΅ β ΡΡΠΎΠ±Ρ CSS Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΊΠ°ΠΊ ΠΆΠΈΠ²Π°Ρ ΠΈΡΡΠΎΡΠΈΡ, Π° Π½Π΅ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ. ΠΠ°ΠΊ ΠΏΡΠΎΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²Π΅ΡΡΡΠΊΠ°?
ΠΠΎΠ»ΡΡΠΈΠ» ΠΎΡΠ½ΠΎΠ²Ρ: Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ°ΡΡΠΈ β ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ <section class="chapter" id="c1">β¦</section>, ΡΠΏΡΡΡΠ°Π½Π½ΡΠΉ <input type="radio"> Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅, ΠΈ Π»Π΅ΠΉΠ±Π», ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ :checked. CSS ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅/ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ transition Π½Π° opacity, Π° ΡΠΎΠ½ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΈΠΊΠ»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ @keyframes. HTML ΡΡΠ°ΡΠ°ΡΡΡ Π΄Π΅ΡΠΆΠ°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ β ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈ Π»Π΅ΠΉΠ±Π»Ρ, Π±Π΅Π· Π»ΠΈΡΠ½ΠΈΡ
div. Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π³ β ΡΠ²ΡΠ·Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ :checked ΡΠΎ ΡΠΌΠ΅Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π° ΠΏΠΎΡΠΎΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΡΠ΅Π½Π° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° ΠΆΠΈΠ²ΠΎΠΉ.