Jquery ΡΠΎΠ±ΡΡΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ: ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² jQuery
Π‘ΠΎΠ±ΡΡΠΈΡ β JQuery
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΈΠ· JQuery
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΠΊΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ). Π Π΅ΡΡ ΠΈΠ΄Π΅Ρ, ΠΊΠ°ΠΊ ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠΎΠ±ΡΡΠΈΡΡ javascript, ΡΠ°ΠΊ Π½ΠΎΠ²ΡΡ , ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΡΠ°ΠΌΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ jQuery.
Π‘ΠΏΠΈΡΠΎΠΊ ΡΡΠ½ΠΊΡΠΈΠΉ
ΠΠ°Π·ΠΎΠ²ΡΠ΅
.on() | Π£Π½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ Π½Π° Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. |
.off() | Π£Π΄Π°Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡ .on(). |
.bind() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π° Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΡ ΡΡ ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. |
.live() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π° Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΡ ΡΡ ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. |
.delegate() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π° Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΡΠ½ΡΡΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΡ ΡΡ ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. |
.one() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π° Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ°Π·Ρ, Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². |
.unbind() | Π£Π΄Π°Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². |
.die() | Π£Π΄Π°Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ live(). |
.undelegate() | Π£Π΄Π°Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ delegate(). |
.trigger() | ΠΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π΅Π³ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. |
.triggerHandler() | ΠΠ°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ, Π±Π΅Π· Π΅Π³ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. |
jQuery.proxy() | ΠΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄ΡΡΠ³ΡΡ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ this Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. |
event | ΠΠ±ΡΠ΅ΠΊΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΄Π°Π½Π½ΡΠ΅ ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΈ. ΠΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ. |
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΡΡΠΈ
.click() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ «ΠΊΠ»ΠΈΠΊΠ°» ΠΌΡΡΡΡ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.dblclick() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ «ΠΊΠ»ΠΈΠΊΠ°» ΠΌΡΡΡΡ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.hover() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π²ΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ: ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ/ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. |
.mousedown() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.mouseup() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ΄Π½ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.mouseenter() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ, ΠΎΡΡΠ°Π±ΠΎΡΠ°Π½ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ mouseover. |
.mouseleave() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΡ ΠΎΠ΄Π° ΠΊΡΡΡΠΎΡΠ° ΠΈΠ· ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ, ΠΎΡΡΠ°Π±ΠΎΡΠ°Π½ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ mouseout. |
.mousemove() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.mouseout() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΡ ΠΎΠ΄Π° ΠΊΡΡΡΠΎΡΠ° ΠΈΠ· ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.mouseover() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.toggle() | ΠΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΎΠ΄Π½Ρ ΠΈΠ· Π΄Π²ΡΡ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, Π² ΠΎΡΠ²Π΅Ρ Π½Π° «ΠΊΠ»ΠΈΠΊ» ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. |
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ
.keydown() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π² Π½Π°ΠΆΠ°ΡΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.keyup() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π² Π½Π΅Π½Π°ΠΆΠ°ΡΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.keypress() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²Π²ΠΎΠ΄Π° ΡΠΈΠΌΠ²ΠΎΠ»Π° Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
Π‘ΠΎΠ±ΡΡΠΈΡ ΡΠΎΡΠΌΡ
.focus() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΊΡΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.blur() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΡΠ΅ΡΠΈ ΡΠΎΠΊΡΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.focusin() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΊΡΡΠ° ΡΠ°ΠΌΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ . |
.focusout() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΡΠ΅ΡΠΈ ΡΠΎΠΊΡΡΠ° ΡΠ°ΠΌΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ . |
.select() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.submit() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.change() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΡΠΌΡ, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
Π‘ΠΎΠ±ΡΡΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
.ready() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π³ΠΎΡΠΎΠ²Π½ΠΎΡΡΠΈ Π΄Π΅ΡΠ΅Π²Π° DOM. |
.load() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
.unload() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΡ ΠΎΠ΄Π° ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ (ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅, Π·Π°ΠΊΡΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ.Ρ.Π΄.). |
Π‘ΠΎΠ±ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°
.error() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΠ΅ΡΠ²Π΅ΡΠ΅). |
.resize() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
.scroll() | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ «ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ, Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅. |
ΠΠ΅ΡΠΎΠ΄ .hover() | jQuery ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
basicweb.ru
- HTML
- Π£ΡΠ΅Π±Π½ΠΈΠΊ HTML
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ΅Π³ΠΎΠ²
- ΠΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ
- ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ
- ΠΠΎΠ΄Ρ ΡΠ·ΡΠΊΠΎΠ²
- ΠΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΠΈ
- Π¦Π²Π΅ΡΠ°
- Π’Π΅ΡΡΡ Π·Π½Π°Π½ΠΈΠΉ
- CSS
- Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ²ΠΎΠΉΡΡΠ²
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ
- Π€ΡΠ½ΠΊΡΠΈΠΈ
- ΠΡΠ°Π²ΠΈΠ»Π°
- Flexbox Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ
- Grid Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ LESS
- JavaScript
- ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π²Π΅Π± API
- ΠΠ±ΡΠ΅ΠΊΡ Array
- ΠΠ±ΡΠ΅ΠΊΡ Date
- ΠΠ±ΡΠ΅ΠΊΡ Function
- ΠΠ±ΡΠ΅ΠΊΡ Global
- ΠΠ±ΡΠ΅ΠΊΡ JSON
- ΠΠ±ΡΠ΅ΠΊΡ Math
- ΠΠ±ΡΠ΅ΠΊΡ Number
- ΠΠ±ΡΠ΅ΠΊΡ Object
- ΠΠ±ΡΠ΅ΠΊΡ RegExp
- ΠΠ±ΡΠ΅ΠΊΡ Promise
- ΠΠ±ΡΠ΅ΠΊΡ String
- jQuery
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ
- Π‘ΠΎΠ±ΡΡΠΈΡ
- ΠΠ΅ΡΠΎΠ΄Ρ DOM
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ
- Π£ΡΠΈΠ»ΠΈΡΡ
- ΠΡΡΠ΅ΠΊΡΡ
- AJAX
- ΠΠ±ΡΠ΅ΠΊΡ Callbacks
- ΠΠ±ΡΠ΅ΠΊΡ Deferred
HTML
-
HTML ΡΡΠ΅Π±Π½ΠΈΠΊ -
Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ΅Π³ΠΎΠ² -
ΠΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ -
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ -
ΠΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΠΈ -
ΠΠΎΠ΄Ρ ΡΠ·ΡΠΊΠΎΠ² -
HTML ΡΠ²Π΅ΡΠ° -
Π’Π΅ΡΡΡ Π·Π½Π°Π½ΠΈΠΉ
CSS
-
CSS ΡΡΠ΅Π±Π½ΠΈΠΊ -
Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ²ΠΎΠΉΡΡΠ² -
CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ -
CSS ΡΡΠ½ΠΊΡΠΈΠΈ -
CSS ΠΏΡΠ°Π²ΠΈΠ»Π° -
Flexbox Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ -
Grid Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ -
LESS ΡΡΠ΅Π±Π½ΠΈΠΊ
JavaScript
-
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π²Π΅Π± API -
ΠΠ±ΡΠ΅ΠΊΡ Array -
ΠΠ±ΡΠ΅ΠΊΡ Date -
ΠΠ±ΡΠ΅ΠΊΡ Function -
ΠΠ±ΡΠ΅ΠΊΡ Global -
ΠΠ±ΡΠ΅ΠΊΡ JSON -
ΠΠ±ΡΠ΅ΠΊΡ MathβΞ² -
ΠΠ±ΡΠ΅ΠΊΡ Number -
ΠΠ±ΡΠ΅ΠΊΡ Object -
ΠΠ±ΡΠ΅ΠΊΡ Promise
ΠΠ΅ΡΠΎΠ΄ .mouseover() | jQuery ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
basicweb.ru
- HTML
- Π£ΡΠ΅Π±Π½ΠΈΠΊ HTML
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ΅Π³ΠΎΠ²
- ΠΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ
- ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ
- ΠΠΎΠ΄Ρ ΡΠ·ΡΠΊΠΎΠ²
- ΠΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΠΈ
- Π¦Π²Π΅ΡΠ°
- Π’Π΅ΡΡΡ Π·Π½Π°Π½ΠΈΠΉ
- CSS
- Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ²ΠΎΠΉΡΡΠ²
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ
- Π€ΡΠ½ΠΊΡΠΈΠΈ
- ΠΡΠ°Π²ΠΈΠ»Π°
- Flexbox Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ
- Grid Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ LESS
- JavaScript
- ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π²Π΅Π± API
- ΠΠ±ΡΠ΅ΠΊΡ Array
- ΠΠ±ΡΠ΅ΠΊΡ Date
- ΠΠ±ΡΠ΅ΠΊΡ Function
- ΠΠ±ΡΠ΅ΠΊΡ Global
- ΠΠ±ΡΠ΅ΠΊΡ JSON
- ΠΠ±ΡΠ΅ΠΊΡ Math
- ΠΠ±ΡΠ΅ΠΊΡ Number
- ΠΠ±ΡΠ΅ΠΊΡ Object
- ΠΠ±ΡΠ΅ΠΊΡ RegExp
- ΠΠ±ΡΠ΅ΠΊΡ Promise
- ΠΠ±ΡΠ΅ΠΊΡ String
- jQuery
- Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ
- Π‘ΠΎΠ±ΡΡΠΈΡ
- ΠΠ΅ΡΠΎΠ΄Ρ DOM
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ
- Π£ΡΠΈΠ»ΠΈΡΡ
- ΠΡΡΠ΅ΠΊΡΡ
- AJAX
- ΠΠ±ΡΠ΅ΠΊΡ Callbacks
- ΠΠ±ΡΠ΅ΠΊΡ Deferred
HTML
-
HTML ΡΡΠ΅Π±Π½ΠΈΠΊ -
Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ΅Π³ΠΎΠ² -
ΠΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ -
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ -
ΠΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΠΈ -
ΠΠΎΠ΄Ρ ΡΠ·ΡΠΊΠΎΠ² -
HTML ΡΠ²Π΅ΡΠ° -
Π’Π΅ΡΡΡ Π·Π½Π°Π½ΠΈΠΉ
CSS
-
CSS ΡΡΠ΅Π±Π½ΠΈΠΊ -
Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΡΠ²ΠΎΠΉΡΡΠ² -
CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ -
CSS ΡΡΠ½ΠΊΡΠΈΠΈ -
CSS ΠΏΡΠ°Π²ΠΈΠ»Π° -
Flexbox Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ -
Grid Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ -
LESS ΡΡΠ΅Π±Π½ΠΈΠΊ
JavaScript
-
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π²Π΅Π± API -
ΠΠ±ΡΠ΅ΠΊΡ Array -
ΠΠ±ΡΠ΅ΠΊΡ Date -
ΠΠ±ΡΠ΅ΠΊΡ Function -
ΠΠ±ΡΠ΅ΠΊΡ Global -
ΠΠ±ΡΠ΅ΠΊΡ JSON -
ΠΠ±ΡΠ΅ΠΊΡ MathβΞ² -
ΠΠ±ΡΠ΅ΠΊΡ Number -
ΠΠ±ΡΠ΅ΠΊΡ Object -
ΠΠ±ΡΠ΅ΠΊΡ Promise
jQuery | ΡΠΎΠ±ΡΡΠΈΡ ΠΌΡΡΠΈ
click() | ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ |
dblclick() | Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ |
mouseover()Β Β mouseout() | Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ; Π²ΡΡ ΠΎΠ΄ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅, Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ Π½Π°ΡΠ°Π»Π° Π΄Π΅ΡΠ΅Π²Π° DOM, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌ |
mouseenter()Β Β mouseleave() | Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ; Π²ΡΡ ΠΎΠ΄ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΠΎΠ±ΡΡΠΈΠ΅ Π½Π΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ |
hover() | ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄Π²ΡΡ
ΡΠΎΠ±ΡΡΠΈΠΉ: mouseenter() β Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ; mouseleave() β Π²ΡΡ ΠΎΠ΄ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; |
mousedown()Β Β mouseup() | ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ Π½Π°ΠΆΠ°ΡΠ°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; |
toggle() | ΠΏΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π²Π΅ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅; jQuery 1.8 ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ, Π² jQuery 1.9 ΡΠ΄Π°Π»Π΅Π½ |
mousemove() | ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π²Π½ΡΡΡΠΈ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
Π€ΡΠ½ΠΊΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ.
Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { var counter = 0; $('.a').click(function () { counter++; if(counter%2 != 0) { $('.b').css({ 'display': 'block' }).text('Hello World!'); } else { $('.b').css({ 'display': 'none' }).text(''); } }); }); </script> </body> </html> Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { var counter = 0; $('.a').click(function () { counter++; if(counter%2 != 0) { $('.b').css({ 'display': 'block' }).text('Hello World!'); } else { $('.b').css({ 'display': 'none' }).text(''); } }); }); </script> </body> </html> ΒΠ€ΡΠ½ΠΊΡΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ.
Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { var counter = 0; $('.a').dblclick(function () { counter++; if(counter%2 != 0) { $('.b').css({ 'display': 'block' }).text('Hello World!'); } else { $('.b').css({ 'display': 'none' }).text(''); } }); }); </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { var counter = 0; $('.a').dblclick(function () { counter++; if(counter%2 != 0) { $('.b').css({ 'display': 'block' }).text('Hello World!'); } else { $('.b').css({ 'display': 'none' }).text(''); } }); }); </script> </body> </html>Β
Βmouseenter()Β Β mouseleave()
Π€ΡΠ½ΠΊΡΠΈΡ mouseenter() Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π€ΡΠ½ΠΊΡΠΈΡ mouseleave() Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { /*ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ*/ $('.a').mouseenter(function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }); Β /*ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mouseleave(function () { $('.b').css({ 'display': 'none' }).text(''); }); }); </script> </body> </html> Β<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { /*ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ*/ $('.a').mouseenter(function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }); Β /*ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mouseleave(function () { $('.b').css({ 'display': 'none' }).text(''); }); }); </script> </body> </html> ΒΠ€ΡΠ½ΠΊΡΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄Π²ΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ:
mouseenter() β Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ;
mouseleave() β Π²ΡΡ ΠΎΠ΄ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°;Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { $('.a').hover( /*ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ*/ function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }, /*ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ function () { $('.b').css({ 'display': 'none' }).text(''); } ); }); </script> </body> </html> Β<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } #main { margin: 20px; } .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { $('.a').hover( /*ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ*/ function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }, /*ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΊΡΡΡΠΎΡΠ° Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ function () { $('.b').css({ 'display': 'none' }).text(''); } ); }); </script> </body> </html> ΒΒ
Βmousedown()Β Β mouseup()
Π€ΡΠ½ΠΊΡΠΈΡ mousedown() Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΌΡΡΠΈ, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π€ΡΠ½ΠΊΡΠΈΡ mouseup()Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } Β #main { margin: 20px; } Β .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } Β .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { /*ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ Π½Π°ΠΆΠ°ΡΠ°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mousedown(function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }); Β /*ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mouseup(function () { $('.b').css({ 'display': 'none' }).text(''); }); }); </script> </body> </html> Β<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } Β #main { margin: 20px; } Β .a { height: 35px; width: 100px; float: left; background-color: #1bb1dd; color: #FFF; text-align: center; line-height: 35px; font-size: 22px; border-radius: 3px; cursor: pointer; } Β .b { height: 35px; width: 300px; float: left; background-color: #87ffc5; margin-left: 20px; text-align: center; line-height: 35px; font-size: 20px; display: none; } </style> </head> <body> <div> <div>OK</div> <p></p> </div> Β <script> $(document).ready(function () { /*ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ Π½Π°ΠΆΠ°ΡΠ°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mousedown(function () { $('.b').css({ 'display': 'block' }).text('Hello World!'); }); Β /*ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π°, ΠΊΡΡΡΠΎΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°*/ $('.a').mouseup(function () { $('.b').css({ 'display': 'none' }).text(''); }); }); </script> </body> </html> ΒΠ€ΡΠ½ΠΊΡΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π²Π½ΡΡΡΠΈ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Β Β index.htmlΒ Β
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } Β #main { height: 400px; width: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; background-color: #1bb1dd; } Β #box1 { margin: 30px; font-size: 36px; } </style> </head> <body> <div> <label>X : </label> <span></span> <br /> <label>Y : </label> <span></span> </div> <div></div> <script> $(document).ready(function () { $('#main').mousemove(function (e) { $('#x').text(e.pageX); $('#y').text(e.pageY); }); }); </script> </body> </html> Β<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Π‘ΡΡΠ°Π½ΠΈΡΠ°</title> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ΅Π· Google CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } Β #main { height: 400px; width: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; background-color: #1bb1dd; } Β #box1 { margin: 30px; font-size: 36px; } </style> </head> <body> <div> <label>X : </label> <span></span> <br /> <label>Y : </label> <span></span> </div> <div></div> <script> $(document).ready(function () { $('#main').mousemove(function (e) { $('#x').text(e.pageX); $('#y').text(e.pageY); }); }); </script> </body> </html> ΒΠ‘ΠΎΠ±ΡΡΠΈΡ Π² jQuery
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
- Π‘Π°ΠΌΠΎΡΡΠΈΡΠ΅Π»ΠΈ
- HTML Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
- CSS Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ HTML5
- Π£ΡΠ΅Π±Π½ΠΈΠΊ Canvas
- XML Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ XML DTD
- Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ XML ΡΡ Π΅ΠΌΠ°ΠΌ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ XML DOM
- Π£ΡΠ΅Π±Π½ΠΈΠΊ XPath
- Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ XSLT
- Π£ΡΠ΅Π±Π½ΠΈΠΊ SVG
- Π£ΡΠ΅Π±Π½ΠΈΠΊ JavaScript
- Π£ΡΠ΅Π±Π½ΠΈΠΊ jQuery
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠΈ
- HTML ΡΠ΅Π³ΠΈ
- CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°
- ΠΠ±ΡΠΈΠ΅ HTML Π°ΡΡΠΈΠ±ΡΡΡ
- HTML Π°ΡΡΠΈΠ±ΡΡΡ-ΡΠΎΠ±ΡΡΠΈΡ
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ XML ΡΡ Π΅ΠΌΡ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ canvas
- Π‘ΡΠ°ΡΡΠΈ
- ΠΠΎΠ²ΠΎΡΡΠΈ
- ΠΠΎΠ½ΡΠ°ΠΊΡ
- ΠΡ ΠΎΠ΄
ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ Π² jQuery
<style>
Β Β Β Β * {box-sizing: border-box}
Β Β Β Β body { font-family: Tahoma;Β Β line-height: 150%; }
Β Β Β Β .test {
Β Β Β Β Β Β Β Β width: 90%;
Β Β Β Β Β Β Β Β margin: 25px auto;
Β Β Β Β }
Β Β Β Β .slideBox {
Β Β Β Β Β Β Β Β width: 480px;
Β Β Β Β Β Β Β Β height: 290px;
Β Β Β Β Β Β Β Β position: relative;
Β Β Β Β Β Β Β Β overflow: hidden;
Β Β Β Β Β Β Β Β float: left;
Β Β Β Β Β Β Β Β margin: 0 25px 25px 0;
Β Β Β Β Β Β Β Β border: 5px solid #ccc;
Β Β Β Β Β Β Β Β padding: 10px;Β Β
Β Β Β Β Β Β Β Β background-color: #ac1259;
Β Β Β Β Β Β Β Β color: #fff;
Β Β Β Β }
Β Β Β Β .slideBox h3 {
Β Β Β Β Β Β Β Β margin: 0 0 15px;
Β Β Β Β Β Β Β Β font-size: 20px;
Β Β Β Β Β Β Β Β text-align: center;
Β Β Β Β }
Β Β Β Β .slideBox img {
Β Β Β Β Β Β Β Β position: absolute;
Β Β Β Β Β Β Β Β z-index: 2;
Β Β Β Β Β Β Β Β width: 100%;
Β Β Β Β Β Β Β Β left: 0; top: 0;
Β Β Β Β }
Β Β Β Β .slideBox .slide-content {
Β Β Β Β Β Β Β Β position: absolute;
Β Β Β Β Β Β Β Β z-index: 1;
Β Β Β Β Β Β Β Β padding: 10px;
Β Β Β Β }
</style>
<div>
Β
Β Β Β Β <div>
Β Β Β Β Β Β <img src=»images/nano-gallery.jpg» alt=»16 Π±ΡΠΈΠ»Π»ΠΈΠ°Π½ΡΠΎΠ²ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery» />
Β Β Β Β Β Β <div>
Β Β Β Β Β Β Β Β Β Β <h3>16 Π±ΡΠΈΠ»Π»ΠΈΠ°Π½ΡΠΎΠ²ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery</h3>
Β Β Β Β Β Β Β Β Β Β <p>ΠΠ· ΡΡΠ°ΡΡΠΈ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
Β Β Β Β Β Β Β Β Β Β ΠΏΠ»Π°Π³ΠΈΠ½Π° <strong>jInvertscroll</strong>, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ΅Π½Ρ
Β Β Β Β Β Β Β Β Β Β Ρ ΠΏΠΎΠΌΠΎΡΡΡ <strong>Slinky</strong>, ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡΒ Β Ρ ΠΏΠΎΠΌΠΎΡΡΡ
Β Β Β Β Β Β Β Β Β Β <strong>Tabslet</strong>, ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ»ΠΈ ΠΊΠ°ΡΡΡΠ΅Π»Ρ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ² ΠΏΠ»Π°Π³ΠΈΠ½ <strong>Slick</strong>, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ</p>
Β Β Β Β Β Β </div>
Β Β Β Β </div> <!—end slideBox—>
Β Β
Β Β Β Β <div>
Β Β Β Β <img src=»images/flip-clock.png» alt=»Π’Π°ΠΉΠΌΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΠ΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery» />
Β Β Β Β Β Β <div>
Β Β Β Β Β Β Β Β <h3>Π’Π°ΠΉΠΌΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΠ΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery</h3>
Β Β Β Β Β Β Β Β <p> jQuery ΠΏΠ»Π°Π³ΠΈΠ½ <strong>FlipClock</strong> ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° CSS3 + jQuery. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ
Β Β Β Β Β Β Β Β Β Β Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ Π²Π°ΠΌ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ. Π ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ,
Β Β Β Β Β Β Β Β Β Β ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΡΠΎΒ Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΡΠ°Π΄ΠΎΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π°ΠΊΡΠΈΡ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡΡ,
Β Β Β Β Β Β Β Β Β Β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΡΠ΅Π· 2 Π΄Π½Ρ.</p>
Β Β Β Β Β Β </div>
Β Β Β Β </div> <!—end slideBox—>
</div>
<script>
Β Β Β Β $(function() {
Β Β Β Β Β Β Β Β $(«.slideBox»).hover(function() {
Β Β Β Β Β Β Β Β Β Β Β Β $(this).find(«img»).stop().animate({
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β top: ‘-120%’
Β Β Β Β Β Β Β Β Β Β Β Β }, 400);
Β Β Β Β Β Β Β Β }, function() {
Β Β Β Β Β Β Β Β Β Β Β Β $(this).find(«img»).stop().animate({
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β top: 0
Β Β Β Β Β Β Β Β Β Β Β Β }, 400);
Β Β Β Β Β Β Β Β });
Β Β Β Β })
</script>
20 Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ
Π Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π°ΠΆΠ΅ ΡΠ°ΠΌΡΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ±ΡΠ΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ . ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ±ΠΎΡ, ΡΡΡΠ΅ΠΊΡ ΠΎΡΡΠΊΠΎΠΊΠ° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ Π·Π²ΡΠΊΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ , — ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΎΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ Π²ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ, ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ .
ΠΠ΄Π΅Ρ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΡΠΈΠ»ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΈΠ»ΠΎΠΆΠΈΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ²Π΅Π΄Π΅Π½ΠΈΠΉ, Π΄ΠΎΡΡΡΠΏΠ° ΠΊ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. Π₯ΠΎΡΠΎΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΌΠ΅ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² . Π‘Π°ΠΌΡΠΉ ΡΠΌΠ½ΡΠΉ ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² .
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅: JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΌΠΎΠΈΠΌ ΡΠΈΡΠ°ΡΠ΅Π»ΡΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΡΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° , Ρ ΡΠΎΠ±ΡΠ°Π» 20 ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.ΠΡΠΎΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π²Π½ΠΈΠ·, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΏΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ ΡΠ°ΠΌΠΈ , ΠΊΠ°ΠΊ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π’ΠΎΠΌΠ΅ΡΠ° ΠΠ΅ΡΠ½Π΅ΡΠ°
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠΉ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΠ³ΡΡ ΡΠ°Π½ΡΡΡΡ ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
ΠΠΎΠΌ
Haus — ΡΡΠΎ ΡΠ°ΠΉΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π°Π³Π΅Π½ΡΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»ΡΠ±ΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΡΠΌΠΎΡ . ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΌΡΠ»ΡΡΡΡΠ½ΡΠ΅ ΡΠΈΠ³ΡΡΠΊΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡΡΠ³Π°ΡΡ ΠΈ Π±Π΅Π³Π°ΡΡ.
Canva
Canva — ΡΡΠΎ ΡΠ΅ΡΠ²ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ . ΠΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠ°Π·ΠΌΡΡΡΠΉ ΡΠΎΠ½, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΎΡΠΈΡΠ°Π΅ΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ , ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΡΠΈΡΠ°Π½ΠΈΡ.
ΠΠ»Π°Π²Π½ΡΠΉ Π·Π°Π²ΠΎΠ΄
ΠΡΠΎ ΡΠ°ΠΉΡ-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΡΡΡΠ΄ΠΈΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π° Mainworks. ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΠΎΡΠΊΠΈ Π² ΡΡΡΠΎΠΊΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΡ .
Π‘Π΅Π΄ΡΠΈΠΊ ΠΠ΅ΡΠ΅ΠΉΡΠ°
ΠΡΠΎ ΡΠ°ΠΉΡ-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ Π‘Π΅Π΄ΡΠΈΠΊΠ° ΠΠ΅ΡΠ΅ΠΉΡΡ Π² ΠΏΠ°ΡΡΠ΅Π»ΡΠ½ΡΡ ΡΠΎΠ½Π°Ρ .ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ . ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° .
ΠΡΠΊ
Bullmonk — ΡΡΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±ΠΈΠ·Π½Π΅ΡΠΎΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ SVG Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ . ΠΡΠΎΡΡΠΎ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ ΡΠ΅ΡΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π² Π½Π΅ΠΌ ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΎΡΠ²Π΅ΡΡΡΠΈΠΉ .
InSymbiosis
InSymbiosis ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΈΠΎΡΠ°ΡΠΌΠ°ΡΠ΅Π²ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΡΠΎΠΌΡΡΠ»Π΅Π½Π½ΠΎΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ°ΡΠ΅Π³ΠΈΠ΅ΠΉ Π΄Π»Ρ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π»Π΅ΠΊΠ°ΡΡΡΠ².ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΠΌΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΎΠ½Π° .
OUI R Creative Studio
OUI R — ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΏΡΠΎΡΠΈΠ»ΡΠ½Π°Ρ ΡΡΡΠ΄ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° , Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ΄Π΅ΡΡ . ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΡΡΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ .
ΠΠΈΠ½Π½ΠΈΠΌ
Minnim ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌΠΈ ΠΊΡΡΠ³Π°ΠΌΠΈ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΈΠΊΠ»Π° Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΡΠΈ.
ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ
Full Bundle — ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΈΡΡΠΎΠ²ΠΎΠ΅ Π°Π³Π΅Π½ΡΡΡΠ²ΠΎ. ΠΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ: Π»ΠΎΠ³ΠΈΠΊΠ° Ρ ΡΠΈΠ½ΠΈΠΌΠΈ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΡΡΡ Ρ ΠΊΡΠ°ΡΠ½ΡΠΌΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°ΠΌΠΈ . ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π°Π΄ ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΎΡΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠ»Π°Π²Π½ΠΎ .
FS ΠΠ΅Π· Π½Π°Π·Π²Π°Π½ΠΈΡ
FS Untitled ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠΌΡ Π΄Π»Ρ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ ΡΡΠΈΡΡΠ° . ΠΠ° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΡΠ΅ΠΉΠΊΠΈ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ° .
Trainrobber
Trainrobber — ΡΡΠΎ Π°Π³Π΅Π½ΡΡΡΠ²ΠΎ AR ΠΈ VR , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ΅Π²ΠΎΠ»ΡΡΠΈΠΎΠ½Π½ΡΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ ΠΎΡ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±ΡΠ΅Π½Π΄ΠΎΠ². ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ Π²Π΅ΡΡΠ΅ΡΠ½ . ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ Π°Π½ΠΈΠΌΠΈΡΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
Sakura International Inc.
Sakura — ΡΠΏΠΎΠ½ΡΠΊΠ°Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ, ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΠ°ΡΡΡ Π½Π° ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ΅ΡΠΊΠΈΡ ΡΠ΅ΡΡΡ . ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΎΡΠΊΠΈ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ ΠΎΠ΄Π½ΠΈΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΡΡΠΈ .
ΠΠ΅Π½ΡΠΈΠ»ΡΡΠΎΡ Π‘ΡΡΠ΄ΠΈΡ
Fan Studio — ΡΡΠΎ ΠΌΡΠ»ΡΡΡΡΠ½ΡΠΉ ΡΠ°ΠΉΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΈΠ³ΡΡ ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ , ΡΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΌΡΡΠΈ .
Π‘ΡΡΠ΄ΠΈΡ ΠΠΎΠ²Π΅ΡΠ½ΡΡΡ
ΠΡΠΎ ΡΠ°ΠΉΡ Π±ΡΠ΅Π½Π΄Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΡΡΠ΄ΠΈΠΈ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΈΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. Π£ Π½ΠΈΡ Π΅ΡΡΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ Π±Π΅Π»ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ ΠΊΡΡΠΆΠΊΠΎΠΌ. ΠΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠ΅Π½ΡΒ», Π² ΠΊΡΡΠ³Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΠΌΠΏΠ°Π½ΠΈΡ TheMcBrideCompany
ΠΠ° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ TheMcBrideCompany Π΅ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½Π°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π·ΠΌΡΡΠ°.ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΠ½ , Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΡΡΡΠΎΡΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈ .
Π£ΠΌΠ½ΡΠΉ Π€ΡΠ°Π½ΠΊΠ΅
Clever Franke — Π°Π³Π΅Π½ΡΡΡΠ²ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΡΡΠ°ΡΠ΅Π³ΠΈΡ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² ΠΈ ΡΡΠ»ΡΠ³ . ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π²ΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° Π½Π°Π΄ Π±ΡΠΊΠ²Π°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° , Π½ΠΎ ΡΠ΅ΡΠ΅Π· ΡΠ΅ΠΊΡΠ½Π΄Ρ ΠΎΡΡΡΡΠΏΠ°ΡΡ.
Π¦Π΅Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ
Π‘Π°ΠΉΡ Π¦Π΅Π½ΡΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ
ΠΈΠΌΠ΅Π΅Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ° ΠΈΡ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΡΡΠΊΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΠ΅ΠΉ . ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΡΡΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΎΠ½ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡ Π΄Π΅ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ .
Π’ΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΎ
Just Coded ΠΈΠΌΠ΅Π΅Ρ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΌΠ½ΡΠΉ ΡΠΎΠ½ Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ, ΠΎΠ±ΡΠ°Π·ΡΡΡΠΈΠΌΠΈ Ρ ΠΎΠ»ΡΡ . ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΠΎΡ Ρ ΠΎΠ»ΡΡ, ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΆΠΈΠ²ΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΈ ΠΌΠ΅Π½ΡΡΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ .
ΠΠΈΠ½Π΅ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ Π½Π°Π³ΡΠ°Π΄Π°ΠΌΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠΈΡΡΠΎΠ²ΠΎΠ³ΠΎ Π°Π³Π΅Π½ΡΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π·Π°ΠΏΠ°ΡΠ΅Π½ΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² iOS ΠΈ Android . ΠΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ Π½Π΅Π±ΠΎ , ΠΈ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π²Ρ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΡΠ° .
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅: 30 ΠΏΡΠΎΡΡΡΡ ΠΈΠ΄Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΊΡΠ°ΡΠΈΠ²Π΅Π΅
100+ jQuery Image Hover Effect Plugin Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ
Flip Box — ΡΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ ΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ°.ΠΠ½ ΡΠ΄Π΅Π»Π°Π½ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Bootstrap ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ»ΠΈΠΏ-Π±ΠΎΠΊΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠ»ΠΈΠΏ-ΠΊΠ°ΡΡ Π±Π΅Π· Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ΄Π° javascript. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ 12+ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΡΡΡΠ΅ΠΊΡ ΡΠ΅Π»ΡΠΊΠ° ΠΌΡΡΡΡ, ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½ Π½Π° Π»ΡΠ±ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.
ΠΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ°ΡΠΎΠ²ΡΠ²Π°Π» Β«ΡΡΡΠ΅ΠΊΡ Π²ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ±ΠΈΒ», ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ Π½ΠΈΠΌ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈ ΠΏΡΠΎΠ΅ΠΊΡΡ.ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΠΌΠΎΠΈΠΌΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ jQuery, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Β«ΡΡΡΠ΅ΠΊΡ Π²ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ±ΠΈΒ» Ρ jQuery ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ zip ΠΈ minifiert ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 2 ΠΠ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Ρ Π²Π°ΠΌΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΈΠ΄Π΅ΡΠΌΠΈ ΠΊΡΠΎΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΡΠΎΠΈΡΡΠ΅ΠΊΠ°Π΅Ρ ΠΈΠ· ΡΡΡΠ΅ΠΊΡΠ° Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° Merci-Michel, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈ. ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΠΎΠΏΠΊΡ Π·Π° Π½Π°Π²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ, ΡΡΠΎ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ Π±ΡΡΡΡΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π°Π½ΠΈΠΌΠ΅ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ JavaScript .js Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Tilt.js — ΡΡΠΎ ΠΊΡΠΎΡΠ΅ΡΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ AnimationFrame Ρ Π»Π΅Π³ΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½Π° 60+ ΠΊΠ°Π΄ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ Π΄Π»Ρ jQuery.
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΏΠ»Π°ΠΊΠ°ΡΠ°ΠΌΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ clip-path.
ΠΠ΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΠΏΠ»Π°ΠΊΠ°ΡΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΡΠ°Π½Π΄-ΠΠ°Π½ΡΠΎΠ½Π° Ρ Π·Π°Π±Π°Π²Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΡ: Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΡΠ΅Π·Π°ΡΡΡΡ ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. ΠΠ΅ΡΠ°Π»ΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΈ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ Π²ΠΈΠ΄.Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ JavaScript.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ΄Π΅ΠΈ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΡΠ΅ΠΊΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°ΠΊΠ»ΠΎΠ½Π°. ΠΠ΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ Kikk 2015. ΠΡ Ρ ΠΎΡΠΈΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ΅ΡΠΊΠΈ) Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°ΠΊΠ»ΠΎΠ½Π° Π΅Π³ΠΎ ΡΠ°ΡΡΠ΅ΠΉ. ΠΠΌΠ΅Ρ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Β«Π½Π°ΠΊΠ»ΠΎΠ½Β»), ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«ΡΠΈΡΠ½ΠΈΠ΅Β», ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉ Ρ ΡΠ²Π΅ΡΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡ.
ΠΠ±Π»Π΅Π³ΡΠ°Π΅Ρ Π²Π΅Π±-Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ²ΡΠ·Π΅ΠΉ (ΡΡΡΠ΅Π»ΠΎΠΊ) ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
- Π‘ΡΡΠ΅Π»ΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ ΠΎΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌΡ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ / ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ;
- ΠΠ΅ Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΠΉ. Π‘ΡΡΠ΅Π»ΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΡΡΡΡ ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²). Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΡΠ΅Π³Π΄Π° Π²ΠΈΠ΄Π½Ρ;
- ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ ΡΠΎΡΠΌΡ: Π»ΠΈΠ½ΠΈΡ, ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΡ, ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΠΊΡΠΈΠ²ΡΠ΅ ΠΠ΅Π·ΡΠ΅ ΠΈ ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΡΠΈΠ²ΡΠ΅ ΠΠ΅Π·ΡΠ΅;
jQuery Hover3d — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΊΡΠΈΠΏΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS3, ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ translateZ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ.
Philter — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΡΡΠ΅ΡΠ° Π°ΡΡΠΈΠ±ΡΡΠΎΠ² HTML. ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ΅ΠΊΡΡ.
ΠΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ Π² jQuery
ΠΡΡ ΡΡΠ°ΡΡΡ ΡΠ΅ΡΠ΅Π½Π·ΠΈΡΠΎΠ²Π°Π»ΠΈ ΠΠ΅ΡΠ½ ΠΠ½ΡΠ΅ΡΠ° ΠΈ ΠΠ°ΠΌΠΈΠ»ΠΎ Π Π΅ΠΉΠ΅Ρ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π²ΡΠ΅ΠΌ ΡΠ΅ΡΠ΅Π½Π·Π΅Π½ΡΠ°ΠΌ SitePoint Π·Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ SitePoint ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡΡΡΠ΅!
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ Π² jQuery ΠΊΠ°ΠΊ ΡΠΎΠ±ΡΡΠΈΡ.Π‘ΠΎΠ±ΡΡΠΈΡ Π²Π°ΠΆΠ½Ρ Π² ΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
jQuery ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π±ΡΡΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ°, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ contextmenu ()
, hover ()
ΠΈ keyup ()
, Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΎΠ±ΡΡΠΈΠΉ. Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ, jQuery ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΠ±ΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π½Π°
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ: on ('eventName', handler)
.ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ Π΄Π»Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ
ΡΠΎΠ±ΡΡΠΈΠΉ DOM, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄Π»Ρ ΡΡΠΈΡ
ΡΠΎΠ±ΡΡΠΈΠΉ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ JavaScript.
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠ΅ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ Π½Π° ΠΏΡΡΡ ΡΠΈΡΠΎΠΊΠΈΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ, ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π»ΡΡΡΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π½ΠΈΠΌΠΈ.
Π‘ΠΎΠ±ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π ΡΡΠΎΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΡΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ. ΠΡΠΎ error
, resize
ΠΈ scroll
.ΠΡΠΈΠ±ΠΊΠ° . Π‘ΠΎΠ±ΡΡΠΈΠ΅
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ³ΠΎ ΡΡΠ»ΡΠΊ ΡΡΡΠ°ΡΠ΅Π» Ρ jQuery Π²Π΅ΡΡΠΈΠΈ 1.8, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ('error', handler) Π²ΠΌΠ΅ΡΡΠΎ
.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΡΠ°ΡΠ·Π΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Internet Explorer ΠΈ WebKit Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Opera, Π²ΡΠ·ΡΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ src
Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°.
$ (ΠΎΠΊΠ½ΠΎ) .resize (function () {
var windowWidth = $ (ΠΎΠΊΠ½ΠΎ) .width ();
if (windowWidth <= 600) {
$ ("img"). attr ("src", "image-src-here.jpg");
}
});
ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ CodePen ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ:
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° SitePoint (@SitePoint) Π½Π° CodePen.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΡΠ²ΠΈΡΠΊΠ°
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΡΠΎΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.ΠΠΎΠΌΠΈΠΌΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° window
, ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ iframe ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅.
ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΈΡΠΈΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠ·Π²Π°Π½ΠΎ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ, ΡΠ΅Π»ΡΠΊΠΎΠΌ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ»Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΡΡΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ» Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΠΎΠ»Π΅Π΅ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
$ (ΠΎΠΊΠ½ΠΎ) .scroll (function () {
if ($ (ΠΎΠΊΠ½ΠΎ) .scrollTop ()> = 500) {
$ ("# alert"). text ("ΠΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ»ΠΈ!");
}
});
Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ CodePen Π½ΠΈΠΆΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΈ Π΄ΠΎΡΡΠΈΠ³Π½Π΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ°, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΏΠΎΡΡΠΈ Π² ΡΠ°ΠΌΠΎΠΌ Π½ΠΈΠ·Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ:
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ SitePoint (@SitePoint) Π½Π° CodePen.
Π‘ΠΎΠ±ΡΡΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ²
jQuery ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ ΡΡΠ΅Ρ
ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ DOM.ΠΡΠΎ load
, unload
ΠΈ ready
.
load ()
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ΅ΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΊΡΠΈΠΏΡΡ, iframe ΠΈ ΡΠ°ΠΌ ΠΎΠ±ΡΠ΅ΠΊΡ window
. Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ΠΎ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΎ, Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΏΠΎΠ΄ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΠΎΠ½ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΏΠΎ Π΄Π΅ΡΠ΅Π²Ρ DOM. ΠΡΠΎΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Π΄Π΅ΠΆΠ½ΡΠΌ ΠΈ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΌ.
ΠΡΠ³ΡΡΠ·ΠΊΠ° Π‘ΠΎΠ±ΡΡΠΈΠ΅
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡ
ΠΎΠ΄ΠΈΡ Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΡΠΈ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ½ΡΠ» ΡΡΡΠ»ΠΊΡ, Π²Π²Π΅Π» Π½ΠΎΠ²ΡΠΉ URL-Π°Π΄ΡΠ΅Ρ Π² Π°Π΄ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠΎΠΊΡ ΠΈΠ»ΠΈ Π·Π°ΠΊΡΡΠ» ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ preventDefault ()
Π½Π΅ ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ unload
. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π²ΡΠ·ΠΎΠ²Ρ alert ()
, confirm ()
ΠΈ prompt ()
Π±ΡΠ΄ΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ, Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ:
$ (ΠΎΠΊΠ½ΠΎ).unload (function () {
alert (Β«ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ ΡΡ
ΠΎΠ΄ΠΈ!Β»);
});
Π load (),
, ΠΈ unload ()
ΡΡΡΠ°ΡΠ΅Π»ΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ 1.8.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π³ΠΎΡΠΎΠ²Π½ΠΎΡΡΠΈ
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΊΡΠΈΠΏΡ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΡ DOM ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π°. Π‘ΠΎΠ±ΡΡΠΈΠ΅ ready
ΠΏΠΎΠ·Π°Π±ΠΎΡΠΈΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π·Π° Π²Π°Ρ. ΠΡΠ±ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠ΅ ΠΊ ΡΡΠΎΠΌΡ ΡΠΎΠ±ΡΡΠΈΡ, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ DOM Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΎΠ².ΠΠ½ΡΡΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΊΠΎΠ΄ jQuery ΠΈΠ»ΠΈ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ CodePen Π½ΠΈΠΆΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ DOM ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π³ΠΎΡΠΎΠ²ΡΠΌ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π³ΠΎΡΠΎΠ²Π½ΠΎΡΡΠΈ DOM ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
ΠΡΠ»ΠΈ Π²Π°Ρ ΠΊΠΎΠ΄ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΠΈΠ»Ρ CSS, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π΅Π³ΠΎ Π·Π°ΠΏΡΡΠΊΠΎΠΌ.
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΡΠ·Π²Π°Π½Ρ Π»ΡΠ±ΡΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠΎΠΉ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ ΠΈ ΡΠΈΠΏΠ΅ ΡΠΎΠ±ΡΡΠΈΡ. Π jQuery Π΅ΡΡΡ ΡΡΠΈ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ - keydown ()
, keyup ()
ΠΈ keypress ()
.
Π‘ΠΎΠ±ΡΡΠΈΡ Keyup ΠΈ Keydown
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, keyup
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅, Π° keydown
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅.ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ±ΠΎΠΈΡ
ΡΡΠΈΡ
ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Ρ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½ΠΎ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΡΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ which
ΠΎΠ±ΡΠ΅ΠΊΡΠ° event
, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΠ° Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ°. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Ρ
ΡΠ°Π½Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π° jQuery Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ which
Π΄Π»Ρ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠ³ΠΎ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΡΠΎΠΈΡ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ±Π° ΡΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈ ΠΈ ΡΠ΄Π²ΠΈΠ³ΠΎΠΌ + .Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈ shift ΠΈ a ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅Ρ Π»ΡΠ±ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ keydown
. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ y ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· DOM.
$ ("# alert"). Keydown (function (event) {
switch (event.which) {
case 89:
$ ("# ΡΠ»Π΅ΠΌΠ΅Π½Ρ"). remove ();
ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π°;
}
});
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ SitePoint (@SitePoint) Π½Π° CodePen.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ
ΠΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠΎΠ±ΡΡΠΈΡ keydown
. ΠΠ΄Π½ΠΎ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ°Π·Π»ΠΈΡΠΈΠΉ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ»Π°Π²ΠΈΡΠΈ-ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ Π±Π΅Π· ΠΏΠ΅ΡΠ°ΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Shift , Esc ΠΈ Ρ. Π., ΠΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ keypress
. Π― Π½Π΅ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ²ΠΎΡΡ, ΡΡΠΎ Π²Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ keypress
Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ
Π²Π°ΡΠ° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
Π½Π°ΠΆΠ°ΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠ°ΠΌΠΈ. keypress
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΌΠ²ΠΎΠ» Π±ΡΠ» Π²Π²Π΅Π΄Π΅Π½, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, A
ΠΈΠ»ΠΈ a
.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠΈ:
$ ("ΡΠ΅Π»ΠΎ"). Keypress (ΡΡΠ½ΠΊΡΠΈΡ (ΡΠΎΠ±ΡΡΠΈΠ΅) {
switch (event.keyCode) {
case 75:
$ (". K"). Css ("Π΄ΠΈΡΠΏΠ»Π΅ΠΉ", "Π½Π΅Ρ");
ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π°;
}
});
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΡΡΠΈ
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΡΡΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΡΡΠΈ. Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΡΠ΅Π»ΡΠΊΠ°Ρ
, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ click
, dblclick
ΠΈ contextmenu
, ΠΈΠ»ΠΈ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, mouseenter
, mouseleave
ΠΈ mousemove
.Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ Ρ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΡ ΠΈΡ
Π²ΡΠ΅ ΠΈ Π²ΠΊΠ»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
Π‘ΠΎΠ±ΡΡΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠ»ΠΈΠΊΠΎΠ²
Π jQuery ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΏΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Π»ΡΠΊΠ°. Π‘ΠΎΠ±ΡΡΠΈΡ mousedown
ΠΈ mouseup
, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΠΉ, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΈ ΠΎΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠΎΠ±ΡΡΠΈΠ΅ click
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡΡΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°ΠΆΠ°ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΏΡΡΠ΅Π½Π° Π½Π°Π΄ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
dblclick
Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅. Π§ΡΠΎΠ±Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Π±ΡΠ»ΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΊΠ°ΠΊ dblclick
, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π΄Π²Π° Π±ΡΡΡΡΡΡ
ΡΠ΅Π»ΡΠΊΠ° ΠΌΡΡΡΡ Π΄ΠΎ ΠΈΡΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΡΡΠ΅ΠΌΠ½ΠΎ-Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π°. ΠΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ click
ΠΈ dblclick
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ, Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌΡΠ΅ ΠΏΡΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ ΡΠ΅Π»ΡΠΊΠ΅, Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π²Π° ΡΠΎΠ±ΡΡΠΈΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»ΡΠΊΠ° ΠΏΠ΅ΡΠ΅Π΄ Π΄Π²ΠΎΠΉΠ½ΡΠΌ ΡΠ΅Π»ΡΠΊΠΎΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΡΡΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»ΡΠΊΠ° ΠΏΠ΅ΡΠ΅Π΄ Π΄Π²ΠΎΠΉΠ½ΡΠΌ ΡΠ΅Π»ΡΠΊΠΎΠΌ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π‘ΠΎΠ±ΡΡΠΈΠ΅
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π»ΡΠΊΠ° ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½ΠΎ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π² ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ΅ ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ:
$ ("img"). Contextmenu (function (event) {
event.preventDefault ();
$ ("# Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅-ΠΌΠ΅Π½Ρ")
.show (). css ({
Π²Π²Π΅ΡΡ
Ρ: event.pageY + 10,
ΡΠ»Π΅Π²Π°: event.pageX + 10
});
});
$ ("# custom-menu #option"). click (function () {
$ ("img"). toggleClass ("ΠΈΠΌΡ-ΠΊΠ»Π°ΡΡΠ°");
});
ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈ CSS ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ:
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΠ΅ contextmenu ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
Π‘ΠΎΠ±ΡΡΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π²Π½ΡΡΡΡ ΠΈ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ±ΡΡΠΈΠΉ mouseover
ΠΈ mouseenter
. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΠΎΠ±Π° ΡΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΡΠΎΠ±ΡΡΠΈΡ mouseleave
ΠΈ mouseout
ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ΄Π½ΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ mouseleave
ΠΈ mouseout
ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ ΠΏΡΠΈΠ²ΡΠ·Π°Π½.Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, mouseout
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π»ΡΠ±ΡΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΡΠ°Π·Π½ΠΈΡΠ° ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ΅ΠΆΠ΄Ρ mouseenter
ΠΈ mouseover
.
ΠΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Pen Mouse ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΠΉ mouseenter
ΠΈ mouseover
ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ ΠΌΡΡΠΈ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΠΎΠΉΡΠΈ Π² Π±ΠΎΠ»ΡΡΡΡ ΡΠΈΠ½ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ΡΡ ΠΏΡΡΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π²ΠΎΠΉΡΠΈ Π² ΠΏΡΠ°Π²ΡΡ ΡΠΎΠ·ΠΎΠ²ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ.Π mouseenter
, ΠΈ mouseover
Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 1. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ΡΡ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΎΠΉΠ΄Π΅ΡΠ΅ Π² ΡΠΎΠ·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅, ΡΡΠ΅ΡΡΠΈΠΊ mouseover
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° Π΄Π²Π°. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΈΠ·-Π·Π° Π²ΡΠΏΠ»ΡΡΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠΎΠ±ΡΡΠΈΠ΅ΠΌ mouseover
. Π‘ΠΎΠ±ΡΡΠΈΠ΅ mouseover
Π½Π° ΡΠΎΠ·ΠΎΠ²ΠΎΠΌ ΠΏΠΎΠ»Π΅ Β«ΠΏΡΠ·ΡΡΠΈΡΡΡΒ» Π΄ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠΈΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Ρ ΡΡΠ΅ΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ mouseover
Π½Π° 1. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ΡΡ Π΄Π°Π»ΡΡΠ΅ Π²Π»Π΅Π²ΠΎ ΠΈ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΠ±ΠΎΠΈΠΌΠΈ ΡΠΎΠ·ΠΎΠ²ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ, ΡΠΎΠ±ΡΡΠΈΠ΅ mouseover
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠ½ΠΎΠ²Π°.Π ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΠΉΠ΄Π΅ΡΠ΅ Π΄ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΈΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΠΉ mouseover
Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ 5, Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΠΉ mouseenter
Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ°Π²Π½ΠΎ 1.
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΡΠ°ΡΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΄Π»Ρ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΠΎΠ±ΡΡΠΈΠΉ mouseleave
ΠΈ mouseout
. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΡΡΠ΅Ρ.
Π‘ΠΎΠ±ΡΡΠΈΡ Mousemove ΠΈ Hover
Π‘ΠΎΠ±ΡΡΠΈΠ΅ mousemove
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠ½ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΌΡΡΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠΈΠΊΡΠ΅Π»Ρ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π·Π° ΠΊΠΎΡΠΎΡΠΊΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°ΠΏΡΡΠ΅Π½Ρ ΡΠΎΡΠ½ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΠ°ΠΊ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ Π²Π½ΡΡΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ mousemove
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ΅Π½.
hover
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ Π΅Π³ΠΎ. ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° Π²ΡΠ·Π²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ hover
.ΠΠ΅ΡΠ²ΡΠΉ:
$ ("Π²Π°Ρ-ΡΠ΅Π»Π΅ΠΊΡΠΎΡ"). Hover (handlerIn, handlerOut);
ΠΠ΄Π΅ΡΡ handlerIn ()
Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈ handlerOut ()
, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ Π΅Π³ΠΎ. ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±:
$ ("Π²Π°Ρ-ΡΠ΅Π»Π΅ΠΊΡΠΎΡ"). Hover (handlerInOut);
ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΎΠ΄Π½Π° ΠΈ ΡΠ° ΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΡ handlerInOut
Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΈ Π²Ρ
ΠΎΠ΄Π΅ Π² , ΡΠ°ΠΊ ΠΈ ΠΏΡΠΈ Π²ΡΡ
ΠΎΠ΄Π΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .
Π‘ΠΌ. ΠΠ΅ΡΠΎ Π‘ΠΎΠ±ΡΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΡΠΈΠ»ΡΡΡΠ° CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² IE.
Π‘ΠΎΠ±ΡΡΠΈΡ ΡΠΎΡΠΌΡ
Π€ΠΎΡΠΌΡ ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½Ρ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΠΎΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π² ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΎΡΠΌΡ. Π jQuery Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠΎΡΠΌΡ. ΠΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ ΠΌΠΎΠ³ΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΏΠΎΡΠ΅ΡΠ΅ ΡΠΎΠΊΡΡΠ°. ΠΡΡΡ ΡΠ΅ΠΌΡ ΡΠΎΡΠΌΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠΏΡΠΈΡΡΠΈΠΉ, ΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡ ΠΈΡ Π²ΡΠ΅ ΠΎΠ΄Π½ΠΎ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.
Π‘ΠΎΠ±ΡΡΠΈΡ Blur, Focus, Focusin ΠΈ Focusout
Π‘ΠΎΠ±ΡΡΠΈΠ΅ focus
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ.ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΎΡΠΌΡ ΠΈ ΡΠ΅Π³Π°ΠΌ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. Π§ΡΠΎΠ±Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ focus
Π½Π° Π»ΡΠ±ΠΎΠΌ Π΄ΡΡΠ³ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ tabindex
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΠΊΡΡΠ° Π½Π° ΡΠΊΡΡΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΎΡΠΈΠ±ΠΊΠ΅ Π² Internet Explorer. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΠΎΠΊΡΡΠ° Π±Π΅Π· ΡΠ²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΎΠΊΡΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ·Π²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ triggerHandler ("focus")
.
Π Π°Π·ΠΌΡΡΠΈΠ΅ Π‘ΠΎΠ±ΡΡΠΈΠ΅
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΠΊΡΡ.Π ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΎΡΠΌΡ.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠΎΠ±ΡΡΠΈΡ focus
, focusin
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΎΠΊ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ focusout
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΡΠ΅ΡΡΡΡ ΡΠΎΠΊΡΡ. ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠ±ΡΡΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°Π»ΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π΄Π²Π° ΡΠΎΠ±ΡΡΠΈΡ.
Π‘ΠΎΠ±ΡΡΠΈΡ Π²ΡΠ±ΠΎΡΠ°, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π‘ΠΎΠ±ΡΡΠΈΠ΅
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.ΠΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
, ΠΈ
. Π ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π°ΠΆΠΊΠΎΠ², ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π²ΡΠ±ΠΎΡΠ° ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π²ΡΠ±ΠΎΡ. ΠΠ° Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΎΠ½ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΠΊΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π²ΠΎΠ΄Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ select
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
ΠΈ
. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΡΠ°Π΅ΡΡΡ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΌΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΎΡΠΌΡ. Π§ΡΠΎΠ±Ρ Π²ΡΠ·Π²Π°ΡΡ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
,
ΠΈΠ»ΠΈ
.ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ JavaScript submit
Π½Π΅ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ Π² Internet Explorer. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ jQuery 1.4.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Pen Form ΠΎΡ SitePoint (@SitePoint) Π½Π° CodePen.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² jQuery 3
ΠΠ΅ΡΠΎΠ΄Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ,
, ,
ΠΈ , Π²ΡΠ³ΡΡΠ·ΠΊΠ°
ΡΡΡΠ°ΡΠ΅Π»ΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ jQuery 1.8. ΠΠ΅ΡΠΎΠ΄ load ()
Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ΅Π½ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ Π»ΠΈΠ±ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΡ AJAX, Π»ΠΈΠ±ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠ΅ΡΠΎΠ΄ error
ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΡΠ°ΡΡ Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ jQuery.error ()
. Π’Π΅ΠΏΠ΅ΡΡ Π² jQuery 3 ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π°Π»Π΅Π½Ρ. Π’Π΅ΠΏΠ΅ΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π°
Π΄Π»Ρ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΡΡΠΈΡ
ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΌΡΡΠ»ΠΈ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π» Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΠ±ΡΡΠΈΠΉ jQuery, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌΠΈ ΡΠΎΠ±ΡΡΠΈΡΠΌΠΈ. ΠΠ½Π°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ keypress
Π²ΠΌΠ΅ΡΡΠΎ keydown
, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π΄ΡΠ°Π³ΠΎΡΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΊ ΡΠΎΠ±ΡΡΠΈΡΠΌ DOM Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ JavaScript, jQuery Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π½ΠΎΡΠΌΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΌΠ΅ΠΆΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ
ΡΠ°Π·Π»ΠΈΡΠΈΠΉ ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ / ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΎΠ±ΡΡΠΈΡΡ , ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ jQuery. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΎΠ²Π΅ΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ Π² jQuery, ΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ.
50 CSS Hover Effects
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π½ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML ΠΈ CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°: Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Ρ. Π. .ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π·Π° ΡΠ΅Π²ΡΠ°Π»Ρ 2019 Π³. 11 Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ.
- CSS ΠΡΠΈΠΌΠ΅ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
- ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
- jQuery Hover Effects
- Bootstrap Hover Effects
HTML ΠΈ CSS ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΊΠΎΠ΄Π° (34 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠ»ΠΈΠ½Π° ΠΠ΅ΡΡΠΌΠ°Π½
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ CSS
ΠΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Sass @mixin
, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π°. ΠΠ½ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠ»Π°Π΄ Π Π°ΠΊΠΎΠ°Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ»ΠΈΠΏ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° clip-path
, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½Π°Ρ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΠΆΠ΅ΡΡΠΈ ΠΠΎΡΡ
Π ΠΊΠΎΠ΄Π΅
Π Π°Π·Π²Π»Π΅ΡΠ΅Π½ΠΈΡ Ρ: hover
ΠΡΠΎΡΡΠΎ ΠΏΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ Π²Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS : hover
ΠΏΡΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅Ρ
ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML (ΠΈ ΠΈΡ
Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠ³ΠΎΠΊΠ½ΠΎΠΏΠΎΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΏΠ»ΠΈΡΠΊΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ CSS Hover FX
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
CSS Hover FX
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠ΅Π»ΠΈΡΡΠ° ΠΠΌ
Π ΠΊΠΎΠ΄Π΅
ΠΠ»Π°Π΄ΠΊΠΈΠΉ ΠΈ ΠΎΡΡΡΡΠΉ
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΠ°Π΅Π² Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠ½Π΄ΠΈ ΠΡΡΡΡΡ
Π ΠΊΠΎΠ΄Π΅
Π’Π΅ΡΡΠ΅Π»ΡΡΠΈΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΡΠΎΡΠ³ΠΎΠ²Π»Ρ
Π’Π΅ΡΡΠ΅Π»ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΡΠΈΡ ΠΠΎΠΉΠ΅Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π² ΡΠ°Ρ ΠΌΠ°ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
Π§ΠΈΡΡΡΠΉ CSS Box Hover Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΈΡΠ°ΡΡ ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ.ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π°. ΠΠΎΠ»Π½Π°Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½Π°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΡΠΎΠ½ΠΊΠ° Π Π°ΡΠ»Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML / CSS (SCSS) / JavaScript (Babel)
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠ½Π΅ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΌΠ°Π³Π½ΠΈΡΠ½Π°Ρ ΡΠΎΡΠΊΠ°
ΠΠΈΠ½Π΅ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΌΠ°Π³Π½ΠΈΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ JavaScript.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠΊΠΎΠ²
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π±Π»ΠΎΠΊΠΈ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΡΡΠ΄Π»ΠΈ ΠΡΠ΄Π°Ρ
Π ΠΊΠΎΠ΄Π΅
Circle Hover Effect
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΠΆΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΊΡΠΎΡΠΠΎΡΠΎΠ»ΡΠΊ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ ΡΡΠ±ΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- Π‘ΠΈΠ΄Π΄Ρ Π°ΡΡΡ Π₯ΡΠ±Π»ΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS: filter: drop-shadow ()
, clip-path: polygon ()
, CSS Grid.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- Π€ΠΈΡΡΠΈ ΠΠ»ΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Super Team Deluxe
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΡΠ°Π½ ΠΠ°ΡΡΠ΅Π»Ρ
Π ΠΊΠΎΠ΄Π΅
Π€ΡΡΡΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ 3D-Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΡΡΡΠ΅ΠΊΡ.ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS , ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΈ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΠ»Π΅Π½ΡΠ°ΠΌ. ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
Π΄ΡΡΠ³ΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
, Ρ Π²Π°Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ΄Π΅ΠΈ. ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ ΠΈΠ΄Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΠΎΠ²Π°ΡΡ Π΅Π΅ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΈΡΡΠΎΠΉ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: material-icons.css
ΠΠ²ΡΠΎΡ
- Π’ΠΎΠ±ΠΈΠ°Ρ ΠΠ»Π°ΡΡ
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΌΠ½Π΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ!
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π±ΠΎΠΊΡΠ° Ρ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΡΠΎΠ±ΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Magic Zoom
ΠΠΎΡΠΎΠ±ΠΊΠ° Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±ΠΎΠΊΡ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΡΠΊΠ°Ρ ΠΠ΅ΡΠ½Π΅Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ³Π»ΠΎΠ² ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ³Π»ΠΎΠ² ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΈΡΡΡΠΉ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΡΠ²ΠΈΠ΄ ΠΠ΅ΠΉΠ½ΠΈΠ½Π³Π΅Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ: Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ½Π°
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠΎΠ²Π°Ρ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°ΠΊΠΈΠ²Π°Π΅Ρ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΠΎΠ½ ΠΈ ΠΎΠΆΠΈΠ²Π»ΡΠ΅ΡΡΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠΊ ΠΠΆΠΎΡΠ΄ΠΆΠ° Π£.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML
- CSS
- JavaScript / Babel
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΆΠ΅ΠΊΡΠΎΡΠ° Ρ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ
ΠΡΠΎ ΠΏΠ΅ΡΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΠΆΠ΅ΠΊΡΠΎΡΠ°.
ΠΠ²ΡΠΎΡ
- ΠΠ½Ρ Π‘Π·Π΅ΡΠΎ
Π ΠΊΠΎΠ΄Π΅
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΠ°ΡΡΡ
Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΡΠ±ΠΎΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ±ΠΎΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS clip-path
Π±Π΅Π· JS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ²ΡΠΎΡ
- ΠΠ²Π΅Π½ΡΠΈΠ½ ΠΠ΅ΡΠΎΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ
- HTML / ΠΠΎΠΏΡ
- CSS / SCSS
- JavaScript
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈ Π±Π»Π΅ΡΠΊΠ° 16/9
ΠΡΠΎΡ ΡΡΠΊΠΈΠ· ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ 16/9 ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅.ΠΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΈΡΡΡΠ΅Π³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ Π²ΠΈΠ΄Π΅ΠΎ. ΠΡΡΠ΅ΠΊΡ ΡΠΈΡΠ½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ CSS, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π Π°ΡΠ»Π΅ΠΌ ΠΡΠΎΠ½ΠΊΠ°.
ΠΠ²ΡΠΎΡ
- ΠΡΡΡΠΈΠ΄ΠΈ Π£ΠΈΠ»ΡΡΠΌΡ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠ΄Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° div
.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ GIF: ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠΈΠ²Π»Π΅ΠΊΠ°ΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΈ Π₯ΡΠ±ΡΠ΅Π³ΡΠΎΠΌ
6 ΠΈΡΠ»Ρ 2017 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π‘ΠΏΠΈΡΠΎΠΊ Π±Π»ΠΎΠΊΠΎΠ² Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΠΊΡΠΈΠΌΠΎΠΌ ΠΠ°ΡΠ°ΡΠΈ
6 ΠΈΡΠ»Ρ 2017 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π±Π»ΠΈΠ·ΠΎΡΡΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π’ΡΡΠ³ΠΎ ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ ΠΠΎΠΏΠ΅Ρ
2 ΠΈΡΠ½Ρ 2017 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΊΠ°ΡΡ
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΊΠ°ΡΡ
ΠΡΠΎΡΡΠΎ ΠΏΠΎΠΈΠ³ΡΠ°ΠΉΡΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² CSS ΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΠΉΠ» ΠΡΠ°ΠΌΠΌ
17 ΠΌΠ°Ρ 2017 Π³.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠ΅Π½Ρ Π ΡΡΡ
Π ΠΊΠΎΠ΄Π΅
Π Π°Π·ΠΌΡΡΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΈΡΡΡΠΉ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: CSS 3D Hover
CSS 3D Hover
Π§ΠΈΡΡΡΠΉ 3D-ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS Π΄Π»Ρ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡ
ΠΈΠ» Π‘Π°ΠΉ Π Π°ΠΌ
24 Π΄Π΅ΠΊΠ°Π±ΡΡ 2016 Π³.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΡΠΈΠ°Π½ ΠΠ½Π΄ΡΠ΅
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄Π½ΡΡΡΠ΅ Π±ΡΠΌΠ°ΠΆΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΠΊΠΈ
ΠΠΎΠ΄Π½ΡΡΡΠ΅ Π±ΡΠΌΠ°ΠΆΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΠΊΠΈ (ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ).
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: 10 ΡΡΠΈΠ»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ LESS
10 ΡΡΠΈΠ»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ LESS
ΠΠ΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Ρ LESS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½Π°Π½ΠΎΠΌ Π. ΠΡΠ°ΡΠΆΠΎ
13 ΠΎΠΊΡΡΠ±ΡΡ 2016 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: 10 ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SCSS
10 ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SCSS
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΡΡΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Ρ SCSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½Π°Π½ΠΎΠΌ Π. ΠΡΠ°ΡΠΆΠΎ
13 ΠΎΠΊΡΡΠ±ΡΡ 2016 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Ρ : Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Ρ : Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ
Π‘ΠΎΠ²Π΅Ρ: ΡΡΠΎΠ±Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΡΡΠΎΡ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΡΠΉ Π²ΠΈΠ΄, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ Π΄Π΅ΡΠ°Π»ΠΈ, Π΄Π»ΠΈΠ½Π° ΡΠ»ΠΎΠ²Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½Π° Π½ΠΎΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ ΡΠ΅Π»Π°.ΠΡΠ»ΠΈ Π΄Π»ΠΈΠ½Π° ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ π
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π°ΡΠ°ΡΠ»Π΅ΠΌ ΠΠΎΠ½ΡΠ°Π»Π΅ΡΠΎΠΌ
16 ΡΠ΅Π½ΡΡΠ±ΡΡ 2016 Π³.
Π ΠΊΠΎΠ΄Π΅
CSS Only Fade Siblings On Hover
Π‘ΠΊΡΡΡΡ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS.
ΠΠ²ΡΠΎΡ
- ΠΠΆΠ΅ΡΠ΅ΠΌΠΈ ΠΡΠ»Π΅
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Discover A Project Link
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Hover Squares
Hover Squares
HTML ΠΈ CSS ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π ΡΠ΄ΠΎΠ»ΡΡΠΎΠΌ Π²Π°Π½ Π΄Π΅Ρ ΠΠ΅Π½ΠΎΠΌ
8 Π΄Π΅ΠΊΠ°Π±ΡΡ 2015 Π³.
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΊΠΎΠ»Π° ΠΡΠ΅ΡΡ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ GIF: ΡΡΡΠ΅ΠΊΡ 3D-Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ 3D-Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
CSS ΠΈ Π±ΠΈΡΡ JS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΎΡΠ»Π΅ΠΌ ΠΠ΅Π»ΡΠ³Π°Π΄ΠΎ
30 ΠΎΠΊΡΡΠ±ΡΡ 2014 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ GIF: CSS3 Hover Effects
CSS3 Hover Effects
ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ tympanus.net, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π² honglio
21 Π½ΠΎΡΠ±ΡΡ 2013 Π³.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ GIF: ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ / ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΌΡΡΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΡΡΠΎΠΌ ΠΠΎΠ»Π΄ΡΠΎΠΌ
8 ΠΈΡΠ»Ρ 2013 Π³.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ
HTML ΠΈ CSS (5 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²).
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Hover.css
Hover.css
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ CSS3-ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ
ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ, SVG, ΠΈΠ·Π±ΡΠ°Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ΅Π³ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΠΊ ΡΠ²ΠΎΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΡΠΉΡΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π»Ρ Π²Π΄ΠΎΡ
Π½ΠΎΠ²Π΅Π½ΠΈΡ. ΠΠΎΡΡΡΠΏΠ΅Π½ Π² CSS, Sass ΠΈ LESS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π―Π½ΠΎΠΌ ΠΠ°Π½Π½ΠΎΠΌ
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: iHover.css
iHover.css
iHover - ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΡΠΎΠ³ΠΎ CSS, Π²Π΄ΠΎΡ
Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΡΠ°ΡΡΠ΅ΠΉ codrops, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ Π½Π° Sass.
Π‘Π΄Π΅Π»Π°Π½ΠΎ gudh
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Bootstrap ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΠΉΠΊΠ»ΠΎΠΌ
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Mocassin.css
Mocassin.css
Mocassin.css - ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Sass. ΠΠ°ΠΆΠ΄Π°Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ»ΠΈΡΠ·Π΅ΡΠΎΠΌ ΠΡΠΉΠΎΠ»ΡΡΠΎΠΌ
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: HoverEffects.