ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠ΅Π΄ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ², Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ.
ΠΠΎΡΠ»Π΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π·Π°Ρ ΠΎΡΠ΅Π» Π²ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ° ΠΊΠΎΠ΄Π° ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π½Π° Π²ΡΠ΅Ρ ΡΠΈΠΏΠ°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ².Π‘Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ div Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
<div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <divclass="card"><h3>Card</h3></div> </div>
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ div Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ.
ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½. ΠΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² ΠΈ jQuery. ΠΡΠΎΡΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ overflow ΠΈ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.card {
flex: 0 0 auto;
}
}
ΠΠ»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ (overflow-y) ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ (overflow-x). ΠΠ°ΡΠ΅ΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ display: inline-block, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ Π² ΡΡΡΠΎΠΊΠ΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS, Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈΡΡ β ΡΡΠΎ white-space: nowrap. ΠΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ nowrap.
ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ? ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π°Π±ΠΎΡΠΈΡΠ΅ΡΡ ΠΎΠ± Internet Explorer ΠΈΠ»ΠΈ Edge. Π Microsoft Π³ΠΎΠ²ΠΎΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π±ΡΠ΄ΡΡΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Edge.

Flexbox ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΡ ΡΠ°Π±ΠΎΡΡ.
.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.card {
flex: 0 0 auto;
}
}
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ flex-wrap Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ flexbox Π»ΡΡΡΠ΅. ΠΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE ΠΈ Edge.
Π iOS Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Ρ ΠΈΠΌΠΏΡΠ»ΡΡΠΎΠΌ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΡΡΠ½Π΅ΡΠ΅ ΠΏΠ°Π»ΡΡΠ΅ΠΌ Π²Π²Π΅ΡΡ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ±Π΅ΡΠ΅ΡΠ΅ ΠΏΠ°Π»Π΅Ρ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π½Π΅ΡΠ΅ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ Π° ΠΎΡΡΠΊΠΎΡΠΈΡ Π½Π°Π·Π°Π΄ ΠΎΡ ΠΊΠΎΠ½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²ΡΡΠ°Π½Π΅Ρ Π½Π° ΠΌΠ΅ΡΡΠΎ.
Π ΡΡΠ°ΡΡΡΡ, ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π»Π΅Π³ΠΊΠΎ ΡΠ΅ΡΠΈΡΡ:
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
}
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³? Π’Π°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ. Π₯ΠΎΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π° WebKit.
.scrolling-wrapper {
&::-webkit-scrollbar {
display: none;
}
}
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌΠΈ.ΠΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ:ΠΎΠ½ΠΈ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΊΠΎΠ΄ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². Π Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ Π±ΠΎΠ»ΠΈ Ρ jQuery!
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«How To Create Horizontal Scrolling ContainersΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π» ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠΎΠ΄Π½ΡΠΌ. Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Π² ΡΡΠΎΠΌ
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π² ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»Π°. ΠΠ°Ρ ΠΎΡΠ΅Π½Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ ΡΠ΅Π»Π΅ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΡΡΡ ΠΈ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°. Π§ΡΠΎΠ±Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΡΡΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅, ΠΌΡ ΠΏΠ΅ΡΠ΅Π²Π΅Π»ΠΈ ΡΡΠ°ΡΡΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΊΡΠΎΠ»Π»Ρ. ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠΌ ΠΈ ΠΎΠ±ΡΡΠ΄ΠΈΡΡ Π΄Π°Π½Π½ΡΡ ΡΠ΅ΠΌΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ β¦
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ: βΠΡΠΊ ΠΏΡΠΎΡΠΈΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»Π°ββ¦
ΠΡΠ΅ΠΌΡ ΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²ΡΡ ΠΏΠ΅ΡΠ΅ΠΎΡΠΌΡΡΠ»ΠΈΠ²Π°Π΅ΡΡΡ.
Π Π·Π½Π°ΡΠΈΡ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΉΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΌΠΎΠ΄Π½ΡΠΌΠΈ. ΠΡΠΎ ΡΠΌΠ΅Π»Π°Ρ ΠΈ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠ°Ρ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΠΏΠΎΠ΄Π°Π²Π»ΡΡΡΠ΅Π΅ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΡΠΈΡΠΈΠ½Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΎΡΠ΅Π²ΠΈΠ΄Π½Π° β Π΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ, ΠΎΠ½ ΠΏΡΠΈΠ²ΡΡΠ΅Π½ ΠΈ ΡΠ°ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ. Π‘Π°ΠΉΡΡ Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΠΈΡΠ°ΡΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΌΠ½Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π°, ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Π²ΠΈΠ°Π½ΡΠ½ΡΠΌ ΠΈ ΡΠΌΠ΅Π»ΡΠΌ.
ΠΠ·Π±ΡΠ°Π²ΡΠΈΠ΅ Β«ΡΡΠ΅Π·ΡΒ» Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠ°ΡΡΡΠΆΠ΄Π°ΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ°. Π ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠ»ΠΈ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΏΡΠΎΠ²ΠΎΠ·Π³Π»Π°ΡΠ°ΡΡ ΡΠ²ΠΎΠΈ ΡΠ°ΠΉΡΡ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΈΡΠΊΡΡΡΡΠ²Π°.
(http://www.guillaumejuvenet.com/)
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ β ΡΡΠΎ Π·Π°ΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Π½Π΅ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°ΠΌΠΊΠΈ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅, ΡΠΎΡΠ³ΠΎΠ²Π°Ρ ΠΌΠ°ΡΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ°Ρ ΡΠ°ΠΊΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΡΠ°ΠΉΡΠ°, ΡΠ°ΡΡΠΎ Π·Π°ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠ΅Π±Π΅ ΡΠ΅ΠΏΡΡΠ°ΡΠΈΡ Β«ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΠΎΠΉΒ» ΠΈ Β«ΡΡΠ»ΠΎΠΉΒ».
ΠΠΎΡΠ΅ΠΌΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠ² Π²Π²Π΅ΡΡ -Π²Π½ΠΈΠ· ΡΡΠ°Π»ΠΎ Π½Π΅Π³Π»Π°ΡΠ½ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ, ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΈ Π² Π³ΠΎΠ»ΠΎΠ²Ρ Π½Π΅ ΠΏΡΠΈΠ΄Π΅Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊ-ΡΠΎ ΠΈΠ½Π°ΡΠ΅. ΠΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠ΅ ΠΌΡΡΠΈ Ρ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΊΡΠΎΠ»Π»Ρ Π² ΡΠ°ΡΠΏΠ°Π΄Π°Ρ Π½Π° Π½ΠΎΡΡΠ±ΡΠΊΠ°Ρ β Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΊΠΎΡΠ΅Π½ΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ΄Π΅Ρ. ΠΠ΅Π±-ΡΠ°ΠΉΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΡΠ²Π½ΠΎ ΠΏΡΠ΅Π½Π΅Π±ΡΠ΅Π³Π°ΡΡ Π½ΠΎΡΠΌΠ°ΠΌΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², Π·Π°ΡΠ²Π»ΡΡ ΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΠΈ.
Π‘ΡΠ°Π²ΠΊΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΊΠΎΠΉ ΡΠ΄Π°ΡΠ½ΠΎΠΉ ΠΈΠ΄Π΅Π΅ΠΉ
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ Π² ΡΠΌΠ°ΡΡΠΎΡΠ½Π°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΡΠΆΠ΅ Π½Π΅ Π½ΠΎΠ²ΠΎ ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΈΡΠΎΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΡΠΎΡΠ΅. ΠΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π»ΠΎΠΌ ΡΡΠ΄Π΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΡΠ°ΡΡΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠ΅.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ³ΠΎ ΡΠΆΠ΅ Π±ΡΠ»Π° Π²ΡΡΠΊΠ°Π·Π°Π½Π° Π²ΡΡΠ΅. ΠΡΠ΄ΠΈ Π½Π΅ Π·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ Π΅Π³ΠΎ ΠΊΠ°ΠΊ-ΡΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΊΡΠ°Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΡΠΊΡΠ°Π½Ρ Π΄Π΅ΡΠΊΡΠΎΠΏΠΎΠ² ΡΡΠΈΡΠ°ΡΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠΌΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΡΡ ΠΎΠ΄ΡΡΠ²ΠΎ Π·Π΄Π΅ΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ. ΠΠ΅Π»ΡΠ·Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΎ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ .
ΠΠ΄Π΅ΡΡ Π·Π° ΠΎΡΠ½ΠΎΠ²Ρ Π±Π΅ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π»ΡΠ΄ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ Π² ΠΌΡΡΠ»Π΅Π½ΠΈΠΈ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ½ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²Π΅ΡΠ΅ΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½Π΅Π΄ΠΎΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ, ΠΎΡΡΠ°Π²ΠΈΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π²Π½Π΅ ΠΈΡ Π·ΠΎΠ½Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ°.
ΠΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΆΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π½Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Ρ Π°Π½ΠΈΠΊΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π° Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠ΅ Π² Π²Π΅Π±-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ .
ΠΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ
Π Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ Π΅Π³ΠΎ Π²Π°ΠΆΠ½ΠΎΡΡΠΈ, ΠΈΠ΄ΡΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ. ΠΠ»ΡΡΠ΅Π²ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π° Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ β ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ-ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ. ΠΠ½ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π»ΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»Π°. Π ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅, ΠΎΠ±ΡΠ°ΡΠΈΠ² Π½Π° Π½Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΠΎΠ³Π΄Π° ΡΡΠΎΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΎ ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΈΡΠ΅
(http://qandhlondon.com/)
CΠ°ΠΉΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΡΠΈΡΡΠ°ΡΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΅Π΄ΠΈΠ½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²: Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ², Π³ΡΡΠΏΠΏ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΡ, ΡΡΡΠ»Π°ΡΡΠΈΠ΅ΡΡ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ βΠ΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ
β ΡΠ°ΠΉΡΠΎΠ², ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½ΡΠ΅ Π½Π° ΠΏΡΠΎΡΠΌΠΎΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² β Π²ΠΎΡ ΡΡΠ΅ΡΠ° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π³Π΄Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π» ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΌΠ΅ΡΡΠ΅Π½.
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ
(http://movingislands.com/en)
Π₯ΠΎΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π·Π½Π°ΠΊΠΎΠΌΠΎ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ (ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π²ΡΡ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ), Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ (Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°) ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠΆΠ΄Π°ΡΡ. ΠΠ½Π° ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΡΠ·ΡΠ²Ρ ΠΎΡ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΅Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ. ΠΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°ΡΠ²ΠΈΡΡ ΠΎ ΡΠΎΡΠ³ΠΎΠ²ΠΎΠΉ ΠΌΠ°ΡΠΊΠ΅. ΠΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π»ΡΠ΄ΡΠΌ ΡΡΠΎ Π½Π΅ΠΏΡΠΈΠ²ΡΡΠ½ΠΎ.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ Π±Π»ΠΎΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
ΠΠ΄Π½Π° ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ΅Π°ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Ρ Π½ΠΈΠΌ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΎΠ²ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΡ ΠΎΠ΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ· Π΅Π³ΠΎ Π·ΠΎΠ½Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ°.
ΠΡΠ΄ΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ Π΄Π°ΠΆΠ΅ ΡΠ²Π½ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΊΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΡΠ°ΡΡΠΎ ΠΎΡΡΠ°Π²Π»ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΠ΅Π»ΠΊΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈ Π½Π΅ΡΡΠΎΠ½ΡΡΡΠΌΠΈ.
(http://www.lorenzobocchi.com/)
ΠΠ»Π°Π²Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΊΠ°Ρ ΡΠΎΡΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠΉ ΡΡ Π΅ΠΌΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΠΈΠ»ΠΈ Π·Π½Π°ΡΠΈΠΌΠΎΠΉ.
ΠΠ΅ΡΠ΅Π΄ΠΊΠΎ ΡΠ°ΠΉΡΡ, Π³Π΄Π΅ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠΌΠ°ΠΆΠ½ΡΠΌ ΠΊΠ½ΠΈΠ³Π°ΠΌ ΠΈ ΠΆΡΡΠ½Π°Π»Π°ΠΌ), Π²ΡΠ·ΡΠ²Π°ΡΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π²ΡΡΠΎΠΊΠΈΠ΅ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ, Π½ΠΎ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ, Π»ΡΠ΄ΠΈ ΡΠ°ΡΡΠΎ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ΠΏΠ»ΠΎΡ ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ (ΡΠ΅ ΡΠ°ΠΌΡΠ΅ Π±ΡΠΌΠ°ΠΆΠ½ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ ΠΆΡΡΠ½Π°Π»Ρ), ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Π΄Π²Π΅ΠΆΡΡ ΡΡΠ»ΡΠ³Ρ.
ΠΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ?
(http://www.themobileplaybook.com/en-us/#/overview)
Π§ΡΠΎ ΠΆΠ΅ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΈ Π½Π΅ ΡΠ΅ΡΡΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ? ΠΡΠ΅ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠΎΡΡΠΎ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΠΌΠ΅Ρ Π°Π½ΠΈΠΊΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ ΡΠΎΠ²ΡΠ΅ΠΌ. ΠΡΠΎ ΠΏΡΠΈΠ½Π΅ΡΠ΅Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ ΠΈ Π²ΠΎΠΎΠ΄ΡΡΠ΅Π²ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠ΅ ΠΈΡ ΡΠ°Π·Π΄Π΅Π»Ρ.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»-Π±Π°Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ΅ ΠΎΡΡΠ°Π»ΠΎΡΡ Π½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠΎ ΠΌΠΎΡΠΈΠ²ΠΈΡΡΠ΅Ρ Π»ΡΠ΄Π΅ΠΉ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠΆΠ΅ ΡΠΎΠ±ΡΠ°Π»ΠΈΡΡ ΠΏΠΎΠΊΠΈΠ½ΡΡΡ ΡΠ°ΠΉΡ.
Π§ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅
(http://www.richard-hill.org.uk/)
Π₯ΠΎΡΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΎΠΌ Π½ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠ΅ ΡΠΊΡΠ°Π½Ρ, ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΠΠ Π² ΡΠΎΡΠΌ-ΡΠ°ΠΊΡΠΎΡΠ΅ ΠΌΠΎΠ½ΠΎΠ±Π»ΠΎΠΊΠΎΠ² Ρ ΡΠ°ΡΡΠΊΡΠΈΠ½ΠΎΠΌ ΠΈ Ρ.Π΄., Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΠ΅Ρ.
Π Π°Π½Π°Π»ΠΎΠ³ΠΎΠ²ΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ°Ρ Π»Π΅Π³ΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ Β«Π²Π²Π΅ΡΡ /Π²Π½ΠΈΠ·Β», ΡΠ΅ΠΌ Β«Π²ΠΏΡΠ°Π²ΠΎ/Π²Π»Π΅Π²ΠΎΒ». Π Π²ΠΎΡ Π½Π° ΡΠ°ΡΠΏΠ°Π΄Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΠΆΠ΅ΡΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌ ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»Π°.
Π‘ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π°. Π‘Π»ΠΈΡΠΊΠΎΠΌ Π±ΡΡΡΡΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π³ΠΎΠ»ΠΎΠ²Π½ΡΡ Π±ΠΎΠ»Ρ, Π° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ.
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎΡ ΡΠ°ΠΊΡ, ΡΡΠΎ ΠΌΡ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ ΡΠΈΡΠ°ΡΡ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠ° ΠΏΡΠΈΠ²ΡΡΠΊΠ° ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. Π‘ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΡΠ°ΡΠΏΠ°Π΄Π°, Π»ΡΠ΄ΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΏΡΠΈΠ²ΡΠΊΠ°ΡΡ ΠΈ ΠΊ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ ΡΡΠ΅Π½ΠΈΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, Π²ΡΠ΅Π³Π΄Π° Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΠΎ Ρ ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ ΠΏΡΠΈ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠΈ Π½ΠΎΠ²ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ Π² ΠΏΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½ΡΡ ΠΆΠΈΠ·Π½Ρ.
Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ
(http://www.archi-graphi.fr/)
Π Π°Π· Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΠΏΡΠΈΡΠ»Π°ΡΡ ΠΊΡΡΠ°ΡΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠ°ΡΡΠΊΡΠΈΠ½Π°ΠΌΠΈ, ΡΡΠΎ Π½Π΅ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΡΠΎΠ»Ρ ΠΆΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ Π½Π° Π΄Π΅ΡΠΊΡΠΎΠΏΠ°Ρ
. ΠΠ΅ ΡΡΠΎΠΈΡ Β«Π²ΡΡ
ΠΎΠ΄ΠΈΡΡ Π·Π° ΡΠ°ΠΌΠΊΠΈΒ» ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΈΠ· ΡΠΎΠ»ΠΏΡ, Π½ΠΎ ΠΏΡΠΎΠ±ΡΠΉΡΠ΅, Π΅ΡΠ»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΠΈΡΠ΅ Π² ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π°ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ ΡΠΏΡΡΠΊΠ°ΠΉΡΠ΅ ΠΈΠ· Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊΠΎΠΌΡΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΈΠ±ΠΎ ΡΡΠΎ Π²Ρ Π·Π°Π²ΠΈΡΠΈΡΠ΅ ΠΎΡ Π½ΠΈΡ
, Π° Π½Π΅ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΌΠ΅ΡΠ΅Π½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΠ²ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΏΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ ΡΡΠ»ΠΎΠΆΠ½ΠΈΡΡ ΠΆΠΈΠ·Π½Ρ Π΅Π³ΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡΠΈΠ²Π½Π΅ΡΠΈΡΠ΅ Π½Π΅ΡΡΠΎ Π·Π½Π°ΠΊΠΎΠΌΠΎΠ΅ ΠΈ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΌΠΎΠ³ ΠΎΡΠ΅Π½ΠΈΡΡ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠ°, ΠΈ Π²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΠΈΠΊ: ΠΠ½Ρ, ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊ
ΡΠ΅ΡΠ²ΠΈΡΠ° Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² (ΠΠΠ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»Π°) Ahoba (;
ΠΠ²ΡΠΎΡ: 407th
ΠΡΡΠΎΡΠ½ΠΈΠΊ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ.scrollLeft — ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π²Π΅Π± API
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎΒ scrollLeftΒ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΈΠ»ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ.
ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ direction:Β rtl (right-to-left), ΡΠΎΒ scrollLeftΒ ΡΠ°Π²Π΅Π½Β 0, ΠΊΠΎΠ³Π΄Π° ΡΠΊΡΠΎΠ»Π»Π±Π°Ρ Π½Π° Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΠΉ ΠΏΡΠ°Π²ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ (Ρ Π½Π°ΡΠ°Π»Π° ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°), Π° Π·Π°ΡΠ΅ΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΒ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΠΊΠΎΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Π½ΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ var sLeft = element.scrollLeft;
sLeftΒ — ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ.
// Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Π½ΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ element.scrollLeft = 10;
scrollLeftΒ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½, ΠΊΠ°ΠΊΒ Π»ΡΠ±ΠΎΠ΅Β ΡΠ΅Π»ΠΎΠ΅Β ΡΠΈΡΠ»ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ:
- ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Β (Ρ.Π΅. Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ),
scrollLeftΒ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π²Β 0. - ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅Β 0 (Π±ΠΎΠ»ΡΡΠ΅ 0 ΠΏΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈΒ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²Β ΡΠΏΡΠ°Π²Π°Β Π½Π°Π»Π΅Π²ΠΎ),
scrollLeftΒ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² 0. - ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°,
scrollLeftΒ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
}
#content {
background-color: #ccc; width: 250px;
}
</style>
<script>
document.
addEventListener('DOMContentLoaded', function () {
var button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('container').scrollLeft += 20;
};
}, false);
</script>
</head>
<body>
<div>
<div>ΠΠ»Π°-Π±Π»Π°-Π±Π»Π°</div>
</div>
<button type="button">ΠΡΠΎΠ»ΠΈΡΡΠ°ΡΡ</button>
</body>
</html>
Views scroll pager — ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΊΡΠΎΠ»Π»ΠΎΠΌ
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! ΠΡΠ΅ΡΠ° Π½Π°ΠΊΠΎΠ½Π΅Ρ-ΡΠΎ ΡΠ²Π΅ΡΡΠΈΠ»ΠΎΡΡ ΡΡΠ΄ΠΎ, ΠΈ Ρ ΠΏΠΎ-Π²Π·ΡΠΎΡΠ»ΠΎΠΌΡ Π΄ΠΎΠ±ΡΠ°Π»ΡΡ Π΄ΠΎ Drupal.org: Π·Π°Π²Π΅Π» Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈ ΡΡΠ°Π» ΡΠ»Π΅Π½ΠΎΠΌ Π°ΡΡΠΎΡΠΈΠ°ΡΠΈΠΈ ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅Π½ΡΠΊΠΈΡ Π²Π·Π½ΠΎΡΠΎΠ² β ΡΠ°ΠΊΠΎΠΉ Π²ΠΎΡ Π»ΠΈΡΠ½ΡΠΉ ΠΏΡΠ°Π·Π΄Π½ΠΈΠΊ.
ΠΠ°Π±Ρ ΠΌΠΎΠΈ ΡΡΡΠ΄Ρ Π½Π΅ ΠΏΡΠΎΠΏΠ°Π΄Π°Π»ΠΈ Π·ΡΡ, Π½Π°ΡΠ½Ρ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ, ΠΈΠΌΡ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Views scroll pager. ΠΠΎΠ΄ΡΠ»Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Views ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΡΠ»ΠΊΠΈ ΡΡΠ°Π·Ρ Π½Π° Π²ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ ΡΡΠ°Π½Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΠΏΡΠΎΠ΅ΠΊΡ: Views scroll pager.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠΎΠ΄ΡΠ»Ρ
- ΠΠΎΠ΄ΡΠ»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Views Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ AJAX;
- ΠΠΎΠ΄ΡΠ»Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅ΡΠ°ΠΌΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅;
- ΠΠ΅ΠΉΠ΄ΠΆΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±Π»ΠΎΠΊΠ°;
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π΄Π»Ρ Views Pager: Offset, Items to display, Pager ID;
- ΠΠΎΡΡΠ΅ΠΊΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ° Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠ² IE7 ΠΎΠ³ΠΎΡΡΡ β ΠΏΠΎΠ΄ ΡΡΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π°ΡΠΎΡΠ΅Π½.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Views scroll pager
ΠΠ΅ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½ Π² README.txt, Π½ΠΎ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΡΠ°Π·Ρ ΡΠΏΡΠ°ΡΠΈΠ²Π°ΡΡ Ρ Google ΠΈΠ»ΠΈ ΠΆΠ΅ Π½Π΅ Π²Π»Π°Π΄Π΅ΡΡ Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΌ Π² Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎΠΉ ΠΌΠ΅ΡΠ΅, Π΅ΡΠ΅ ΡΠ°Π· ΠΈ ΡΠΆΠ΅ ΠΏΠΎ-ΡΡΡΡΠΊΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎ Π²ΡΠ΅Ρ Π½ΡΠ°Π½ΡΠ°Ρ .
Views scroll pager Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Views ΠΈ Libraries API, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ°Π·Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΌΠΎΠ΄ΡΠ»ΠΈ.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΌΠΎΠ΄ΡΠ»ΠΈ Ρ ΡΠΆΠ΅ ΠΏΠΈΡΠ°Π». ΠΠ°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ jScrollPane. ΠΠΎΡΡΡΠΏΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- ΠΠ° ΡΠ°ΠΉΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΡΡΡΠ»ΠΎΡΠΊΡ Π½Π° Github ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΏΠΎ Π½Π΅ΠΉ;
- Π ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«Download ZIPΒ» Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ;
- Π Π°ΡΠΏΠ°ΠΊΠΎΠ²ΡΠ²Π°Π΅ΠΌ Π°ΡΡ ΠΈΠ² ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ 2 ΡΠ°ΠΉΠ»Π°: jquery.jscrollpane.css ΠΈ jquery.jscrollpane.js;
- Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ «sites/all/libraries/jscrollpane» ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΡΠ΄Π° ΡΠ°ΠΉΠ»Ρ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠ΄ΡΠ»Ρ! ΠΠ΅ ΠΏΠΎΠ»Π΅Π½ΠΈΡΠ΅ΡΡ Π·Π°ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ «admin/reports/status» ΠΈ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Ρ Π²Π°ΡΠΈΠ»Π°ΡΡ.
Π ΡΠ»ΡΡΠ°Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ°ΠΉΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π· ΠΏΡΠΎΡΠ΅ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, ΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ, ΠΎΠ±ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅. ΠΠΎΡΠ»Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ΄ΡΠ»Ρ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ Views Pager Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½ΠΎΠ²ΡΡ ΠΎΠΏΡΠΈΡ Horizontal scroll pager.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ²Π΅ΡΠΎΠ²
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±ΠΎΠ½ΡΡΠ° Π΄Π°ΠΌ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ, ΠΊΠ°ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΈ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅ΡΠ°ΠΌΠΈ Π² ΡΠ΅Π»ΠΎΠΌ:
- ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅ΡΠΎΠ², ΡΠΎ Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΠΈΠΌ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Pager ID Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π·Π΄Π΅Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ ;
- ΠΡΠ»ΠΈ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΠΉΠ΄ΠΆΠ΅Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ β Π΄Π΅ΡΠ·Π°ΠΉΡΠ΅, ΡΠΎΠ»ΡΠΊΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Π°Ρ CSS ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΌΠΎΠ΅Π³ΠΎ, ΠΊΠΎΡΠΎΡΡΠΉ Π»Π΅ΠΆΠΈΡ Π² ΠΌΠΎΠ΄ΡΠ»Π΅ Views scroll pager;
- ΠΠ»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΡΠ΅Π»ΠΎΡΠΊΠΈ-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π°ΡΠΈΡΡΠΉΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π² CSS.
.views-scroll-pager .jspHorizontalBar .jspDrag .jspDragLeft {
background: url("path_to_image") no-repeat 50% 0;
}
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° 9×8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π·Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π΅ ΡΡΡΠ°ΡΡΡ.
ΠΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ Π²ΡΠ΅ β ΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΠΏΠΎΠΊΠ° Ρ Π΄ΠΎΠ±ΡΡΠΉ. ΠΠ°ΠΉΠ΄Π΅ΡΠ΅ Π±Π°Π³ΠΈ β ΡΠ΅ΠΏΠΎΡΡΠ°ΠΉΡΠ΅, Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ Π²ΠΎΠΏΡΠΎΡΡ β ΡΠΏΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅. ΠΡ ΠΈ ΠΎΡΠ·ΡΠ²Π°ΠΌ Ρ ΡΠΎΠΆΠ΅ Π±ΡΠ΄Ρ ΡΠ°Π΄ π
ΠΠ»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°ΡΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ Π² Drupal ΡΠ΅ΡΠ΅Π· Libraries API β ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΡΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² ΠΌΠΎΠ΄ΡΠ»Π΅ Views scroll pager.
20 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ 20 Π»ΡΡΡΠΈΡ
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ ΠΈ ΡΠΆΠ΅ ΡΡΠΏΠ΅Π»ΠΈ ΡΠΊΠΎΡΠ΅Π½ΠΈΡΡΡΡ ΡΡΠ΅Π΄ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΡΠ°ΠΊ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² ΡΡΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ΅, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠ°ΠΉΡ Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ. Π― Π΄ΡΠΌΠ°Ρ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ ΡΠ°ΠΉΡΠΎΠ², Π²ΠΈΠ΄Π΅Π» ΡΡΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π±Π»ΠΎΠΊΠΈ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ, Π²ΡΠ΅Π·ΠΆΠ°ΡΡ, ΠΊΡΡΡΡΡΡΡ ΠΈ ΠΏΡ. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΠΊΠ»ΠΈΠ΅Π½ΡΠ°ΠΌ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΡΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ΅Π½ΡΠΈΡΠ»ΡΡΠΊΠΈ.
ΠΠ½Π΅Π΄ΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ Π² ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ ΡΠ°ΠΊ ΡΠ»ΠΎΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄. ΠΡΠ΅ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ β ΡΡΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ ΠΏΡΡΠΌΡΠ΅ ΡΡΠΊΠΈ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΉ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΡΡΡΠ²Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ, Π½ΠΎ ΡΡΠΎΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΈΠ΄Π΅ΡΡ, ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°Ρ
ΡΠ°Π±ΠΎΡΡ ΠΈ Π·Π°Π΄Π°ΡΠ° ΠΏΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ.
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΠΎ Π΄ΡΡΠ΅, Π½Π΅ ΡΡΠΎΠΈΡ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΠΎΠ²Π°ΡΡ, ΠΈΠ½Π°ΡΠ΅ Ρ Π²Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ΅Π½Π½Π°Ρ, Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠ»ΠΎΡ
ΠΎ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π²ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΊΠΎΠ²Π°Π½ΠΎ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΡΠΈΠΌ Β«ΡΠ²ΠΈΡΡΠ΅Π»ΠΊΠ°ΠΌΒ», Π° Π½Π΅ ΠΊ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΠ½Π΅ΡΡΠΈ Π΄ΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ. Π ΡΠΎΠΌΡ ΠΆΠ΅, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΡΠΊΡΠΈΠΏΡΠΎΠ², ΡΠ΅ΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΠ°. Π ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π²ΡΠ΅ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°ΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Ρ ΡΠΌΠΎΠΌ. ΠΠ°ΡΠ°ΡΡΡΡ, ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ, Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Ρ
Π²Π°ΡΠ°Π΅Ρ. Π’Π°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ, Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΉΡ ΠΆΠΈΠ²ΡΠΌ. ΠΠ° ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΠΈΠ΄Π°ΡΡ ΡΠ°ΠΉΡΠΎΠ² Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π±Π΅Π· ΡΡΠ²ΡΡΠ²Π° ΠΌΠ΅ΡΡ. ΠΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΡΠ½ΠΈΡ β Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΡΠ²ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ. ΠΠΎ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π½Π°Π΄Π΅ΡΠ»ΠΈΡΡ Π½Π° Β«ΠΠ°Ρ ΡΡΡΠ΅ΠΊΡΒ». ΠΡΠ°ΠΊ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΡΠ΅ Ρ ΡΠΌΠΎΠΌ ΠΈ Π² ΠΌΠ΅ΡΡ!
ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Ρ, Π½ΠΎ Ρ Π±Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΉ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ
ΡΠ΅Π»ΡΡ
Π½ΡΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΠ΄ ΡΡΠ»ΠΎΠ²ΠΈΠΉ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
14 JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML5 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
10 JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ SVG Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
WOW.js
ΠΠ΅ΠΏΠ»ΠΎΡ ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ.ScrollMagic
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠΎΠ»ΠΈΠΊΠ° ΠΌΡΡΠΊΠΈ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄Π΅Π»Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ parallax, css3 ΡΡΡΠ΅ΠΊΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ, ΡΠΌΠ΅Π½Ρ ΡΠΎΠ½Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π΄Π΅ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΈΠ³ΡΡ. ScrollMagic ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π½Π° ΠΏΡΠΎΠΌΠΎ-ΡΠ°ΠΉΡΠ°Ρ , Π³Π΄Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ.Scrollme
ΠΡΠΎΡΡΠΎΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, Π²ΡΠ°ΡΠ°ΡΡ, Π΄Π²ΠΈΠ³Π°ΡΡ, ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΈΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Superscrollorama
Superscrollorama β ΠΌΠΎΡΠ½ΡΠΉ, Π½ΠΎ ΡΡΠΆΠ΅Π»ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. Π Π΅Π³ΠΎ Π°ΡΡΠ΅Π½Π°Π»Π΅ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ DIV ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ parallax ΡΡΡΠ΅ΠΊΡΡ.ΠΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ.
onScreen
ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΈ Π±ΡΡΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Π°Π³ΠΈΠ½ Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ Π½Π΅ Π³ΡΡΠ·ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ.OnePage
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ OnePage ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·Π±ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠΊΡΠ°Π½Ρ Ρ Π²ΡΡΠΎΡΠΎΠΉ 100% ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ Π½ΠΈΠΌ. Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ Π»ΠΈΡΡ Π»Π΅Π³ΠΊΠΈΠΉ ΡΠΎΠ»ΡΠΎΠΊ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°Π»ΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠΊΡΠ°Π½Ρ. Π’Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ Π½Π° ΠΏΡΠΎΠΌΠΎ-ΡΠ°ΠΉΡΠ΅ Iphone 5s.ΠΠΌΠ΅ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ . ΠΡΠ»ΠΈ ΡΠ΅ΠΊΡΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΡΠΎ ΠΎΠ½ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ.

FSVS
ΠΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ ΠΏΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Ρ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ. ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ css3. ΠΠΌΠ΅Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ . ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ Π² Π²ΠΈΠ΄Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ»Π°ΠΉΠ΄ΠΎΠ² Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ»ΠΈΠΊΠ° ΠΌΡΡΠΊΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ° Π½Π° ΡΠΎΡΠ΅ΡΠ½ΡΡ Π±ΠΎΠΊΠΎΠ²ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.jInvertScroll
jInvertScroll ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ parallax ΡΠΊΡΠΎΠ»ΠΈΠΈΠ½Π³. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΡ ΠΊΡΡΡΠΈΡΠ΅ ΡΠΎΠ»ΠΈΠΊ ΠΌΡΡΠΊΠΈ Π²Π½ΠΈΠ·, Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π²ΠΈΠΆΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ parallax ΡΡΡΠ΅ΠΊΡ.Waypoints
Waypoints β ΡΡΠΎ jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π΄ΠΎΡΠΈΡΡΠ²Π°Π΅Ρ ΡΡΠ°ΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ°Π΅ΡΡΡ ΠΊ ΠΊΠΎΠ½ΡΡ ΡΠ΅ΠΊΡΡΠ°, ΡΠ±ΠΎΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΠ°ΡΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΡ ΠΎΠΆΡΡ ΡΡΠ°ΡΡΡ.Scrollocue
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΡ Π·Π°Π΄Π°Ρ. ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΡΡ Π±Π»ΠΎΠΊΠΈ ΠΏΡΠΎΡΡΡΠΌ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ ΠΌΡΡΠΈ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π½ΠΎΠ²ΡΠΌ ΠΊΠ»ΠΈΠΊΠΎΠΌ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½ΠΈΠΆΠ΅, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅.Horwheel
Jquery ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ Π² ΡΡΠΈΠ»Π΅ Windows 8. ΠΠ°ΠΊ Π·Π°ΡΠ²Π»ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ β ΡΡΠΎ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.Scrolling Progress Bar
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°Π·Π±ΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π° ΡΠ°Π·Π΄Π΅Π»Ρ ΠΈ Π²ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ΄ΠΎΠ±Π½ΠΎΠΌ Π΄Π»Ρ Π²Π°Ρ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.multiScroll.js
multiScroll.js β ΡΡΠΎ jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π΄Π²Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΡΠΊΠΎΠ»ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅. ΠΡΠ»ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π»ΡΡ ΡΠΊΡΠ°Π½, ΡΠΎ ΡΡΠΎΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΊΡΠ°Π½ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π° Π΄Π²Π΅ ΡΠ°Π²Π½ΡΡ ΡΠ°ΡΡΠΈ ΠΈ Π»Π΅Π²Π°Ρ ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π΅ΡΡΡ Π²Π²Π΅ΡΡ , Π° ΠΏΡΠ°Π²Π°Ρ Π²Π½ΠΈΠ·.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π·ΡΡΠ²Π°Π΅ΡΡΡ.ΠΠ°Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠ° ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°. ΠΡΠΌΠ°Ρ, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ ΠΎΡΠ΅Π½ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ.
browserSwipe.js
ΠΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³-ΠΏΠ»Π°Π³ΠΈΠ½, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ. Π‘ΡΠ΅Π΄ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² β ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Ρ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π°, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ. ΠΠΎΠΆΠ½ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.jQuery.panelSnap
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³-ΠΏΠ»Π°Π³ΠΈΠ½. ΠΠ»Π°Π³ΠΈΠ½ Π½ΠΈΡΠ΅ΠΌ ΠΎΡΠΎΠ±ΠΎ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΠΈΠΉΡΡ, Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄, ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ , Π½ΠΎ Π² Π½Π΅ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. ΠΡΠ»ΠΈ ΠΌΡ Π΄ΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΊΡΠ°Π½. Π’Π΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈ β ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΎΠΊΠΎΡΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΡΡΡΡΡ.Responsive 3D Fold Scroll
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ 3D ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ. ΠΠ»Π°Π³ΠΈΠ½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .HorizonScroll.js
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°. Π ΡΡΠΎΡ ΡΠ°Π· β ΡΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ΅Π»ΠΎΠΊ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅.jQuery.scrollSpeed β ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² β ΠΏΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π²Π½ΡΡΡΠΈ, Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Chrome, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΠ°ΠΉΡ ΡΡΠ²ΠΊΠ°ΠΌΠΈ. ΠΠ°Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΌΡΠ³ΡΠΈΡΡ ΡΠΊΡΠΎΠ»Π».ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ β ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΠ½Π΅ΡΡΠΈΡ ΠΈ ΠΏΡΠΎΡΠ΅Π΅.
ScrollFlow
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ parallax ΡΡΡΠ΅ΠΊΡ.jQuery Air Sticky Block β Π»ΠΈΠΏΠΊΠΈΠΉ Π±Π»ΠΎΠΊ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅. ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΡΠΈ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Β«ΠΏΡΡΠ³Π°Π΅ΡΒ» ΠΏΠΎΠ΄ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π»ΠΈΠΏΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΊΠ»ΡΡΠ°Π΅ΡΡΡ.ΠΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Π‘Π΅ΠΉΡΠ°Ρ, Π² ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠΈΡΠ΅Π»ΡΡΡΠ²Π΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΠΌΡΡΠ»ΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΠΈ ΡΠ°ΠΌΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅ΡΡΡΡΠΎΠ².
ΠΠ± ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΌΡ ΠΈ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ½ CustomScrollbar ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠΎΠ².
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΊΠ°Π·Π°ΡΡ Π»Π΅Π½Π΄ΠΈΠ½Π³, ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° html, Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ CustomScrollbar ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΠΊΠ°ΠΊ Π½Π΅Π»ΡΠ·Ρ Π»ΡΡΡΠ΅.
ΠΡΠΈ ΠΈΠ·Π³ΠΎΡΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π²Π° Π²ΠΈΠ΄Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ β Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΠ½Π°, Π»ΠΈΠ±ΠΎ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Π°ΠΆΠ½ΡΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ, ΡΠ°ΠΊΠΎΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈ Π²ΡΡΠΎΡΡ ΠΏΠΎΠ»Ρ Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
CustomScrollbar — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ jQuery UI, ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS. ΠΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ, ΡΠ°ΠΊ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ jQuery mouse-wheel ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ, ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ΅Π³Π΅ «head» ΡΠ°ΠΉΡΠ°, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ² jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js (ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ), jquery.mousewheel.min.js (Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠΎΠΌ ΠΌΡΡΠΈ) ΠΈ jquery.mCustomScrollbar.css, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ CSS Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΡΠ»Π΅ ΡΡΠΈΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ΅Π³ «head» ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ², Π² ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° «div» Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ «content». ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ «div» Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ «id» Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π»ΠΎΠΊΠΎΠ² Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ ΠΏΠ°Π½Π΅Π»ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΠ»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΠ½ΠΊΡΠΈΡ mCustomScrollbar Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ horizontalScroll:true. ΠΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² CSS ΠΈΠ»ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ Π΄Π»Ρ JavaScript.
Π Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ, Π² ΠΊΠΎΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΡΠΈΠ΅ΠΌ ΡΠ΅Π³Π° body, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ jquery.mCustomScrollbar.js, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΡ Π²ΡΠ·ΠΎΠ²Π° ΠΈ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΡΠΊΡΠΎΠ»Π»-ΠΏΠ°Π½Π΅Π»ΠΈ.
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
Π ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΡΠ·Π²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ mCustomScrollbar Π² Π±Π»ΠΎΠΊΠ΅ Ρ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² AJAX ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ .
Π‘ΠΊΡΡΡΠΈΠ΅ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ»ΠΈ Π²Π°ΠΌΒ Π½ΡΠΆΠ½ΠΎ ΡΠΏΡΡΡΠ°ΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈ mCustomScrollbar. Π’Π°ΠΊΠ°Ρ ΡΡΡΠΎΠ³Π°Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π½ΡΠΆΠ½Π° Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΡΠΊΡΠΈΠΏΡΠΎΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ jQuery CustomScrollbar, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π½Π° ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ iOs ΠΈ Android.ΠΡΠΎΠΊΡΡΡΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²:
- Π’ΠΈΠΏ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ («vertical» ΠΈΠ»ΠΈ «horizontal»)
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ «0» — Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ)
- Π’ΠΈΠΏ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ
- ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΡΠ½ΠΈΠ·Ρ (ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: «1»)
- ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³-ΠΏΠ°Π½Π΅Π»ΠΈ («auto» ΠΈΠ»ΠΈ «fixed»)
- ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠΎΠΌ ΠΌΡΡΠΈ («yes» ΠΈΠ»ΠΈ «no»)
- ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ («yes» ΠΈΠ»ΠΈ «no»)
- Π‘ΠΊΠΎΡΠΎΡΡΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° (ΠΎΡ «1» Π΄ΠΎ «20»)
Π Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ
ΠΒ jquery.min.js Π΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄ΠΎ «0» Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ 9999 px. ΠΡΠ° ΠΎΡΠΈΠ±ΠΊΠ° Π½Π΅ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½Π°, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΠ°Π²Π½Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ 10000 px, ΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ° Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΡΠ²ΠΊΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΡΡΠΎ, ΡΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΠΏΠΎΡΡΠΈΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΠΎΡ ΠΎΠ±ΡΠ΅Π³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π²Π΅Π± ΡΠ΅ΡΡΡΡΠ°. ΠΡΠΎ ΡΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π½Π°Π΄Π΅ΡΡΡΡΡ, ΡΡΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π²Π΅ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π°. Π Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΡΠ²ΠΎΡ, Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
CSS3-ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
ΠΠΎΠ΄ΡΠ»Ρ CSS Overflow ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ CSS Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ Π½ΠΎΡΠΈΡΠ΅Π»ΡΡ (ΡΠΊΡΠ°Π½Π°Ρ ΡΡΡΡΠΎΠΉΡΡΠ²). CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅ΡΠΌΠΈΠ½ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΡΡΠΈΡΠ°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ ΠΊΡΠ°Π΅Π², Ρ.Π΅. ΠΊΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΏΠΎΠ»Ρ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΠ°.
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-
1. Π’ΠΈΠΏΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΈΠΏΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ: ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΏ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ°ΡΡΡ Π±Π»ΠΎΠΊΠ° ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ°, Π½Π°Π²ΠΈΡΠ°ΡΡΠΈΠ΅ Π³Π»ΠΈΡΡ, ΠΊΠΎΠ½ΡΡΡΡ ΠΈ Ρ.Π΄.
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π°Π±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²ΡΡ ΠΎΠ΄ΡΡΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π±Π»ΠΎΠΊΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΠ»ΠΈ ΡΠΊΡΠΎΠ»Π»Π±Π°Ρ).
2. ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΈ ΠΎΠ±ΡΠ΅Π·ΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x, overflow-y ΠΈ overflow
ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ ΠΏΠΎ ΠΊΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ, ΠΈ Π΅ΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎΡ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΠ΅ ΡΠ°ΡΡΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π±Π»ΠΎΡΠ½ΡΠΌ, Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌ-ΡΠ΅ΡΠΊΠ°ΠΌ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Ρ.Π΅. ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ Π±Π»ΠΎΠΊΠ°), Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-y ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Ρ.Π΅. ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½ Π±Π»ΠΎΠΊΠ°).
Π‘Π²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ.
| overflow-x, overflow-y | |
|---|---|
| ΠΠ½Π°ΡΠ΅Π½ΠΈΡ: | |
| visible | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π³ΡΠ°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². |
| hidden | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ. |
| scroll | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π΄ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±Π»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ. ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΈΠ΄Π΅Π½ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ΅Π΄Π΅. Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΌΠ΅Π½ΡΡΡΡΡ, Π° ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
| auto | ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ°. |
| initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
| inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
overflow-x: inherit;
overflow-x: initial;Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow β ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°Π΄Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow-x ΠΈ overflow-y Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠ»ΠΈ Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΡΠ΅Π½ΠΎ, ΠΎΠ½ΠΎ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡ Π±Π»ΠΎΠΊ Π² ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π½Π° Π²ΡΡΠΎΡΠ° ΠΈ/ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π°. ΠΠ΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΡΠΎΠΌΠ΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ position: absolute; ΠΈΠ»ΠΈ position: fixed;. Π’Π΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡ Π±Π»ΠΎΠΊ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅.
| overflow | |
|---|---|
| ΠΠ½Π°ΡΠ΅Π½ΠΈΡ: | |
| visible | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π³ΡΠ°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². |
| hidden | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float: left / right;. |
| scroll | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π΄ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±Π»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ. ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΈΠ΄Π΅Π½ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ΅Π΄Π΅. Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΌΠ΅Π½ΡΡΡΡΡ, Π° ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
| auto | ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ°. |
| initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
| inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: hidden scroll;
overflow: auto;
overflow: inherit;
overflow: initial;3. ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅
3.1. ΠΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ text-overflow
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΡΡΠΎΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π½Π΅ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Ρ Π΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ. Π’Π΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΠΈΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Π΅ΠΌΡ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·-Π·Π° white-space: nowrap ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ: Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π° ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow: hidden ΠΈ white-space: nowrap. ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
| text-overflow | |
|---|---|
| ΠΠ½Π°ΡΠ΅Π½ΠΈΡ: | |
| clip | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π’Π΅ΠΊΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Π°. |
| ellipsis | ΠΠ°ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ΅ΠΊΡΡ, Π½Π΅ ΡΠΌΠ΅ΡΡΠΈΠ²ΡΠΈΠΉΡΡ Π² Π±Π»ΠΎΠΊ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ. |
| initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
| inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: initial;
text-overflow: inherit;ΠΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌ CSS Overflow Module Level 3
10 Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ jQuery
Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ 10 Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ jQuery, ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π²ΠΈΠ΄ΠΈΡ Π²Π΅ΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. Π― Π΄ΡΠΌΠ°Ρ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ³Π»Π°ΡΠΈΡΡΡΡ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ΄ΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΡΡΡΡ Π² ΠΎΠ±Π΅ ΡΡΠΎΡΠΎΠ½Ρ! π
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ: ΠΌΠ°ΡΡ 2016 Π³. ΠΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ Π²ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΈ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΠΈ Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π²Π΅ΡΡΠΈΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π½ΠΎΠ²ΡΠ΅. Π’Π°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»Π΅Π½Ρ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ScrollMagic ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠ΅ΠΊΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.ΠΠ³ΠΎ Π»Π΅Π³ΠΊΠΈΠΉ Π²Π΅Ρ (6 ΠΠ Π² ΡΠΆΠ°ΡΠΎΠΌ Π²ΠΈΠ΄Π΅) ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΎΠ±Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
jInvertScroll — ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π½ΠΈΠ·.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
3. ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΊΠ°Π»Π° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
ΠΠ· ΡΡΠΎΠ³ΠΎ ΡΡΡΠΎΡΠΈΠ°Π»Π° ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠΊΠ°Π»Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS ΠΈ jQuery.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ· ΡΡΠΎΠ³ΠΎ ΡΡΡΠΎΡΠΈΠ°Π»Π° ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery Easing ΠΈ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΠΊ jQuery.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
simpleScroll — ΡΡΠΎ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠΊΡΠΎΠ»Π»Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°. ΠΠ½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΈΠΊΠ»Π°.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
6. ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Ρ fullPage.js
fullPage.js — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½ΠΎ ΠΈ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ°ΡΡΡ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ IE 8 ΠΈ Opera 12.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
7.jQuery.kinetic
jQuery.kinetic — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΠ΅ΠΌ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
8. Π₯ΠΈΡΡΡΠΉ
Sly — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
9.pagePiling.js
pagePiling.js — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π²Π°ΡΠΈ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΎΠ΄ΠΈΠ½ Π½Π°Π΄ Π΄ΡΡΠ³ΠΈΠΌ ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΊ Π½ΠΈΠΌ Π΄ΠΎΡΡΡΠΏ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ URL-Π°Π΄ΡΠ΅ΡΡ. ΠΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ IE8 ΠΈ Safari 12, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ· ΡΡΠΎΠ³ΠΎ ΡΡΡΠΎΡΠΈΠ°Π»Π° ΠΡ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ Π²Π΅Π±-ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ! ΠΠ΅ Π²ΠΎΠ»Π½ΡΠΉΡΠ΅ΡΡ, ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° JavaScript. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS / HTML Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ JavaScript ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ» ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· 10 Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery. ΠΠ°Π΄Π΅ΡΡΡ, ΠΎΠ½ΠΈ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ Π²Π°ΠΌ Π² Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ? Π§ΡΠΎ ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡ? ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π΄Π΅Π»ΠΈΡΡΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΌΠ½Π΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π½ΠΈΠΆΠ΅.
15 Π»ΡΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery
JQuery — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, Π½Π΅ ΠΈΠΌΠ΅ΡΡΠ°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°. JQuery, Prototype, Dojo, MooTools ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΡΡΠΈΡΠ°ΡΡΡΡ ΡΠ·ΡΠΊΠΎΠΌ.ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JQuery, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Ajax Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΠ½ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ° Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ HTML ΠΈ Web 2.0. Π’Π°ΠΊ ΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠ»Π°Π³ΠΈΠ½JQuery — ΡΡΠΎ ΠΌΠ΅ΡΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°-ΠΏΡΠΎΡΠΎΡΠΈΠΏΠ° JQuery. Π§ΡΠΎ ΠΆ, ΠΈΠ΄Π΅Ρ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ»Π°Π³ΠΈΠ½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΏΠ΅ΡΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΈΠ½ΡΠΎΡΠΌΠΈΡΡΠ΅ΠΌ Π²Π°Ρ ΠΎ 15 ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π‘Π°ΠΉΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ ΠΈ ΡΠ°ΠΌΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°ΠΉΡΠ°ΠΌΠΈ.
ΠΠ»Π°Π³ΠΈΠ½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½Ρ Π² Π²Π°ΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΡ. Π§ΡΠΎ ΠΆ, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΡ ΡΠΎΠ±ΡΠ°Π»ΠΈ Π·Π΄Π΅ΡΡ 15 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery.
15 Π»ΡΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery: —- ΠΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° —
Scroll Magic Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
- Π‘Π½Π°ΡΠ°Π»Π° Π²Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ.
- JInvertScroll —
JlnvertScroll — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery.ΠΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π½ΠΈΠ·. ΠΡΠΎ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.
- ΠΠ»Π°Π΄ΠΊΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Div —
Smooth Div Scroll Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ. ΠΠ½ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π³ΠΈ. Π§ΡΠΎ ΠΆ, ΠΏΠ»Π°Π²Π½ΠΎΡΡΡ ΠΈ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΡΡΡ — Π²ΠΎΡ ΠΊΠ»ΡΡ ΠΊ ΡΡΠΏΠ΅Ρ Ρ.
- Π₯ΠΈΡΡΡΠΉ —
Sly — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery.ΠΡΠΎ ΠΎΠ΄Π½ΠΎΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈ ΠΏΡΠΎΡΡΠ°Ρ Π·Π°ΠΌΠ΅Π½Π° ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- jQuery SerialScroll —
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ ΠΈΡ . ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery.Scroll Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- js —
FullPage.js — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery. ΠΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
- js —
HorizontalScroll.js ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ.
- jQuery Custom Content Scroller —
JQuery Custom Content Scroller ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ, ΡΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ / Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
- NiceScroll —
NiceScroll — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, DIV ΠΈ IFrames.ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ, ΡΠ°ΠΊ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ —
Tiny Scrollbar — ΡΡΠΎ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ ΠΈ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠ½ ΠΏΡΠΎΡΡΠΎ ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠ°Ρ ΡΡΠΈΠ»ΠΈΡΠ°.
- ΠΠ΅Π½Ρ PageScroll —
PageScroll Menu — ΡΡΠΎ ΡΠ΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΠ½ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠ»ΠΎΡΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- jQuery Kinetic —
ΠΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»ΠΎΡΠΊΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ.
- Horwheel —
Horwheel — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ.
- Optiscroll —
Optiscroll — ΡΡΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
- Perfect Scrollbar —
Perfect Scrollbar — ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
10 ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ jQuery Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ — Bashooka
ΠΠΎΡ 10 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΡΠΊΡΠ°Π½Ρ.
ΠΡΠΎ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Ρ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.
ΠΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π½ΠΈΠ·.ΠΠ³ΠΎ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈ ΠΏΠΎΡΡΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ.
ΠΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΎΠ΄Π½ΠΎΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ.
ΠΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ (ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ) ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡΡΠ½ΡΡ, ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½Π°Π·Π°Π΄ ΠΈΠ»ΠΈ Π²ΠΏΠ΅ΡΠ΅Π΄.
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π΅Π»Π°Π΅Ρ html-Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ul ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ, ΠΏΡΠΎΡΡΠΎ Π½Π°Π²Π΅Π΄Ρ Π½Π° Π½Π΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ.
ΠΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jquery, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΠΈ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ Π»ΠΈΡΡΠ°.
ΠΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ΅Π΄ΠΈΠ°-ΡΠ΅ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½ΡΠ΅Π½Ρ Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΈ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. ΠΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΉ Π΄Π»Ρ Π²ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΠ°Π½Π΅Π»ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π΅Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ±ΠΎΡΠ° Π² ΠΌΠ΅Π½Ρ. ΠΠ°Π΄Π°ΡΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΌΠ°ΠΊΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΊΡΠ°Π½ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΎΠΊ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Π° Π½Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
jQuery Π¦Π΅Π½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ — JSFiddle
Π Π΅Π΄Π°ΠΊΡΠΎΡ ΠΌΠ°ΠΊΠ΅ΡΠ°
ΠΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π‘ΡΠΎΠ»Π±ΡΡ ΠΠΈΠΆΠ½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΠΊΠ»Π°Π΄ΠΊΠΈ (ΡΡΠΎΠ»Π±ΡΡ) ΠΠΊΠ»Π°Π΄ΠΊΠΈ (ΡΡΡΠΎΠΊΠΈ)
ΠΠΎΠ½ΡΠΎΠ»Ρ
ΠΠΎΠ½ΡΠΎΠ»Ρ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ (Π±Π΅ΡΠ°)
ΠΡΠΈΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΠΎΠ»Ρ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅
ΠΠ±ΡΠΈΠ΅
ΠΠΎΠΌΠ΅ΡΠ° ΡΡΡΠΎΠΊ
ΠΠ±Π΅ΡΠ½ΡΡΡ Π»ΠΈΠ½ΠΈΠΈ
ΠΡΡΡΡΠΏ Ρ ΡΠ°Π±ΡΠ»ΡΡΠΈΠ΅ΠΉ
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° ΠΏΠΎ ΠΊΠΎΠ΄Ρ (Π°Π²ΡΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅) (Π±Π΅ΡΠ°)
Π Π°Π·ΠΌΠ΅Ρ ΠΎΡΡΡΡΠΏΠ°:2 ΠΏΡΠΎΠ±Π΅Π»Π° 3 ΠΏΡΠΎΠ±Π΅Π»Π° 4 ΠΏΡΠΎΠ±Π΅Π»Π°
ΠΠ»ΡΡΠ΅Π²Π°Ρ ΠΊΠ°ΡΡΠ°:ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: Sublime TextEMACS
Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°:ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡBigBiggerJabba
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠΎΠ΄ Π°Π²ΡΠΎΠ·Π°ΠΏΡΡΠΊΠ°
Π’ΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ΄ Π°Π²ΡΠΎΠ·Π°ΠΏΡΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ
ΠΠΎΠ΄ Π°Π²ΡΠΎΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ (Π½Π°ΡΡΠΊΠ°Π΅ΡΡΡ Π½Π° Π²Π΅ΡΡΠΈΡ)
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡ HTML-ΡΠ΅Π³ΠΈ
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ
ΠΡΠΎΠ²Π΅ΡΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°
ΠΡΠ΄Π΅Π»ΠΈΡΠ΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ
ΠΠ°Π³Π»ΡΡΠΊΠΈ
ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΠ΅ΠΆΠ΅
15 ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠΎΡΡΠ°Π²ΠΈΠ» ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· 15 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΎΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ, ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°ΠΉΡΡ.
ΠΡΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ Π²Π°ΡΠΈΠΌΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π΄Ρ ΡΡΠ»ΡΡΠ°ΡΡ Π²Π°ΡΠΈ ΠΎΡΠ·ΡΠ²Ρ.
ΠΠ·ΡΡΠΈΡΠ΅ ΡΠΏΠΈΡΠΎΠΊ Π½ΠΈΠΆΠ΅.
ΠΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΠ΅ —
20 ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ
ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ jQuery Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΡΡΠΈΠ΅ ΡΡΠ΅Π±Π½ΠΈΠΊΠΈ jQuery Parallax Scrolling
1.jInvertScroll
jInvertScroll — ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π½ΠΈΠ·. ΠΠ³ΠΎ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈ ΠΏΠΎΡΡΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ. ΠΠ»Π°Π³ΠΈΠ½ Π²Π΅ΡΠΈΡ ΠΌΠ΅Π½Π΅Π΅ 1 ΠΠ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅Π· Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.
2. Π‘Π²ΠΈΡΠΎΠΊ Magic
ScrollMagic — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ°ΠΊ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
β’ ΠΠ°ΡΠ°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
β’ Π‘ΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
β’ ΠΠ°ΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ).
β’ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ
ΠΎΠ΄Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ).
β’ Π‘ Π»Π΅Π³ΠΊΠΎΡΡΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.
β’ Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ (Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ AJAX).
3. Π₯ΠΈΡΡΡΠΉ
Sly — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΎΠ΄Π½ΠΎΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ.ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² API, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², Π΄Π°ΡΡΠΈΡ
Π²Π°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π²ΡΠ΅ΠΌ.
http://darsa.in/sly/
4. ΠΠ»Π°Π΄ΠΊΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Div
Smooth Div Scroll — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ. Smooth Div Scroll Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ°Π³Π°ΠΌΠΈ. ΠΠ° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΊΡΠΎΠ»Π»Π΅ΡΠ° Π½Π΅Ρ Π΄ΡΡΠ³ΠΈΡ
ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΠΎΡΡΡΠΈΡ
ΡΠΎΡΠ΅ΠΊ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ»Π°Π²Π½ΠΎΠ΅ — Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΡΡΡ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎΡΡΡ.
5. fullPage.js
fullPage.js — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ
ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π½Π° ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ ΡΠ°ΠΉΡ Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ°ΠΌΠΈ, ΠΎΠ±ΡΠ°Π·ΡΡΡΠΈΠΌΠΈ ΡΠ°ΠΉΡ. Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
6. jQuery SerialScroll
ΠΠ»Π°Π³ΠΈΠ½ jQuery SerialScroll ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΡ ΡΠ΅ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ ΠΈΡ
. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery.ScrollTo Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ ΠΈΠ·Π²Π½Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ.
ΠΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΡΠΊΡΠ°Π½Π°. Π’ΠΎ Π΅ΡΡΡ Π΄Π»Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ Π³ΡΡΠΏΠΏΠ΅ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠΊΡΠΎΠ»Π»Π΅Ρ. ΠΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ, Π²ΡΡΠΎΠΊΠ°Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ Π»Π΅Π½ΡΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ!
7.Π‘ΠΊΡΠΎΠ»Π»Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery
ΠΠ»Π°Π³ΠΈΠ½ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ jquery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ / Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ (ΡΠ΅ΡΠ΅Π· ΠΏΠ»Π°Π³ΠΈΠ½ ΠΊΠΎΠ»Π΅ΡΠ° ΠΌΡΡΠΈ Brandon Aaron jQuery), ΠΎΡΠ»Π°Π±Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΠΌΡΡ Π²ΡΡΠΎΡΡ / ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
8. HorizonScroll.js
HorizonScroll.js — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
9. NiceScroll
Nicescroll — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Ρ
ΠΎΡΠΎΡΠΈΡ
ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΌ ΡΡΠΈΠ»Π΅ ios / mobile.ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ DIV, IFrames, ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Nicescroll Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ, ΡΠ°ΠΊ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
10. ΠΠ΅Π½Ρ PageScroll
PageScroll Menu — ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΡΠ΅Π»Π΅Π²ΡΡ
ΡΡΡΠ°Π½ΠΈΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
. ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠ»Π°Π²Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΡΠΊΠΎΡΡΠΌΠΈ). ΠΠ½ ΠΎΡΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΡΠ°ΠΉΠ» CSS ΠΏΠ»Π°Π³ΠΈΠ½Π°.
11. ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Tiny Scrollbar — ΡΡΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
. ΠΠ½ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΊΠ°ΠΊ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ Π»Π΅Π³ΠΊΠ°Ρ ΡΡΠΈΠ»ΠΈΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ Π΄Π°Π΅Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠΎΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° (ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°) Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠΎΠΌ, Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΠ°Π»ΡΡΠ΅ΠΌ, Π΄ΠΎΡΠΎΠΆΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π½ΠΈΠ΅ΠΌ.
12. jQuery Kinetic
jQuery.kinetic — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΠ΅ΠΌ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ.
13. Optiscroll
Optiscroll — ΡΡΠΎ ΠΊΡΠΎΡΠ΅ΡΠ½Π°Ρ (9 ΠΠ) ΠΈ Ρ
ΠΎΡΠΎΡΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Optiscroll ΡΡΡΠ΅ΠΌΠΈΡΡΡ Π±ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ Π»Π΅Π³ΠΊΠΈΠΌ, ΡΡΠΎΠ±Ρ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Optiscroll Π½Π΅ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ Π»ΠΎΠ³ΠΈΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ JavaScript. ΠΠ½ ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Optiscroll Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
14.Π₯ΠΎΡΠ²ΠΈΠ»
Horwheel — ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ»Π΅ΡΠΎΠΌ ΠΌΡΡΠΈ. ΠΠ½ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
15. ΠΠ΄Π΅Π°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
Perfect-scrollbar — ΡΡΠΎ ΠΊΡΠΎΡΠ΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ jQuery Π΄Π»Ρ Π»ΡΠ±ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠΊΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
ΠΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌ ΠΈ ΠΌΠΈΠ»ΡΠΌ. Π― ΡΠ°Π±ΠΎΡΠ°Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Silverlight Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.ΠΠΎΠ΄ Β«ΠΌΡΠ³ΠΊΠΈΠΌΒ» Ρ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Ρ, ΡΡΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΡΠ°ΡΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅; Π΄Π»Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΌΡ ΠΎΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌΡΡ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ Π΄Π°Π»ΡΡΠ΅, Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π°ΡΠΈ ΡΡΡΠΊΠΈ Π»ΡΠ±Π²ΠΈ.
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Binging (ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ»ΠΎΠ²Π°ΡΠ΅ Microsoft Word! ΠΠΎΡΡΡΡΠ°ΡΡΠ΅!) ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ jQuery Π΄Π»Ρ Β«ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡΒ», Π΅ΡΡΡ Π»ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°. ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ Ρ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π½Π°ΡΠ΅Π». ΠΠΎΡΡΠΎΠΌΡ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΠ»ΡΡ Π½Π° ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° IE ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠΎΠ½ΡΠΎΠ»Ρ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠ΄Π° ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠ² jQuery, ΠΏΠΎΠΊΠ° Ρ Π½Π΅ ΡΠΌΠΎΠ³ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ ΠΈΡΠΊΠ°Π».
ΠΠ±ΡΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ ΠΎΠΊΠ½ΠΎ, Ρ ΠΎΡΠΎΡΠΎ Π±Ρ Π²ΠΈΠ΄Π΅ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ»Ρ ΠΌΠΎΠΈΡ ΡΠ΅Π»Π΅ΠΉ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΉ div, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π°Π»ΠΈΡΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠ΅ΡΠ°Π»ΠΎ ΠΌΠΎΠΈΠΌ ΡΠ°ΡΡΠ΅ΡΠ°ΠΌ. (Div Π±ΡΠ» ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΎΠΊΠ½Π°, Π½ΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Silverlight Π·Π° Π½ΠΈΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π»ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ, ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ»Π° ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ° ΡΠΎΡΠ½ΠΎ Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ.)
ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΡΠ°Π²ΠΈΠ» ΡΡΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ. Π‘ΠΌΠ΅Π»ΠΎ Π±Π΅ΡΠΈΡΠ΅ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ:
| |||
Π Π°Π±ΠΎΡΠ°Π΅Ρ Π² IE 9 ΠΈ FF 6 Π½Π° ΠΠ. Chrome ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠΎΠ±ΡΠ°Π», ΡΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ ΠΎΠΊΠ½ΠΎ (ΠΈ ΡΠ΅Π»ΠΎ) ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΌΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. Π― Π½Π΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» ΡΡΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Mac, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΌΡ Π½Π΅ ΡΠ°Π·Π³ΠΎΠ²Π°ΡΠΈΠ²Π°Π΅ΠΌ.
Element.scrollLeft — Π²Π΅Π±-API | MDN
ΠΠ»Π΅ΠΌΠ΅Π½Ρ .scrollLeft ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΈΠ»ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠ»ΠΎ
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡ Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.
ΠΡΠ»ΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°Π²Π½ΠΎ rtl (ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ), ΡΠΎ scrollLeft — ΡΡΠΎ 0 , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΡΠ°ΠΉΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ (Π² Π½Π°ΡΠ°Π»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°), Π° Π·Π°ΡΠ΅ΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ
ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΡΠΈΡΡΠ΅ΠΌΠ°Ρ
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ
ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ, scrollLeft ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΡΡ Π²Π°ΠΌ Π΄Π΅ΡΡΡΠΈΡΠ½ΡΡ Π΄ΡΠΎΠ±Ρ.
ΡΠ΅Π½ΠΈΡΡ.
ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
var sLeft = element.scrollLeft;
sLeft — ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ
element.scrollLeft = 10;
scrollLeft ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ:
- ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ),
scrollLeftΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅0. - ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅
0(Π±ΠΎΠ»ΡΡΠ΅0Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ),scrollLeftΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π°0.
