ΠΊΠΎΠ΄ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ div Π±Π»ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ?
1. Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ overflow Π² CSS?
2. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow
3. ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
4. ΠΡΠΈΠΌΠ΅Ρ div Π±Π»ΠΎΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ Π²ΠΎΠΏΡΠΎΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° (div) ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS. ΠΠ° ΡΡΠΎ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow.
Π ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ overflow
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ΄ CSS
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow
Π Π°ΡΡΠΌΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ»Π°ΡΡΠ° CSS. Π width ΠΈ height ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π½ΡΠΆΠ½ΡΠ΅ Π½Π°ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° (Π·Π° Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ°), Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ overflow: auto; Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Π½Π°Π΄ΠΎΠ±Π½ΠΎΡΡΠΈ
ΠΠΎΠ΄ CSS
ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ: overflow-y: scroll; (Π²Π΅ΡΡΠΈΠΊΠ°Π»Ρ) overflow-x: scroll; (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»Ρ) ΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ scroll, ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°.
ΠΠΎΠ΄ HTML ΠΈ CSS
ΠΡΠΈΠΌΠ΅Ρ div Π±Π»ΠΎΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
ΠΠΎΠ΄ HTML ΠΈ CSS
ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² overflow ΠΌΠΎΠΆΠ½ΠΎ ΡΠ±ΡΠ°ΡΡ, ΡΠΎΠ³Π΄Π° ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΈ, ΡΠ΅Π³ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠΊΡΠΈΠΏΡΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΡΠΎΠΊΡ Π»ΠΈΠ±ΠΎ Ρ overflow-x, Π»ΠΈΠ±ΠΎ Ρ overflow-y.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠ°Π΄Π΅ΡΡΡ ΡΡΠ°ΡΡΡ Π±ΡΠ»Π° ΠΏΠΎΠ»Π΅Π·Π½Π°!
ΠΠ±Π·ΠΎΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΠΌΠ΅ΡΡΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π³ΠΎΠ΄Ρ. Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΡΠ°Π»ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½Π΅Π΅. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π΅Π»ΠΎ ΡΡΡ ΠΎΡΡΠ°ΡΡΠΈ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΡΡΠ°Π»ΠΈ ΠΌΠΎΡΠ½Π΅Π΅. ΠΡΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΠΏΠΎΡΠΎΠ±Π½Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ΅ΠΌ ΡΠ°Π½ΡΡΠ΅.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ. Π¦Π΅Π»Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΎΠ±Π·ΠΎΡ ΡΠ°ΠΊΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ. Π― ΡΠ°Π·Π΄Π΅Π»ΠΈΠ» Π±Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° Π½Π° Π΄Π²Π΅ ΡΠΈΡΠΎΠΊΠΈΠ΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ. Π ΠΏΠ΅ΡΠ²ΡΡ Π²Ρ ΠΎΠ΄ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, Π²ΠΎ Π²ΡΠΎΡΡΡ β ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΎΠ±ΡΠ΅Π³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°
Π CSS ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΡΠ΅ Π½ΡΠΆΠ΄Ρ Π½Π΅ΠΊΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
βCSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: sticky
Π‘ΠΈΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«ΡΠΏΠΈΡΠ°Π΅ΡΡΡΒ» Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°.
βΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°
ΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° β ΡΡΠΎ, ΡΠΊΠΎΡΠ΅Π΅, Π½Π΅ ΠΎΡΠΎΠ±Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΈΡΠΌ. ΠΠΎ, ΠΊΠ°ΠΊ Π±Ρ ΡΠ°ΠΌ Π½ΠΈ Π±ΡΠ»ΠΎ, ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π²Π΅ΡΡΠΌΠ° ΠΊΡΡΠ°ΡΠΈ Π² ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π²ΠΈΠ³Π°Π»ΠΈΡΡ Π±Ρ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ. ΠΠ°Π½Π½ΡΠΉ ΠΏΡΠΈΡΠΌ Ρ ΠΎΡΠΎΡΠΎ ΠΎΠΏΠΈΡΠ°Π½ Π² ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΅Π³ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β ΡΡΠΎΡ. ΠΠ»Ρ ΠΌΠ΅Π½Ρ Π³Π»Π°Π²Π½ΡΠΉ ΠΌΠΈΠ½ΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΡΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ ΡΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΄Π°ΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΉ.
ΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°: ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π²ΠΈΠΆΡΡΡΡ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ.
ΠΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
βΠΡΠΎΠΊΡΡΡΠΊΠ° Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΎΠΉ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΡΠΎΡΠΊΠ°ΠΌ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ ΠΈΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Π²Π΅ΡΡΠΈΠ» ΠΎΠ±ΡΡΠ½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ Π² ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΡΡ Π±Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ API ΠΏΠΎΠΊΠ° Π΅ΡΡ Π½Π΅ΡΡΠ°Π±ΠΈΠ»Π΅Π½, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΌΡΠΌΠΈ ΡΠ²Π΅ΠΆΠΈΠΌΠΈ Π΅Π³ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡΠΌΠΈ ΠΈ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅ΡΡ ΠΊ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΊ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Ρ Π² ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½Π΅. ΠΠΎΡ Ρ ΠΎΡΠΎΡΠ°Ρ ΡΡΠ°ΡΡΡ Π½Π° ΡΡΡ ΡΠ΅ΠΌΡ.
ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π° Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π±ΡΠ°ΡΠ·Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» Π±Ρ Π²ΠΈΠ΄Π΅Π½ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ
ΠΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
βΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
ΠΠ»Π°Π²Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄Π° window.scrollTo() Π² JavaScript, ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° scroll-behavior. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΡΠΎ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ ΡΡΠ΅Π±ΡΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. ΠΠΎ ΠΏΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°ΠΊΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΈΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° β ΡΡΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Ρ ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ.
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΎΠ±ΡΠ΅Π³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ
βΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ API Intersection Observer
API IntersectionObserver ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Ρ ΡΡΠΏΠ΅Ρ ΠΎΠΌ ΡΠ΅ΡΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ, Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, β ΡΡΠΎ Π·Π½Π°Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠ°Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΈΠ΄ΠΈΠΌΠ°. ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ API IntersectionObserver ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠ΅ΠΉ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΠΎ, Π΄Π°ΠΆΠ΅ ΡΠ°ΠΊ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ (Ρ ΠΎΡΡ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ) ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ API. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β ΡΡΠΎ Π·Π°ΠΏΡΡΠΊ ΡΠ°Π·Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΡ API, ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π² ΡΠΈΡΡΠ°ΡΠΈΠΈ, Π΅ΡΠ»ΠΈ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π³Π΄Π΅-ΡΠΎ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎ Π΅ΡΡΡ, Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π½Π΅ ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΠΈΠ· Π½Π΅Ρ.
βΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ scroll
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΎΠ±ΡΠ΅Π³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΡΠ΅Π»Π΅Π½Ρ Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΡΠΌΠΈ, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌΡΠΌΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡ, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΠ»ΡΠ½Π΅Π΅ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΠΆΠΈΠ·Π½Ρ, Π½Π΅ Π·Π°ΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡΠΌΠΈ.
βScrollMagic
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ScrollMagic Π΄Π°ΡΡ Π½Π°ΠΌ ΡΡΠ°Π²Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ API, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅. ΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ GSAP ΠΈ Velocity.js. ΠΡΠ°Π²Π΄Π°, Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π±ΡΠ»Π° ΡΠΎΠ·Π΄Π°Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ScrollScene.
βScrollScene
ScrollScene β ΡΡΠΎ, Π² ΡΡΡΠ½ΠΎΡΡΠΈ, ΠΎΠ±ΡΡΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π° Π½Π° ΡΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ ScrollMagic ΠΈ (ΠΈΠ»ΠΈ) Ρ API IntersectionObserver. ΠΠ΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ScrollMagic, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π»ΡΡΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. Π’ΡΡ ΠΈΠΌΠ΅ΡΡΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ, Π²Π»ΠΈΡΡΡΠΈΡ Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ GSAP.
βScrollTrigger
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ScrollTrigger β ΡΡΠΎ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ GreenSock-ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ GSAP. ΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, Π΅Ρ API ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΌΠ½Π΅ ΡΠ°ΠΌΡΠΌ ΠΏΡΠΎΡΡΡΠΌ ΠΈΠ· API ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, Π²Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΡΠ΅ ΡΠΎ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²ΡΡ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ (WebGL, canvas, SVG, DOM), ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ GreenSock, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠΌΠΎΡΡ ΠΏΠΎ Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΡΠΎΡΡΠΌΠ°Ρ GreenSock.
βΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, Π΄ΠΎΡΡΠΎΠΉΠ½Π°Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΡ: Locomotive Scroll
Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°.
API Intersection Observer | ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° | Π’ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ Π² CSS | CSS-ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° | CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: sticky | |
ΠΠ°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | — | — | — | — | + |
ΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° | — | — | — | + | — |
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | Β± | — | — | Β± | — |
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ | Β± | — | + | — | — |
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΏΠ°ΠΊΠ΅ΡΠ½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | + | — | — | — | — |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° | + | + | + | + | + |
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½Π° (Ρ ΠΎΡΠΎΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°) | Β± | Β± | Β± | + | Β± |
ΠΠΎΠ»Π½Π°Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π° Π² Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ | — | — | — | — | — |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ | n/a | n/a | n/a | n/a | n/a |
Π Π°Π±ΠΎΡΠ° Ρ DOM, Canvas, WebGl, SVG | + | — | — | — | — |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | + | + | + | + | + |
ΠΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅Π²Π°Π½ΡΠ½ΡΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ | + | + | + | — | + |
Π Π°Π·Π»ΠΈΡΠ°Π΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° | Β± | — | — | — | — |
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, Π²ΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π² Π±ΡΠ°ΡΠ·Π΅Ρ | + | + | + | + | + |
ΠΠΎΡ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ.
ScrollTrigger | Locomotive Scroll | ScrollScene | ScrollMagic | |
ΠΠ°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | + | Β± | + | + |
ΠΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° | + | + | + | + |
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | + | Β± | Β± | Β± |
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ | + | Β± | Β± | Β± |
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΏΠ°ΠΊΠ΅ΡΠ½Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | + | — | + | — |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° | + | + | + | + |
ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½Π° (Ρ ΠΎΡΠΎΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°) | + | Β± | + | + |
ΠΠΎΠ»Π½Π°Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π° Π² Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ | + | Β± | + | + |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ | + | + | + | — |
Π Π°Π±ΠΎΡΠ°Π΅Ρ Ρ DOM, Canvas, WebGl, SVG | + | Β± | + | + |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² | + | + | + | Β± |
ΠΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅Π²Π°Π½ΡΠ½ΡΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ | + | — | Β± | Β± |
Π Π°Π·Π»ΠΈΡΠ°Π΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° | + | Β± | + | + |
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, Π²ΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π² Π±ΡΠ°ΡΠ·Π΅Ρ | — | — | — | — |
ΠΡΠΎΠ³ΠΈ
ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΎΠ±ΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠ² ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, Π²ΡΠΎΠ΄Π΅ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ CSS. ΠΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ ΠΌΠ΅ΡΠ΅ β ΡΡΠΎ ΡΠ°ΠΊ ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π»ΠΎΠ² Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ.
Π― ΠΎΠ±ΡΡΠ½ΠΎ, Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°, ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ScrollTrigger. ΠΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΡΡΠΈΡΡ Π²ΡΠ΅Π³ΠΎ, Π½Π° ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ ΡΠΈΡΡΡΠΉ CSS, Π° ΡΠ°ΠΊ ΠΆΠ΅ β ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π±Π΅ΡΡΡ Π½Π° ΡΠ΅Π±Ρ Π·Π°Π±ΠΎΡΡ ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ ΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠΌΡ, ΠΊΡΠΎ Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ, ΠΏΡΠΎΡΡΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ Π΄Π΅Π»Π°ΠΌΠΈ.
ΠΠ°ΠΊΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ?
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠ΅Π΄ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ², Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ.
ΠΠΎΡΠ»Π΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ°ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π·Π°Ρ
ΠΎΡΠ΅Π» Π²ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΊΠΎΠ΄Π° ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π½Π° Π²ΡΠ΅Ρ
ΡΠΈΠΏΠ°Ρ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ².
Π‘Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ div Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ div Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ.
ΠΠ΅ΡΠΎΠ΄ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°
ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½. ΠΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² ΠΈ jQuery. ΠΡΠΎΡΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ overflow ΠΈ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ΅ΡΠΎΠ΄ Flexbox
Flexbox ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ flex-wrap Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ flexbox Π»ΡΡΡΠ΅. ΠΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE ΠΈ Edge.
Overflow ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
Π iOS Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Ρ ΠΈΠΌΠΏΡΠ»ΡΡΠΎΠΌ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΡΡΠ½Π΅ΡΠ΅ ΠΏΠ°Π»ΡΡΠ΅ΠΌ Π²Π²Π΅ΡΡ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ±Π΅ΡΠ΅ΡΠ΅ ΠΏΠ°Π»Π΅Ρ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π½Π΅ΡΠ΅ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ Π° ΠΎΡΡΠΊΠΎΡΠΈΡ Π½Π°Π·Π°Π΄ ΠΎΡ ΠΊΠΎΠ½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²ΡΡΠ°Π½Π΅Ρ Π½Π° ΠΌΠ΅ΡΡΠΎ.
Π ΡΡΠ°ΡΡΡΡ, ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π»Π΅Π³ΠΊΠΎ ΡΠ΅ΡΠΈΡΡ:
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³? Π’Π°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ. Π₯ΠΎΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π° WebKit.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌΠΈ.ΠΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ:ΠΎΠ½ΠΈ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΊΠΎΠ΄ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². Π Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ Π±ΠΎΠ»ΠΈ Ρ jQuery!
Π‘ΠΏΠΎΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π² CSS ΠΈ JavaScript
ΠΠ°Π²Π΅ΡΠ½ΡΠΊΠ° Π²Ρ ΠΏΠΎΡΠ΅ΡΠ°Π»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΡΡΠ»ΠΊΠ΅ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΡ. ΠΡΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° Π»ΡΠ½Π΄ΠΈΠ½Π³Π°Ρ (LandingPage, ΠΈΠ»ΠΈ ΠΏΠΎΡΠ°Π΄ΠΎΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°), Π² ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°Π·Π±ΠΈΡΠΎ Π½Π° ΡΠ°ΡΡΠΈ, ΠΈΠ»ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ (ΠΎΡ Π°Π½Π³Π». scroll).
ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π½ΠΎ ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΡΠ»ΠΈ ΠΏΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΅ΡΡΡ 5 ΡΡΡΠ»ΠΎΠΊ Π²Π²Π΅ΡΡ Ρ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΡΡΠ»ΠΊΠ° ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ Π΄Π»Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ° Π½Π°Π²Π΅ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΡ Π΄Π»Ρ ΡΠ΅ΡΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠΆΠΊΠΎΠΉ Π΄Π΅Π³ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΏΠΎΠ»Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊΠΎΠ²Π° ΠΎΠ½Π° Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΈ Π½Π° caniuse.com.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° scroll-behavor Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΠΎΡΡΠΎΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery ΠΈ JavaScript.
Π‘ΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
Π‘Π°ΠΌ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ:
ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π° JavaScript
ΠΠ΄Π΅ΡΡ ΡΠΎΠΆΠ΅ Π΅ΡΡΡ 3 ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π½ΡΡ JS-ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
Π Π΅ΡΠ΅Π½ΠΈΠ΅ 1. ΠΠ΅ΡΠΎΠ΄ scrollIntoView()
ΠΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π° MDN ΡΠ·Π½Π°Π΅ΠΌ, ΡΡΠΎ
ΠΠ΅ΡΠΎΠ΄ Element.scrollIntoView() ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ» Π²ΡΠ·Π²Π°Π½ scrollIntoView() Π±ΡΠ» Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ css-ΡΠ²ΠΎΠΉΡΡΠ²Ρ scroll-behavior: smooth Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π½ΡΠΆΠ½ΡΠΌ id, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π² Π²ΠΈΠ΄Π΅ Ρ ΡΡ Π² ΡΡΡΠ»ΠΊΠ΅.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΈ ΡΡΡ Π½Π΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ Π±Π΅Π· «Π»ΠΎΠΆΠΊΠΈ Π΄Π΅Π³ΡΡ» Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΠΌΡΡ ΠΊ caniuse.com ΠΈ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΡΠ°ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ:
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° scrollIntoView Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½ΡΠΆΠ½ΠΎΠ΅ Π½Π°ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° behavior: ‘smooth’ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° scrollIntoView() (ΠΎΡΠΊΡΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅)).
Π Π΅ΡΠ΅Π½ΠΈΠ΅ 2. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ window.scrollBy() Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π’ΡΡ Π²ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΈΠΌΠ΅ΡΡ Ρ ΠΎΡΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
ΠΠΎΠ΄ JavaScript ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ, ΡΡΠΎ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ), Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ-ΡΠΊΠΎΡΡ Π½Π° ΡΠ°Π·Π΄Π΅Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ offsetTop (ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΡ Ρ) ΡΠ½Π°ΡΠ°Π»Π° Π·Π°Π΄Π°Π½Π° ΠΊΠ°ΠΊ 0.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ°ΡΠ° ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ: 2016-12-15
ΠΡ Π°Π²ΡΠΎΡΠ°: ΡΡΠ°ΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΎΡΡΡ, ΠΠΈΡΠ΅ΡΠ° ΠΠΈΠ·ΠΌΠ΅Π½ΡΠ°. ΠΠΈΡΠ΅Ρ β front-end ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π° ΡΠ°ΠΉΡΠ΅ Audience, Π³Π΄Π΅ ΠΎΠ½ Π»ΡΠ±ΠΈΡ ΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ Π½Π° SCSS. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΎΠ½ Π½Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΡΠΎ, ΡΡΠΎ Ρ Π½Π°Π·ΡΠ²Π°Ρ ΡΠ΅ΡΡΠ½ΡΠΌ CSS ΡΡΡΠΊΠΎΠΌ. ΠΠ΅ΡΡ Π²Π΅Π± ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΡΡΠΎΠ΅Π½ΠΈΠ΅. ΠΡ ΡΠΈΡΠ°Π΅ΡΠ΅ ΡΠ°ΠΉΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ½ΠΈΠ³Ρ: ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Ρ ΠΎΡΠ΅ΡΡΡ ΡΠΉΡΠΈ ΠΎΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ ΡΡΠΌΠ°ΡΡΠ΅Π΄ΡΠ΅Π΅: ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ. ΠΠ»ΠΈ Π΅ΡΠ΅ Π±Π΅Π·ΡΠΌΠ½Π΅Π΅, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ!
ΠΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π΄Π΅Π»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ. Π’Π°ΠΊΠΎΠ³ΠΎ Π΄Π°ΠΆΠ΅ Π² ΠΏΠ»Π°Π½Π°Ρ Π½Π΅Ρ Π² CSS.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠ»ΠΎΡ ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΡΠ°Π±ΠΎΡΠ°Ρ, ΡΡΠΎ Π±Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΠ»ΠΎΡΡ. ΠΡ Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΉ, Π° ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ β ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠΊΠ°. ΠΠ±ΡΡΠ½ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ Ρ ΡΠ»Π°ΠΉΠ΄ΠΎΠ² ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 4:3 ΠΈΠ»ΠΈ 16:9. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Ρ Π½Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ Π²Π΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ. ΠΠΎΠ΄ Β«ΠΌΡΒ» Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ ΡΠ΅Π±Ρ. ΠΠΎ ΡΡΠΎ Ρ Π»ΡΠ±Π»Ρ, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ.
ΠΡΡΠ³ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΠ½Π΅ Π² Π³ΠΎΠ»ΠΎΠ²Ρ ΠΏΡΠΈΡΠ΅Π» ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ. ΠΠ΄Π΅Ρ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»ΡΠΌ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠΎΠ²Π°ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΠ»Π°ΠΉΠ΄Π΅. ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΡΠΎΠ²Π°ΡΠΎΠ² Π½Π΅ ΡΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π±Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠ°Π·Π±ΠΈΡΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π½Π° ΡΡΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ, ΠΊΠ°ΠΆΠ΄Π°Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΈ ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠΎΠ²Π°ΡΠ° Π²ΠΈΠ΄Π½Ρ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ, Π° ΠΊ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌ ΡΠΎΠ²Π°ΡΠ°ΠΌ ΠΎΡΠΊΡΡΡ Π»Π΅Π³ΠΊΠΈΠΉ Π΄ΠΎΡΡΡΠΏ.
Π‘ΠΏΠΎΡΠΎΠ± Π±Π΅Π· JavaScript
ΠΡΠ΅ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ Π½Π° JS ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ°ΡΡΠ° ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΅ΡΡΡ Π½Π° CSS-Tricks. ΠΠ½Π΅ ΡΡΠ°Π»ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Π²ΠΎΠΏΠ»ΠΎΡΠΈΡΡ ΡΡΡ ΠΈΠ΄Π΅Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΠΌ:
ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ;
ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π° 90 Π³ΡΠ°Π΄ΡΡΠΎΠ² ΠΏΡΠΎΡΠΈΠ² ΡΠ°ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½Ρ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ ΡΠΏΡΠ°Π²Π°;
ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
Π¨Π°Π³ 1) ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π±Π»ΠΎΠΊ div Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π±ΡΠ΄Π΅Ρ 300px ΡΠΈΡΠΈΠ½ΠΎΠΉ, Π² Π½Π΅ΠΌ Π±ΡΠ΄Π΅Ρ 8 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² 100Ρ 100px. Π Π°Π·ΠΌΠ΅ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π»ΡΠ±ΡΠ΅.
ΠΡΡΠΎΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΡΠ°Π½Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ. ΠΠΈΠΆΠ΅ Β«ΡΠΈΡΠΈΠ½Π°Β» ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 300px:
Π Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
Π¨Π°Π³ 2) ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π’ΠΎΠ»ΡΠΊΠΎ Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°: Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ²Π΅ΡΠ½ΡΠ»ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ.
Π¨Π°Π³ 3) Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Π²Π΅ΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ? ΠΠΎΠ²Π΅ΡΠ½ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° transform.
Π¨Π°Π³ 4) ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΠΌΠΎΡΡΠΈΡΡΡ Π²ΡΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ, Π½ΠΎ Π΅ΡΡΡ ΠΏΠ°ΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
ΠΡ ΠΏΠΎΠ²Π΅ΡΠ½ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΊΠΎΡΡ Π·Π°Π΄Π°Π»ΠΈ ΠΏΡΠ°Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ», ΠΈΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Π»Π΅Π²Π°Ρ ΡΡΠΎΡΠΎΠ½Π° ΡΠΌΠ΅ΡΡΠΈΠ»Π°ΡΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠΈΡΠ΅ ΠΏΠ°Π»Π΅Ρ ΠΊ ΠΏΡΠ°Π²ΠΎΠΌΡ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ²Π΅ΡΠ½ΠΈΡΠ΅ Π΅Π΅. ΠΡΡ ΠΎΠ΄: Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ Π΅Π΅ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° translate.
Π£ΠΆΠ΅ Π»ΡΡΡΠ΅. ΠΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π½Π°Π±Π»ΡΠ΄Π°Π΅ΡΡΡ ΠΈ Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠ°Π²ΠΈΡΡ, Π·Π°Π΄Π°Π² ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΡ Π½ΠΈΠΉ margin ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π² Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π°ΡΠ΅Π», ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡ Π½ΠΈΠΉ padding ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΡΠ°Π²Π½ΡΠΉ ΡΠΈΡΠΈΠ½Π΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠΎΠ·Π΄Π°Π² Π±ΡΡΠ΅ΡΠ½ΡΡ Π·ΠΎΠ½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎ Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ:
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
Π― ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π½Π° Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΌΠ½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠ΅ΡΠΊΡΠΎΠΏ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΊΡΠΎΠ»Π»Π±Π°ΡΠΎΠ² ΠΏΠΎΠΊΠ° ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² Webkit/Blink Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π² Firefox ΠΈ IE ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΉ ΡΠΊΡΠΎΠ»Π»Π±Π°Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠ°Π²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS ΠΈ ΠΏΡΡΡΠ°ΡΡ ΠΈΡ Π²ΠΎΠΎΠ±ΡΠ΅, Π½ΠΎ ΡΡΠΎ ΡΠ΅ΠΌΠ° Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΡΠΎΠΊΠ°.
ΠΡΠΎΠΊΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π΄Π΅ΡΠΊΡΠΎΠΏΠ΅. ΠΠΎ Ρ ΠΌΠΎΠ΅Π³ΠΎ Π½ΠΎΡΡΠ±ΡΠΊΠ° ΡΠ²ΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅ Π½Π° ΡΡΠΎΡ ΡΡΠ΅Ρ. ΠΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ°Ρ ΡΠΊΡΠΈΠ½Π°ΠΌΠΈ ΠΈ ΡΠ°Ρ ΠΏΠ°Π΄Π°ΠΌΠΈ Π΄Π΅ΠΌΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, Π±ΡΠ΄ΡΠΎ div Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π»ΠΈ.
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
Π― Π±ΡΠ» ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠ΄ΠΈΠ²Π»Π΅Π½, ΠΊΠΎΠ³Π΄Π° ΡΠ·Π½Π°Π», ΡΡΠΎ Android ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π±ΡΠ» ΠΏΠΎΠ²Π΅ΡΠ½ΡΡ, ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠΊΡΠΎΠ»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π°ΠΉΠΏΠΎΠ² Π²ΠΏΡΠ°Π²ΠΎ ΠΈ Π²Π»Π΅Π²ΠΎ.
Π‘ iOS ΠΆΠ΅ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, Π²ΡΠ΅ Π½Π΅ ΡΠ°ΠΊ Π³Π»Π°Π΄ΠΊΠΎ. ΠΡΠ°ΡΠ·Π΅Ρ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, Π±ΡΠ΄ΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π΅ ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π»ΠΈ Π²ΠΎΠ²ΡΠ΅. ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²Π°ΠΉΠΏΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ°Π½Π½ΠΎ. Overflow: hidden Π½Π΅ ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠΎ Π΄Π°Π½Π½ΡΠΌ ΡΠ°ΠΉΡΠ° Can I Use ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² CSS ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Ρ 93%+ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ (Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ, Π½ΠΎΡΠ±ΡΡ 2016). Π’ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ.
Π₯ΠΎΡΡ Π»ΡΡΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π² ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π΅. Π― ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» Π΅Π³ΠΎ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π½Π° Π²ΡΠ΅Ρ ΠΈ Π½Π΅ ΡΠ°ΠΊ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ.
Π‘Π°ΠΌΠ°Ρ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° β ΡΠ΅Π½ΡΠΎΡΠ½ΡΠ΅ ΠΈΠ½ΠΏΡΡΡ, Π² ΠΊΠΎΡΠΎΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π°Π»Π΅Π²ΠΎ ΠΈ Π½Π°ΠΏΡΠ°Π²ΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ²Π°ΠΉΠΏΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅ Ρ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎ ΡΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΅Π³ΠΎ. Π Π΄Π°ΠΆΠ΅ ΡΠΎΠ³Π΄Π° ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΡΡ Π·Π΄ΡΠ°Π²ΠΎΠΌΡ ΡΠΌΡΡΠ»Ρ. ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅ΡΠ΅Π½ΠΈΡ β Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠ΅ ΠΈΠ½ΠΏΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½ΠΎ ΡΠΎΠ³Π΄Π° Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π²ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ Π½Π° JS ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ Π½Π°ΡΠ΅Π³ΠΎ CSS Ρ Π°ΠΊΠ°.
ΠΠ²ΡΠΎΡ: Pieter Biesemans
Π Π΅Π΄Π°ΠΊΡΠΈΡ: ΠΠΎΠΌΠ°Π½Π΄Π° webformyself.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3