Web-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° β’ HTML ΠΈ CSS
ΠΠ½ΠΎΠΏΠΊΠ° β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² HTML-ΡΠΎΡΠΌΠ°Ρ
, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΡΡ
ΠΎΠΊΠ½Π°Ρ
, ΠΌΠ΅Π½Ρ ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ°ΡΡΡΡ
Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² btn
ΠΈ btn-default
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <a>
ΠΈΠ»ΠΈ <button>
.
ΠΠ½ΠΎΠΏΠΊΠΈ
<!-- ΡΠ΅ΠΌΠ° default --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° primary --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° success --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° info --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° warning --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° danger --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΡΠ΅ΠΌΠ° link --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ:
<!-- ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> <!-- ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
ΠΠ½ΠΎΠΏΠΊΠ°, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ°Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
<button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ:
<!-- ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± --> <div> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button> </div> <!-- ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± --> <button type="button">Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
ΠΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
<div role="group"> <button>ΠΠ΅ΡΠ²Π°Ρ</button> <button>ΠΡΠΎΡΠ°Ρ</button> <button>Π’ΡΠ΅ΡΡΡ</button> </div>
ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
<div role="toolbar"> <div role="group"> <button>ΠΠ΅ΡΠ²Π°Ρ</button> <button>ΠΡΠΎΡΠ°Ρ</button> <button>Π’ΡΠ΅ΡΡΡ</button> </div> <div role="group"> <button>Π§Π΅ΡΠ²Π΅ΡΡΠ°Ρ</button> <button>ΠΡΡΠ°Ρ</button> </div> <div role="group"> <button>Π¨Π΅ΡΡΠ°Ρ</button> </div> </div>
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π³ΡΡΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ:
<div role="group"> <button>ΠΠ΅ΡΠ²Π°Ρ</button> <button>ΠΡΠΎΡΠ°Ρ</button> <button>Π’ΡΠ΅ΡΡΡ</button> </div>
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Π²Π½ΡΡΡΠΈ Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
<div role="group" aria-label="ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ"> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <div role="group"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ <span></span> </button> <ul> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li role="separator"></li> <li><a href="#">ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ</a></li> </ul> </div> </div>
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
<div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ <span></span> </button> <ul> <li><a href="#">ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> <li><a href="#">ΠΡΠΎΡΠ°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> <li><a href="#">Π’ΡΠ΅ΡΡΡ ΡΡΡΠ»ΠΊΠ°</a></li> <li role="separator"></li> <li><a href="#">Π§Π΅ΡΠ²Π΅ΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> </ul> </div>
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Π΅ΠΌ:
<div> <button type="button">ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅</button> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span></span> <span>ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ</span> </button> <ul> <li><a href="#">ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> <li><a href="#">ΠΡΠΎΡΠ°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> <li><a href="#">Π’ΡΠ΅ΡΡΡ ΡΡΡΠ»ΠΊΠ°</a></li> <li role="separator"></li> <li><a href="#">Π§Π΅ΡΠ²Π΅ΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ°</a></li> </ul> </div>
Π Π°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
<!-- ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ --> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span> </button> <ul> . .... </ul> </div> <!-- ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ --> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span> </button> <ul> ..... </ul> </div> <!-- ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ --> <div> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span> </button> <ul> ..... </ul> </div>
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΉ Π°ΡΡΠΈΠ±ΡΡ data-toggle="button"
. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.
<button type="button" data-toggle="button" aria-pressed="false"> ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ </button> <a href="#" data-toggle="button" aria-pressed="false" role="button"> ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ </a>
ΠΡΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΡΠΎ ΠΊ Π½Π΅ΠΉ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ active
ΠΈ aria-pressed="true"
.
ΠΠ½ΠΎΠΏΠΊΠΈ checkbox ΠΈ radio
Π‘ΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ label
, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ checkbox
ΠΈΠ»ΠΈ radio
-ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<div data-toggle="buttons"> <label> <!-- ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ checkbox --> <input type="checkbox" name="options[]" value="first" checked> ΠΠ΅ΡΠ²ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> <label> <input type="checkbox" name="options[]" value="second"> ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> <label> <input type="checkbox" name="options[]" value="third"> Π’ΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> </div>
<div data-toggle="buttons"> <label> <input type="radio" name="option" value="first"> ΠΠ΅ΡΠ²ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> <label> <input type="radio" name="option" value="second"> ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> <label> <!-- ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½Π°Ρ radio-ΠΊΠ½ΠΎΠΏΠΊΠ° --> <input type="radio" name="option" value="third" checked> Π’ΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ </label> </div>
ΠΠΎΠΈΡΠΊ: CSS β’ HTML β’ Web-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° β’ ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ β’ ΠΠ½ΠΎΠΏΠΊΠ° β’ ΠΡΡΠΏΠΏΠ° β’ Button β’ ΠΠ΅ΡΡΡΠΊΠ° β’ Bootstrap β’ Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ
ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΊΠ»ΠΈΠΊΠ°
Π£ Π²Π°Ρ Π±ΡΠ²Π°Π»ΠΎ ΡΠ°ΠΊΠΎΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π» Π½Π° ΠΊΠ»ΠΈΠΊ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π½Π°ΠΆΠΌΡΡΠ΅ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡΡ?
ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ»ΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π½Π΅ Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ. Π§ΡΠΎΠ±Ρ ΡΡΠ°Π»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½ΠΈΠΆΠ΅ β Π½Π° Π½Π΅ΠΉ Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ°:
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅, ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ UX, Π° Π² ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
UX-ΡΠ΅ΡΠ΅Π½ΠΈΡ
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ WCAG
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ WCAG 2.1 (ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ web-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°), ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΡΠ°Ρ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ 44Γ44 CSS ΠΏΠΈΠΊΡΠ΅Π»Ρ. Π Π°Π·ΠΌΠ΅Ρ Π½Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ Π·Π° ΠΎΡΠ½ΠΎΠ²Ρ.
ΠΠ°ΠΊΠΎΠ½ Π€ΠΈΡΡΡΠ°
ΠΡΠΎ Π·Π°ΠΊΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΈΠ·ΠΈΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π°ΠΊΡΠΈΠΉ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ UX. ΠΡΠ»ΠΈ Π½Π΅ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ, Π΅Π³ΠΎ ΡΠΌΡΡΠ» Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΡΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΌΡΡ Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΈ ΠΎΡΠ΄Π°Π»ΡΠ½Π½ΡΠΉ.
ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠ΅Π½ΡΡΠ΅ ΠΈ Π΄Π°Π»ΡΡΠ΅ ΠΎΡ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°, ΡΠ΅ΠΌ ΡΠΏΡΠ°Π²Π°, β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π½Π΅ΠΉ. Π‘ ΠΏΡΠ°Π²ΠΎΠΉ ΠΆΠ΅ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΠΎΠ»ΡΡΠ°Ρ ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π±ΡΡΡΡΠΎ ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π² ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ WCAG 2.5.5 ΠΈ Π·Π°ΠΊΠΎΠ½ Π€ΠΈΡΡΡΠ°.
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <button>
. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ Π½Π° ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-Π±Π°Π½ΠΊΠΈΠ½Π³Π°:
<div>Next</div>
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ°:
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΠ½ Π²ΡΡ Π΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ, ΠΈ ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ, ΡΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΡΡΡΠΎΡ. Π’Π°ΠΊΠΎΠ³ΠΎ Π½Π΅ ΡΠ»ΡΡΠΈΡΡΡ, Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <button>
, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΌΠΎΠΆΠ΅Ρ:
- Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ;
- Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΡΠΈ, ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π½ΠΈΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π±Π΅Π· JavaScript.
ΠΠ½ΠΎΠΏΠΊΠ°ΠΌ Π½ΡΠΆΠ½Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, ΠΈ Π²ΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ:
- ΡΠ΅ΠΊΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Β«ΡΠ΅ΡΠ½ΠΎΒ»;
- Π±ΠΎΠ»ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΎΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ (ΠΠ°ΠΊΠΎΠ½ Π€ΠΈΡΡΡΠ°).
Π‘ΡΡΠ»ΠΊΠΈ
ΠΡΠ° ΠΎΡΠΈΠ±ΠΊΠ° Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ. ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π²Π°ΠΌΠΈ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, padding
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <a>
, Π° Π½Π΅ <li>
.
<nav> <ul> <li><a href="#">Home</a></li> <li><nav href="#">Products</nav></li> <li><a href="#">Store</a></li> <li><a href="#">Team</a></li> </ul> </nav>
.nav-item { padding: 12px 16px; }
Π‘ ΡΠ°ΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ΅ΠΊΡΡ:
Π§ΡΠΎΠ±Ρ ΡΡΠΎΠ³ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ padding ΠΊ ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ block
, inline-element
ΠΈΠ»ΠΈ flex
.
.nav-item a { display: block; padding: 12px 16px; }
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΡΠ°Π½Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½Π° Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ°:
ΠΠ°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ
Π£ Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΎΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΠ±Π»Π°ΡΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ:
ΠΠΎΠΏΠ°ΡΡΡ ΠΏΠ°Π»ΡΡΠ΅ΠΌ Π² ΡΠ°ΠΊΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΠΎ Π΅ΡΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ, ΡΠΎ Π²ΡΡ ΡΡΠ°Π½Π΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΎΡΠ΅:
ΠΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π² ΡΡΠΎΠΌ Π΄Π΅ΠΌΠΎ.
Π§Π΅ΠΊΠ±ΠΎΠΊΡΡ ΠΈ ΡΠ°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΡΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΆΠ°ΡΡ Π½Π° Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ Π½ΠΈΠΌ ΡΠ΅ΠΊΡΡ.
ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ° ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΡΠ΅ΠΊΡΡ Π½ΠΈ ΠΊ ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ:
ΠΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ, Π΅ΡΠ»ΠΈ Π² HTML ΡΠ²ΡΠ·Π°ΡΡ label ΠΈ input, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ for
:
<input type="checkbox"> <label for="option1">Option 1</label>
ΠΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ input Π²Π½ΡΡΡΡ label:
<label for="option1"> Option 1 <input type="checkbox"> </label>
ΠΠΎΡΠ»Π΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ padding Π΄Π»Ρ <label>
, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ° ΡΡΠ°Π»Π° Π±ΠΎΠ»ΡΡΠ΅:
Π‘Π°ΠΉΠ΄Π±Π°Ρ
Π§Π°ΡΡΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ»ΠΎΠΊ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ°. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅:
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ, Π½ΡΠΆΠ½ΠΎ:
- Π£Π΄Π°Π»ΠΈΡΡ ΠΎΡΡΡΡΠΏ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
<li>
ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ<a>
, ΠΊΠ°ΠΊ Π² ΠΏΡΠ½ΠΊΡΠ΅ Β«Π‘ΡΡΠ»ΠΊΠΈΒ». - ΠΠΎΠ±Π°Π²ΠΈΡΡ
display: block
.
.nav-item a { /*Other styles*/ padding: 12px 16px; display: block; }
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΏΠΎΠ»ΡΡΠΈΠΌ:
ΠΡΠΈΠΌΠ΅ΡΡ
Π Π½Π΅Π΄Π°Π²Π½Π΅ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Π’Π²ΠΈΡΡΠ΅ΡΠ° ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΡΠ²ΡΠ·Π°Π½Π½Π°Ρ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ½Π° Π±ΡΠ»Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π½ΠΈΠΆΠ΅, Π½ΠΎ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ Π΅Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΠ»ΠΈ:
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°Π·Π΄Π΅Π»Π°
Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠΊΠ°Π·Π°ΡΡ Π΅ΡΡΒ» ΠΈΠ»ΠΈ ΡΡΡΠ΅Π»ΠΊΡ Π½Π° ΠΊΡΠ°Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠ°Π·Π΄Π΅Π»Π°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΡΡΠ΅Π»ΠΊΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΈ Π² ΠΈΡΠΊΡΡΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΡΡΠ³, ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Ρ.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π²ΠΎΠΊΡΡΠ³ ΡΡΡΠ΅Π»ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄Π΅Π»Π°Π½ Π² CSS, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° padding ΠΈΠ»ΠΈ width ΠΈ height.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΊΠ»ΠΈΠΊΠ°
ΠΠ΅ Π²ΡΠ΅Π³Π΄Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ Π·ΠΎΠ½Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΎΡΡΠΎ Π·Π° ΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΠ°. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ?
ΠΠ΄Π΅Ρ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΎΠ·Π΄Π°ΡΠΌ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ°/ΠΊΠ°ΡΠ°Π½ΠΈΡ/Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :after
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠ΅Π½Ρ:
.menu-2:after { content: ""; position: absolute; left: 55px; top: 0; width: 50px; height: 50px; background: #e83474; /*Other styles*/ }
ΠΠ²Π°Π΄ΡΠ°Ρ 55px
ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π³ΠΈΡΠΊΡ Π½ΠΈΠΆΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄Π΅ΠΌΠΎ Π½Π° Codepen.
ΠΡΠΈΠΌΠ΅Ρ Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
ΠΠ΅Π΄Π°Π²Π½ΠΎ ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ: ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ Π½Π°ΠΆΠ°ΡΡ Π½Π° Π»Π°ΠΉΠΊ Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° ΡΡΠ°ΡΡΡ. Π Π°Π·ΠΎΠ±ΡΠ°Π²ΡΠΈΡΡ Π² Π²ΠΎΠΏΡΠΎΡΠ΅, ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ, ΡΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ° Π½Π° touchscreen 48Γ48 dp. ΠΠ½Π°ΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠ°ΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ .
Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π½ΡΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΠΊΠ»ΠΈΠΊΠ° Π·Π° ΡΡΡΡ ΠΏΠ°Π΄Π΄ΠΈΠ½Π³ΠΎΠ², Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’.Π΅. Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠ°Π΄Π΄ΠΈΠ½Π³ ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠ°ΡΠ³ΠΈΠ½, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ.
Π‘Π΅ΠΉΡΠ°Ρ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΡΠΆΠ½ΠΎ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡΡΠ°Π»Π°ΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠ΅ΡΡΠ΅, Π½ΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ°/ΡΠ°ΠΏΠ° ΡΡΠ°Π»Π° Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ Π²Π°ΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π°ΡΡΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π»ΠΈΡΡ.
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π»Ρ Π»Π°ΠΉΠΊΠΎΠ² (Π½Π΅ ΡΠ°ΠΌΡΠΉ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ, Π½ΠΎ ΡΠ°Π±ΠΎΡΠΈΠΉ)
.post-votes { margin: 0 5px; } .svelte-15n67pa { padding: 9px; margin: -9px; } /* ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π²Π΅ΡΡ /Π²Π½ΠΈΠ· */
ΠΡΡ ΠΊΡΡΡΠ΅ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠΎΠ΄ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π΄Π»Ρ Π»Π΅Π²ΠΎΠΉ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΠΎ):
padding: 14px 14px 14px 7px; margin: -14px -14px -14px -7px;
ΠΠ΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«Enhancing The Clickable Area SizeΒ»
Javascript ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ β’ ΠΡΠ±-ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΠ° Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΠ΅Π»Π΅ΠΉ!
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
- 1 ΠΠΎΠ²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ
- 2 ΠΡΡΠΈΠ±ΡΡ onclick
- 3 ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ
- 3. 1 ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° HTML
- 3.2 ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° DOM-ΠΎΠ±ΡΠ΅ΠΊΡΠ°
- 4 ΠΠΎΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· this
- 5 Π§Π°ΡΡΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ
- 6 addEventListener
- 7 ΠΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ
- 8 ΠΠ±ΡΠ΅ΠΊΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ: handleEvent
- 9 ΠΡΠΎΠ³ΠΎ
- 10 ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ
- 10.1 Π‘ΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΠ·Π»Ρ DOM
- 10.2 ΠΠ±ΡΠ΅ΠΊΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ
- 10.3 Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅
- 10.4 ΠΠ΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
- 10.5 Π‘ΠΎΠ±ΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ
- 10.6 ΠΠ»ΠΈΠΊΠΈ ΠΌΡΡΠΈ
- 10.7 ΠΠ²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ
- 10.8 Π‘ΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
- 10.9 Π‘ΠΎΠ±ΡΡΠΈΡ ΡΠΎΠΊΡΡΠ° Π²Π²ΠΎΠ΄Π°
- 10.10 Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- 10.11 ΠΡΠΎΠ±Π»Π΅Π½ΠΈΠ΅
- 10.12 ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
- 10.13 Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΊ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠΎΡΠΌΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript.
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡΠΎΡΡΠ΅ΠΉΡΡΡ ΡΠΎΡΠΌΡ.
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ. ΠΠΎΠ»ΡΡΠΈΠΌ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΠ°Π»Π΅Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΡΠ°Π»ΠΎΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅.
ΠΠ΄ΡΠΌ Π΄Π°Π»ΡΡΠ΅. ΠΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ, Π²Π²Π΅Π΄ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΠΏΠΎΠ»Π΅. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π²ΠΎΠ΄ΠΈΡ ΡΠ΅ΠΊΡΡ, ΡΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° input type=Β»textΒ» Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ value ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ ΠΈΠΌΡ ΠΊΠΎΡΠ°. ΠΠ΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ°, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π±ΡΠ» Π²Π²Π΅Π΄ΡΠ½.
Π’ΡΠ΅ΡΠΈΠΉ ΡΠ°Π³ β Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠΎΡΠΎΠ² Π½Π° ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡ ΡΠΆΠ΅ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ ul, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π½Π°ΠΊΠΎΠΌΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ getElementById(). ΠΠ»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ document.createElement(). ΠΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΠΏΠΈΡΠ°Π² ΡΠ΅ΠΊΡΡ. ΠΠ»Ρ ΡΠ΅ΠΊΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠΌΡ ΠΊΠΎΡΠ°. Π‘ΠΎΠ·Π΄Π°Π² Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· appendChild().
ΠΠΎΠ²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ΄. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ const Π²ΠΌΠ΅ΡΡΠΎ var, Π²ΠΌΠ΅ΡΡΠΎ onclick β addEventListener.
Π’Π°ΠΊΠΆΠ΅ Π²ΠΌΠ΅ΡΡΠΎ getElementById() ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ querySelector(). Π Π² addEventListener ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΡΡΠΈΠ±ΡΡ onclick
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ onclick.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ β ΡΡΠΎ ΡΠΈΠ³Π½Π°Π» ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ. ΠΡΠ΅ DOM-ΡΠ·Π»Ρ ΠΏΠΎΠ΄Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠΈΠ³Π½Π°Π»Ρ (Ρ ΠΎΡΡ ΡΠΎΠ±ΡΡΠΈΡ Π±ΡΠ²Π°ΡΡ ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² DOM).
ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ°ΠΌΡΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ DOM-ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΏΠΎΠΊΠ° ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ:
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΡΡΠΈ:
- click β ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»ΠΈΠΊΠ½ΡΠ»ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ (Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ ΠΎΠ½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΈ ΠΊΠ°ΡΠ°Π½ΠΈΠΈ).
- contextmenu β ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»ΠΈΠΊΠ½ΡΠ»ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ.
- mouseover / mouseout β ΠΊΠΎΠ³Π΄Π° ΠΌΡΡΡ Π½Π°Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π° / ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
- mousedown / mouseup β ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΆΠ°Π»ΠΈ / ΠΎΡΠΆΠ°Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.
- mousemove β ΠΏΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΌΡΡΠΈ.
Π‘ΠΎΠ±ΡΡΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ:
- submit β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΈΠ» ΡΠΎΡΠΌΡ .
- focus β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° .
ΠΠ»Π°Π²ΠΈΠ°ΡΡΡΠ½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ:
- keydown ΠΈ keyup β ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ / ΠΎΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ.
Π‘ΠΎΠ±ΡΡΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
- DOMContentLoaded β ΠΊΠΎΠ³Π΄Π° HTML Π·Π°Π³ΡΡΠΆΠ΅Π½ ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½, DOM Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ ΠΈ Π΄ΠΎΡΡΡΠΏΠ΅Π½.
CSS events:
- transitionend β ΠΊΠΎΠ³Π΄Π° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°Π²Π΅ΡΡΠ΅Π½Π°.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΠΈΡ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π³Π»Π°Π²Π°Ρ .
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΡΠΎ Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
ΠΠΌΠ΅Π½Π½ΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ JavaScript-ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. Π‘Π΅ΠΉΡΠ°Ρ ΠΌΡ ΠΈΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° HTML
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ ΠΏΡΡΠΌΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅, Π² Π°ΡΡΠΈΠ±ΡΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ on .
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ click Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ input , ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ onclick , Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΡΡΠΊΠΎΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡ ΠΊΠΎΠ΄, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ onclick .
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° onclick ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΡΠ΅ ΠΊΠ°Π²ΡΡΠΊΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΠΌ Π°ΡΡΠΈΠ±ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄Π²ΠΎΠΉΠ½ΡΡ . ΠΡΠ»ΠΈ ΠΌΡ Π·Π°Π±ΡΠ΄Π΅ΠΌ ΠΎΠ± ΡΡΠΎΠΌ ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π΄Π²ΠΎΠΉΠ½ΡΠ΅ ΠΊΠ°Π²ΡΡΠΊΠΈ Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°, Π²ΠΎΡ ΡΠ°ΠΊ:Click!Β»)Β» , ΠΊΠΎΠ΄ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΡΡΠΈΠ±ΡΡ HTML-ΡΠ΅Π³Π° β Π½Π΅ ΡΠ°ΠΌΠΎΠ΅ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠ΄Π°, ΠΏΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ JavaScript-ΡΡΠ½ΠΊΡΠΈΡ ΠΈ Π²ΡΠ·Π²Π°ΡΡ Π΅Ρ ΡΠ°ΠΌ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ countRabbits() :
ΠΠ°ΠΊ ΠΌΡ ΠΏΠΎΠΌΠ½ΠΈΠΌ, Π°ΡΡΠΈΠ±ΡΡ HTML-ΡΠ΅Π³Π° Π½Π΅ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ ΠΊ ΡΠ΅Π³ΠΈΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ONCLICK Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ onClick ΠΈ onCLICK β¦ ΠΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π°ΡΡΠΈΠ±ΡΡΡ ΠΏΠΈΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅: onclick .
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° DOM-ΠΎΠ±ΡΠ΅ΠΊΡΠ°
ΠΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° on .
Π ΠΏΡΠΈΠΌΠ΅ΡΡ, elem.onclick :
ΠΡΠ»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π·Π°Π΄Π°Π½ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΈΡΠ°Π΅Ρ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ· ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΈ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ±, ΠΏΠΎ ΡΡΡΠΈ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ.
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ΅Π³Π΄Π° Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ DOM-ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π° Π°ΡΡΠΈΠ±ΡΡ β Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΅Π³ΠΎ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΡΠΈ Π΄Π²Π° ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΊΠΎΠ΄Π° ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ:
Π’Π°ΠΊ ΠΊΠ°ΠΊ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° DOM ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ onclick , ΡΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠ°ΠΊ Π½Π΅Π»ΡΠ·Ρ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· JavaScript ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ°:
ΠΡΡΠ°ΡΠΈ, ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΈ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ:
Π£Π±ΡΠ°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ elem.onclick = null .
ΠΠΎΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· this
ΠΠ½ΡΡΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΡ this ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎ Π΅ΡΡΡ Π½Π° ΡΠΎΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ, ΠΊΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΡΡ, Β«Π²ΠΈΡΠΈΡΒ» (Ρ. Π΅. Π½Π°Π·Π½Π°ΡΠ΅Π½) ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Π ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ button Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ²ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ this.innerHTML :
Π§Π°ΡΡΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠΎΠ±ΡΡΠΈΡΠΌΠΈ, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ.
Π€ΡΠ½ΠΊΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Π° ΠΊΠ°ΠΊ sayThanks , Π° Π½Π΅ sayThanks() .
ΠΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΊΠΎΠ±ΠΊΠΈ, ΡΠΎ sayThanks() β ΡΡΠΎ ΡΠΆΠ΅ Π²ΡΠ·ΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ (ΡΠ°Π²Π½ΡΠΉ undefined , ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ½ΠΊΡΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ) Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ onclick . Π’Π°ΠΊ ΡΡΠΎ ΡΡΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
β¦Π Π²ΠΎΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠΊΠΎΠ±ΠΊΠΈ Π½ΡΠΆΠ½Ρ:
ΠΡΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ. ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ°, ΠΎΠ½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ Ρ ΡΠ΅Π»ΠΎΠΌ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ°: sayThanks() .
Π’Π°ΠΊ ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ:
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ, Π° Π½Π΅ ΡΡΡΠΎΠΊΠΈ.
ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΡΡΠΎΠΊΠΎΠΉ elem.onclick = Β«alert(1)Β» ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ ΠΈΠ· ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ, Π½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ.
ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ setAttribute Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
Π’Π°ΠΊΠΎΠΉ Π²ΡΠ·ΠΎΠ² ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ:
Π Π΅Π³ΠΈΡΡΡ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ elem.onclick , Π° Π½Π΅ elem.ONCLICK , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ ΠΊ ΡΠ΅Π³ΠΈΡΡΡΡ.
addEventListener
Π€ΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π²ΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° β- Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ΄Π½Π° ΡΠ°ΡΡΡ ΠΊΠΎΠ΄Π° Ρ ΠΎΡΠ΅Ρ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π΅Π»Π°ΡΡ Π΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΠΉ, Π° Π΄ΡΡΠ³Π°Ρ β Π²ΡΠ΄Π°Π²Π°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅.
ΠΡ Ρ ΠΎΡΠΈΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π΄Π²Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ. ΠΠΎ Π½ΠΎΠ²ΠΎΠ΅ DOM-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ΅Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π΅:
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠ² Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ ΡΡΠΎ ΠΏΠΎΠ½ΡΠ»ΠΈ ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² addEventListener ΠΈ removeEventListener . ΠΠ½ΠΈ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Ρ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°:
ΠΠ»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ removeEventListener :
ΠΠ»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡ ΡΡΠ½ΠΊΡΠΈΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ»Π° Π½Π°Π·Π½Π°ΡΠ΅Π½Π°.
ΠΠΎΡ ΡΠ°ΠΊ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»ΡΠ½, Ρ.ΠΊ. Π² removeEventListener ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π° Π½Π΅ ΡΠ° ΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΡ, Π° Π΄ΡΡΠ³Π°Ρ, Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π½ΠΎ ΡΡΠΎ Π½Π΅ Π²Π°ΠΆΠ½ΠΎ.
ΠΠΎΡ ΡΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ:
ΠΠ±ΡΠ°ΡΠΈΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ β Π΅ΡΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ, ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ Π΅Ρ ΡΠ΄Π°Π»ΠΈΡΡ. ΠΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ ΡΠ΅ΡΠ΅Π· addEventListener .
ΠΠ΅ΡΠΎΠ΄ addEventListener ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΡΡΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΠ΅ΡΠ΅Π· DOM-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈ ΡΠ΅ΡΠ΅Π· addEventListener . ΠΠ΄Π½Π°ΠΊΠΎ, Π²ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΠΏΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ±.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π»ΡΠ·Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠ΅ΡΠ΅Π· DOM-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠ΅Π· addEventListener .
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊΠΎΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ transitionend , ΡΠΎ Π΅ΡΡΡ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ, Π·Π°ΠΏΡΡΡΠΈΠ² ΠΊΠΎΠ΄ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅. Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΠΈΡΡ Π²ΡΠΎΡΠΎΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π½ΠΎ Π½Π΅ ΠΏΠ΅ΡΠ²ΡΠΉ.
ΠΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ
Π§ΡΠΎΠ±Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ. ΠΠ΅ ΠΏΡΠΎΡΡΠΎ Β«ΠΊΠ»ΠΈΠΊΒ» ΠΈΠ»ΠΈ Β«Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈΒ», Π° ΡΠ°ΠΊΠΆΠ΅ β ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ, ΠΊΠ°ΠΊΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΠ° Π½Π°ΠΆΠ°ΡΠ° ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ, Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅Ρ Π² Π½Π΅Π³ΠΎ Π΄Π΅ΡΠ°Π»ΠΈ ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΡΡΠ½ΠΊΡΠΈΠΈ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ.
ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΌΡΡΠΈ ΠΈΠ· ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎΠ±ΡΡΠΈΡ:
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ° event :
event.type Π’ΠΈΠΏ ΡΠΎΠ±ΡΡΠΈΡ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Β«clickΒ» . event.currentTarget ΠΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠ°Π±ΠΎΡΠ°Π» ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ β ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρ this , Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ-ΡΡΡΠ΅Π»ΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ bind ΠΏΡΠΈΠ²ΡΠ·Π°Π½ Π΄ΡΡΠ³ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ this , ΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· event.currentTarget . event.clientX / event.clientY ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΊΡΡΡΠΎΡΠ° Π² ΠΌΠΎΠΌΠ΅Π½Ρ ΠΊΠ»ΠΈΠΊΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π°, Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΡΡΠΈ.
ΠΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°Π·Π±Π΅ΡΡΠΌ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΡ Π³Π»Π°Π²Π°Ρ .
ΠΡΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π² HTML, ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ event , Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΡΠΎ ΠΎΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ: function(event) < alert(event.type) >. Π’ΠΎ Π΅ΡΡΡ, Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«eventΒ» , Π° ΡΠ΅Π»ΠΎ Π²Π·ΡΡΠΎ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ°.
ΠΠ±ΡΠ΅ΠΊΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ: handleEvent
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ½ΠΊΡΠΈΡ, Π½ΠΎ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ addEventListener . Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅, Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΠ±ΡΠ΅ΠΊΡΠ° handleEvent .
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, Π΅ΡΠ»ΠΈ addEventListener ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΠΎΠ½ Π²ΡΠ·ΡΠ²Π°Π΅Ρ object.handleEvent(event) , ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ:
ΠΠ΄Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΎΠ±Π° ΡΠΎΠ±ΡΡΠΈΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²Π½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΠ±Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠ΅ΡΠ΅Π· addEventListener . Π’ΠΎΠ³Π΄Π° ΠΎΠ±ΡΠ΅ΠΊΡ menu Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ mousedown ΠΈ mouseup , Π½ΠΎ Π½Π΅ Π΄ΡΡΠ³ΠΈΠ΅ (Π½Π΅ Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅) ΡΠΈΠΏΡ ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΠ΅ΡΠΎΠ΄ handleEvent Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π²ΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΌ. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ, Π²ΠΎΡ ΡΠ°ΠΊ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π° ΠΏΠΎ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌ, ΡΡΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠΎΠ΄Π°.
ΠΡΠΎΠ³ΠΎ
ΠΡΡΡ ΡΡΠΈ ΡΠΏΠΎΡΠΎΠ±Π° Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ:
- ΠΡΡΠΈΠ±ΡΡ HTML: .
- DOM-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ: elem.onclick = function .
- Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ: elem.addEventListener(event, handler[, phase]) Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ, removeEventListener Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ.
HTML-Π°ΡΡΠΈΠ±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ΅Π΄ΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ JavaScript Π² HTML-ΡΠ΅Π³Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π½ΠΎ. Π ΡΠΎΠΌΡ ΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ°ΠΌ Π½Π΅ Π½Π°ΠΏΠΈΡΠ΅ΡΡ.
DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½ΠΎ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π½Π° ΠΎΠ΄ΠΈΠ½ ΡΠΈΠΏ ΡΠΎΠ±ΡΡΠΈΡ. ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΈΡΠΈΡΡΡΡ.
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°ΠΌΡΠΉ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π· Π½Π΅Π³ΠΎ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ transtionend ΠΈ DOMContentLoaded . Π’Π°ΠΊΠΆΠ΅ addEventListener ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΠ±ΡΠ΅ΠΊΡΠ° handleEvent .
ΠΠ΅ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ β ΠΎΠ½ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΠ΅ΡΠ²ΡΠΌ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠΌ. ΠΡΠΎΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
ΠΡ ΠΈΠ·ΡΡΠΈΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΎΠ±ΡΡΠΈΡΡ ΠΈ ΠΈΡ ΡΠΈΠΏΠ°Ρ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π³Π»Π°Π²Π°Ρ .
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ JavaScript event ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°ΠΏΡΡΠΌΡΡ Ρ Π²Π²ΠΎΠ΄ΠΈΠΌΡΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π΄Π°Π½Π½ΡΠΌΠΈ. ΠΠΎΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΠΈ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ°ΠΊΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·Π°Π½Ρ Π·Π°ΡΠ°Π½Π΅Π΅.
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ
Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΠΈΡΡΠ²Π°Ρ Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΉΠΌΠ°ΡΡ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΎΠ½Π° ΡΠ½ΠΎΠ²Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΏΡΡΠ΅Π½Π°.
ΠΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π»ΡΡ Π²Π²ΠΎΠ΄ Π΄Π°Π½Π½ΡΡ Π½Π° ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΡΠΈΠ½Π°Ρ . ΠΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π½ΠΎΠ²ΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠ°ΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡ. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π΅ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΈ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ°ΡΡΠΎ.
Π ΠΏΠ΅ΡΠΈΠΎΠ΄ ΠΎΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΈ Π΄ΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ, ΠΎΠ½Π° ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π½Π° Π·Π°ΠΏΡΠΎΡΡ. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ ( ΠΎΠΏΡΠΎΡΠΎΠΌ ).
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ² ΡΡΠ°ΡΠ°ΡΡΡΡ ΠΈΠ·Π±Π΅Π³Π°ΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
Π‘Π°ΠΌΡΠΌ Π»ΡΡΡΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΈΡΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π°Π΅Ρ ΠΊΠΎΠ΄Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ. ΠΡΠ°ΡΠ·Π΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ Π΅Π΅, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ JavaScript event :
Π€ΡΠ½ΠΊΡΠΈΡ addEventListener ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ Π΅Π΅ Π²ΡΠΎΡΠΎΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠ΅ΡΠ²ΡΠΌ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠΌ.
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΠ·Π»Ρ DOM
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅. ΠΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΡΡΠ½ΠΊΡΠΈΠΈ addEventListener ΠΎΠ½Π° Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ΅Π½ ΠΎΠ±ΡΠ΅ΠΊΡΡ window . ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ DOM ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ addEventListener , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅:
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ ΠΊ ΡΠ·Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. JavaScript mouse events ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π° ΠΊΠ»ΠΈΠΊ Π² ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° β Π½Π΅Ρ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ·Π»Π° Π°ΡΡΠΈΠ±ΡΡ onclick , ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠΎΡ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. ΠΠΎ ΡΠ·Π΅Π» ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π°ΡΡΠΈΠ±ΡΡ onclick , ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ·Π»Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΠ΅ΡΠΎΠ΄ addEventListener ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π’Π°ΠΊ ΠΌΡ Π·Π°ΡΡΡΠ°Ρ ΠΎΠ²Π°Π½Ρ ΠΎΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠΉ Π·Π°ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΆΠ΅ Π±ΡΠ» Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½.
ΠΠ΅ΡΠΎΠ΄ removeEventListener , Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Ρ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌΠΈ addEventListener . ΠΠ½ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ:
Π§ΡΠΎΠ±Ρ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ Π΄Π»Ρ Π½Π΅Π΅ ΠΈΠΌΡ ( Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, once ). Π’Π°ΠΊ ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΠΌ Π΅Π΅ ΠΊΠ°ΠΊ Π² addEventListener , ΡΠ°ΠΊ ΠΈ Π² removeEventListener .
ΠΠ±ΡΠ΅ΠΊΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ
Π₯ΠΎΡΡ ΠΌΡ Π½Π΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ , Π² ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² JavaScript event ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ: ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠΎΠ±ΡΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ°, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎΠ±ΡΡΠΈΡ which :
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Ρ ΡΠ°Π½ΡΡΠ°ΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅, ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΡΠΎΠ±ΡΡΠΈΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° type Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠΎΠΊΡ, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΡΡΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β« click Β» ΠΈΠ»ΠΈ Β« mousedown Β«).
Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ( Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, JavaScript touch events ), Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ·Π»ΠΎΠ², ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π² Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ . ΠΡΠ»ΠΈ Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ°ΡΡΡ Π²Π½ΡΡΡΠΈ Π°Π±Π·Π°ΡΠ°, ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ Π°Π±Π·Π°ΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ click .
Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ ΠΎΡ ΡΠ·Π»Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ·Π΅Π» ΠΈ Π² ΠΊΠΎΡΠ΅Π½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ·Π»Π΅, Π²ΡΡΡΠΏΠΈΠ»ΠΈ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°.
Π Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎΠ±ΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ stopPropagation , ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π΄Π°Π»ΡΡΠ΅. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ° ΠΌΡΡΡΡ ΠΏΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Β« MouseDown Β» ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ Π°Π±Π·Π°ΡΠ°. ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ ( JavaScript mouse events ) ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄ stopPropagation , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ Π·Π°ΠΏΡΡΠΊ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π°Π±Π·Π°ΡΠ°. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ ΠΌΡΡΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΎΠ±Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°:
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ target , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠ·Π΅Π», Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π²Π²Π΅ΡΡ ΠΈΠ· ΡΠ·Π»Π°.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript event target , ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠΎΠ±ΡΡΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ·Π΅Π», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΊΠ»ΠΈΠΊΠ° Π΄Π»Ρ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠ·Π»Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ target , ΡΡΠΎΠ±Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ, Π±ΡΠ»Π° Π»ΠΈ Π½Π°ΠΆΠ°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° Π½Π΅ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
ΠΠ΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Π‘ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ ΡΠΎΠ±ΡΡΠΈΡΠΌΠΈ ΡΠ²ΡΠ·Π°Π½Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΡΠ»ΠΊΡ, ΡΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΡΠ΅ ΠΊ ΡΠ΅Π»Π΅Π²ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ»ΠΈ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΡΡΡΠ΅Π»ΠΊΡ Π²Π½ΠΈΠ·, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·. ΠΡΠ»ΠΈ Π²Ρ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ ΠΌΡΡΠΈ, ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΈΠΏΠΎΠ² ΡΠΎΠ±ΡΡΠΈΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ JavaScript event Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Π΄ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ»ΠΎΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½ΡΠΆΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎΠ±ΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ preventDefault .
ΠΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ ΠΌΠ΅Π½Ρ. ΠΠ»ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΡΡΠ»ΠΊΠ°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π΅Π»ΡΠ·Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ:
Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π½Π° ΡΡΠΎ Π²Π΅ΡΠΊΠΈΡ ΠΏΡΠΈΡΠΈΠ½.
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Ρ Π²Π°ΡΠ΅Π½Ρ. Π Google Chrome , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ ( event keycode JavaScript ) Π΄Π»Ρ Π·Π°ΠΊΡΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ( Ctrl-W ΠΈΠ»ΠΈ Command-W ) Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript .
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« keydown Β«. ΠΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ, ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« keyup Β«:
Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ, ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ° ΠΊΠ»Π°Π²ΠΈΡΠ° ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΡΠΎΠ½Π°ΠΆΠ° Π² ΠΈΠ³ΡΠ΅, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ»Π°Π²ΠΈΡΡ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ, ΠΈ ΡΠ½ΠΎΠ²Π° ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π΅Π΅, ΠΎΡΠΏΡΡΡΠΈΠ² ΠΊΠ»Π°Π²ΠΈΡΡ, ΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ Π½Π΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΏΠΎΠΊΠ° ΠΊΠ»Π°Π²ΠΈΡΠ° Π½Π°ΠΆΠ°ΡΠ°.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° event keycode JavaScript . Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊΠ°Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ»Π°Π²ΠΈΡΠ° Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ° ΠΈΠ»ΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π°. ΠΠΎΠ½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅.
ΠΠ»Ρ ΡΡΠΈΡΡΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ Π±ΡΠΊΠ² ΠΈ ΡΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠ΄ ΡΠΈΠΌΠ²ΠΎΠ»Π° Unicode . ΠΠ½ ΡΠ²ΡΠ·Π°Π½ Ρ Π±ΡΠΊΠ²ΠΎΠΉ ( Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ΅ ) ΠΈΠ»ΠΈ ΡΠΈΡΡΠΎΠΉ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΠΎΠΉ Π½Π° ΠΊΠ»Π°Π²ΠΈΡΠ΅. ΠΠ΅ΡΠΎΠ΄ charCodeAt Π΄Π»Ρ ΡΡΡΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅:
Π‘ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ ΡΠ²ΡΠ·Π°Π½Ρ ΠΌΠ΅Π½Π΅Π΅ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΠ΅ ΠΊΠΎΠ΄Ρ ΠΊΠ»Π°Π²ΠΈΡ. ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½ΡΠΆΠ½ΡΠΉ ΠΊΠΎΠ΄, ΡΡΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΠΊΠΎΠ΄Ρ ΠΊΠ»Π°Π²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ, ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½ΡΠΆΠ½ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ.
Π’Π°ΠΊΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ, ΠΊΠ°ΠΊ Shift , Ctrl , Alt ΠΏΠΎΡΠΎΠΆΠ΄Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ. ΠΠΎ ΠΏΡΠΈ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, Π½Π°ΠΆΠ°ΡΡ Π»ΠΈ ΡΡΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ, ΠΏΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈ JavaScript mouse events : shiftKey , ctrlKey , altKey ΠΈ metaKey :
Π‘ΠΎΠ±ΡΡΠΈΡ Β« keydown Β» ΠΈ Β« keyup Β» ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡ. ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΠ°ΠΌ Π²Π²ΠΎΠ΄ΠΈΠΌΡΠΉ ΡΠ΅ΠΊΡΡ? ΠΠΎΠ»ΡΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ· ΠΊΠΎΠ΄ΠΎΠ² ΠΊΠ»Π°Π²ΠΈΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅, Β« keypress Β«, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Β« keydown Β«. ΠΠ½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Β« keydown Β«, ΠΏΠΎΠΊΠ° ΠΊΠ»Π°Π²ΠΈΡΠ° Π½Π°ΠΆΠ°ΡΠ°. ΠΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΊΠ»Π°Π²ΠΈΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π²Π²ΠΎΠ΄ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ².
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ charCode Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°Π½, ΠΊΠ°ΠΊ ΠΊΠΎΠ΄ ΡΠΈΠΌΠ²ΠΎΠ»Π° Unicode . ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ String.fromCharCode , ΡΡΠΎΠ±Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² ΡΡΡΠΎΠΊΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΌΠ²ΠΎΠ»Π°.
Π£Π·Π΅Π» DOM , Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ, ΠΎΡ ΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΡΡ Π² ΡΠΎΠΊΡΡΠ΅ Π²Π²ΠΎΠ΄Π° ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ. ΠΠ±ΡΡΠ½ΡΠ΅ ΡΠ·Π»Ρ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ Π²Π²ΠΎΠ΄Π° ( Π΅ΡΠ»ΠΈ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡ tabindex ), Π½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ, ΠΌΠΎΠ³ΡΡ.
ΠΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π²ΡΠ΄Π΅Π»Π΅Π½ ΡΠΎΠΊΡΡΠΎΠΌ Π²Π²ΠΎΠ΄Π°, ΡΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ·Π»Π° Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΈ JavaScript touch events Π²ΡΡΡΡΠΏΠ°Π΅Ρ document.body .
ΠΠ»ΠΈΠΊΠΈ ΠΌΡΡΠΈ
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΌΡΡΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΡΠ΄ ΡΠΎΠ±ΡΡΠΈΠΉ. Π‘ΠΎΠ±ΡΡΠΈΡ Β« mousedown Β» ΠΈ Β« mouseup Β» ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° Β« keydown Β» ΠΈ Β« keyup Β«. ΠΠ½ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΆΠ°ΡΠ° ΠΈ ΠΎΡΠΏΡΡΠ΅Π½Π° ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ. ΠΠ°Π½Π½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ Π² ΡΠ·Π»Π°Ρ DOM, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ» Π½Π°Π²Π΅Π΄Π΅Π½ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅.
ΠΠ»Ρ ΠΎΠ±ΡΠ΅Π³ΠΎ ΡΠ·Π»Π°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΠ»ΠΎΡΡ ΠΊΠ°ΠΊ Π½Π°ΠΆΠ°ΡΠΈΠ΅, ΡΠ°ΠΊ ΠΈ ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΌΡΡΠΈ, ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ±ΡΡΠΈΡ Β« mouseup Β» Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« click Β«. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠ½ΠΊΡΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΡΡΡΠΎΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠ½ΠΊΡ ΠΈ ΠΎΡΠΏΡΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« click Β» Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ±Π° ΡΡΠΈ ΠΏΡΠ½ΠΊΡΠ°.
ΠΡΠ»ΠΈ Π΄Π²Π° ΠΊΠ»ΠΈΠΊΠ° Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ, ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« dblclick Β» ( Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ ). ΠΠ½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΌΡΡΠΈ, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² pageX ΠΈ pageY , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ ( Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ) ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ³Π»Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΌΡΡΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ( ΠΏΠΎΠ΄ ΠΊΡΡΡΠΎΡΠΎΠΌ ) Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎΡΠΊΠ°:
Π‘Π²ΠΎΠΉΡΡΠ²Π° clientX ΠΈ clientY ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ pageX ΠΈ pageY , Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΌΡΡΠΈ Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ getBoundingClientRect .
ΠΠ²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΊΡΡΡΠΎΠ² ΠΌΡΡΠΈ, ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« mousemove Β» ΠΈΠ· Π½Π°Π±ΠΎΡΠ° JavaScript mouse events . ΠΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΡΡΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠΈ ΡΡΠ° ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΆΠ΅ ΠΈΠ»ΠΈ ΡΠΈΡΠ΅:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Β« mousemove Β» Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π°. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΌΡΡΡ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΌΡ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ°Π΅ΠΌ JavaScript touch events , ΠΊΠΎΠ³Π΄Π° ΠΊΠ»Π°Π²ΠΈΡΠ° ΠΌΡΡΠΈ Π±ΡΠ»Π° ΠΎΡΠΏΡΡΠ΅Π½Π°.
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΈ. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ Β« mousemove Β» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ which . Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ buttons , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π½ΠΎ ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π ΡΡΠ°ΡΡΡΡ, Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΎ-ΡΠΎ ΠΎΠ΄Π½ΠΎ: Π»ΠΈΠ±ΠΎ buttons , Π»ΠΈΠ±ΠΎ which . Π€ΡΠ½ΠΊΡΠΈΡ buttonPressed Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΡΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ buttons , ΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΊ which .
ΠΠΎΠ³Π΄Π° ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π°Π²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΡΠ·Π΅Π», Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΡΠΎΠ±ΡΡΠΈΡ Β« mouseover Β» ΠΈΠ»ΠΈ Β« mouseout Β«. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, Π²ΡΠ²ΠΎΠ΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π°ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΡΠΎΠ±ΡΡΠΈΡ Β« mouseover Β» ΠΈ Π·Π°Π²Π΅ΡΡΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ±ΡΡΠΈΡ Β« mouseout Β«. ΠΠΎΠ³Π΄Π° ΠΌΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠ·Π»Π° ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ·Π»Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« mouseout Β«. Π₯ΠΎΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π΅ ΠΏΠΎΠΊΠΈΠ½ΡΠ» Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ·Π»Π°.
Π§ΡΠΎ Π΅ΡΠ΅ Ρ ΡΠΆΠ΅, ΡΡΠΈ JavaScript event ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ. ΠΠΎΠ³Π΄Π° ΠΌΡΡΡ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ·Π»ΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« mouseout Β«.
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΡΠΎΠ±ΡΡΠΈΡ relatedTarget . Π ΡΠ»ΡΡΠ°Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΡ Β« mouseover Β» ΠΎΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ. Π Π² ΡΠ»ΡΡΠ°Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ Β« mouseout Β» β ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ. ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° relatedTarget Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ·Π»Π°.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π±ΡΠ» Π½Π°Π²Π΅Π΄Π΅Π½ Π½Π° ΡΠ·Π΅Π» ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»ΠΎΠ² ( ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ ):
Π€ΡΠ½ΠΊΡΠΈΡ isInside ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ²ΡΠ·ΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ·Π»Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ( ΠΊΠΎΠ³Π΄Π° node ΡΠ°Π²Π΅Π½ Π½ΡΠ»Ρ ). ΠΠΈΠ±ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΉΠ΄Π΅Π½ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° CSS :hover , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠΎ ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΡΡΠΎ-ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ·Π»Π°, ΡΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ΅ΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ Β« mouseover Β» ΠΈ Β« mouseout Β» ( JavaScript mouse events ):
Π‘ΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, Π² Π½Π΅ΠΌ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ JavaScript scroll event . ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ; Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π²Π½Π΅ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΠΎ ΡΠ°ΡΡΡΠΌ Π·Π°Π»ΠΈΠ²Π°Π»ΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΠ»ΠΈ fixed , ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠΎΡ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΡΠΎ ΠΈ ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ position:absolute . ΠΠΎ ΡΠ°ΠΊ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ° Π±ΡΠ΄Π΅Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ. ΠΠ½ΡΡΡΠΈ Π½Π΅Π³ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΎΠΌ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ % , Π° Π½Π΅ ΡΡ , ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΠΈΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°.
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ innerHeight ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΠ΅ΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ΅Π»ΡΠ·Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΎΠΊΠ½ΠΎ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π‘ innerHeight ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ innerWidth . Π Π°Π·Π΄Π΅Π»ΠΈΠ² pageYOffset ( ΡΠ΅ΠΊΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΠΊΠ½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ) Π½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΡΠΌΠ½ΠΎΠΆΠΈΠ² Π½Π° 100, ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΏΡΠΎΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°.
ΠΡΠ·ΠΎΠ² preventDefault Π΄Π»Ρ JavaScript scroll event Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠ΅.
Π‘ΠΎΠ±ΡΡΠΈΡ ΡΠΎΠΊΡΡΠ° Π²Π²ΠΎΠ΄Π°
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ Π²Π²ΠΎΠ΄Π°, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π² Π½Π΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« focus Β«. ΠΠΎΠ³Π΄Π° ΡΠΎΠΊΡΡ Π²Π²ΠΎΠ΄Π° ΡΠ½ΠΈΠΌΠ°Π΅ΡΡΡ, Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« blur Β«.
ΠΡΠΈ Π΄Π²Π° ΡΠΎΠ±ΡΡΠΈΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΡΠΎΠΌ Π²Π²ΠΎΠ΄Π°.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ Π²Π²ΠΎΠ΄Π°:
ΠΠ±ΡΠ΅ΠΊΡ ΠΎΠΊΠ½Π° ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ Β« focus Β» ΠΈ Β« blur Β«, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠΎΠ³Π΄Π° Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ, Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΡΠ΅Π»Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΠΊΠ½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ JavaScript event Β«loadΒ» . ΠΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π²ΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
ΠΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π·Π°ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π»ΠΈ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ setTimeout , ΠΈ Π²ΡΠ·ΠΎΠ²Π° Π΄Π»Ρ Π½Π΅Π΅ clearTimeout :
Π€ΡΠ½ΠΊΡΠΈΡ cancelAnimationFrame ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ clearTimeout . ΠΠ½Π° Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΠΌ requestAnimationFrame , ΡΡΠΎΠ±Ρ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ°Π΄Ρ ( Π΅ΡΠ»ΠΈ ΠΎΠ½ Π΅ΡΠ΅ Π½Π΅ Π±ΡΠ» Π²ΡΠ·Π²Π°Π½ ).
ΠΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π°Π±ΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΉ, setInterval ΠΈ clearInterval ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°ΠΉΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ²ΡΠΎΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠ΅ X ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄:
ΠΡΠΎΠ±Π»Π΅Π½ΠΈΠ΅
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΏΡ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠ³ΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π· Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ( Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β« mousemove Β» ΠΈ javascript scroll event ). ΠΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΊΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ»ΠΎ ΠΎΡΠ΅Π½Ρ Π΄ΠΎΠ»Π³ΠΎ, ΠΈΠ½Π°ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΈ ΡΠΊΠ°ΡΠΊΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠΌ.
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ Π² ΡΠ°ΠΊΠΎΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ setTimeout , ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌΠΈ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΡΡΡΠ½Π΅ΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π½Π°Π΄ΠΎΠ»Π³ΠΎ. ΠΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ Π΄ΡΠΎΠ±Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΡ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΠΈΡ ΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΊ Π΄ΡΠΎΠ±Π»Π΅Π½ΠΈΡ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ°ΡΠ°Π΅Ρ. ΠΠΎ Π½Π΅ Ρ ΠΎΡΠΈΠΌ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΡΡΡΠΎ ΠΏΠ΅ΡΠ°ΡΠ°Π΅Ρ, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΠΏΠ°ΡΠ·Π°. ΠΠΌΠ΅ΡΡΠΎ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π°Π΄Π΅ΡΠΆΠΊΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠΈΡΠ°Π΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ( Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²Π°Ρ ΠΈΠΌΠ΅Π΅ΡΡΡ ). ΠΡΠ»ΠΈ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ( ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ Π½Π°ΠΌΠΈ Π·Π°Π΄Π΅ΡΠΆΠΊΠ° ), ΡΠΎ Π·Π°Π΄Π΅ΡΠΆΠΊΠ° ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ ΠΎΡΠΌΠ΅Π½ΡΠ΅ΡΡΡ:
ΠΠ΅ΡΠ΅Π΄Π°ΡΠ° Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ clearTimeout ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π²ΡΠ·ΠΎΠ² Π΄Π»Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΆΠ΅ Π·Π°ΠΏΡΡΠ΅Π½Π°, Π½Π΅ Π΄Π°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. ΠΠ°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΡΠΌΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ, ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ.
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΠΎΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΠΎΡΠ²Π΅ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠΎ ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½ΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π»ΠΈΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ΅ΡΠΈΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π² ΠΎΡΠ²Π΅Ρ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ Β« mousemove Β» ( JavaScript mouse events ) ΡΠ΅ΠΊΡΡΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΌΡΡΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π· ΠΊΠ°ΠΆΠ΄ΡΠ΅ 250 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄:
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°ΡΡ ΠΈ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ, Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ Π½Π΅ ΠΈΠΌΠ΅Π΅ΠΌ ΠΏΡΡΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ. ΠΠ»Ρ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ addEventListener .
ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠΈΠΏΡ (Β« keydown Β«, Β« focus Β» ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅ ), ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΠ΅Ρ Π΅Π³ΠΎ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΠΉ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° DOM , Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ·Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌ Ρ ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΈΡ .
ΠΠΎΠ³Π΄Π° Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. ΠΡΠΎΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ( stopPropagation ) ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΡΠΎΠ±ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ( preventDefault ).
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ ΠΏΠΎΡΠΎΠΆΠ΄Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ Β« keydown Β«, Β« keypress Β» ΠΈ Β« keyup Β«. ΠΠ°ΠΆΠ°ΡΠΈΠ΅ ΠΌΡΡΠΈ ΠΏΠΎΡΠΎΠΆΠ΄Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ Β« mousedown Β«, Β« mouseup Β» ΠΈ Β« click Β«. ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ β Β« mousemove Β«, Β« mouseenter Β» ΠΈ Β« mouseout Β«.
JavaScript scroll event ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ±ΡΡΠΈΡ Β« scroll Β«, Π° ΡΠΌΠ΅Π½Π° ΡΠΎΠΊΡΡΠ° β Β« focus Β» ΠΈ Β« blur Β«. ΠΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΎΠΊΠ½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ Β« load Β«.
Π’ΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΡΠ°ΡΡΡ JavaScript ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΊΡΠΈΠΏΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠΆΠΈΠ΄Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π² ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ.
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β« Handling Events Β» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
20 CSS Button Click Effects
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML ΠΈ CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈΠ· codepen ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ². ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π·Π° ΡΠ΅Π²ΡΠ°Π»Ρ 2019 Π³ΠΎΠ΄Π°. 6 Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠ².
- ΠΠ½ΠΎΠΏΠΊΠΈ CSS
- ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ CSS
- 3D-ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
- ΠΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ CSS
- ΠΠ½ΠΎΠΏΠΊΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS
- ΠΠ»ΠΎΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
- ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΊΡΡΡΠΈΡ CSS
- ΠΠ½ΠΎΠΏΠΊΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ CSS
- ΠΠ½ΠΎΠΏΠΊΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ/ΠΏΠ°ΡΠ·Ρ CSS
- ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
Π ΠΊΠΎΠ΄Π΅
Π’ΠΎΠ½ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π§ΠΈΡΡΡΠΉ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. ΠΡΠ»ΡΡΠΈΡΡΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π±Π΅Π· JavaScript.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΠ· ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°
Delightful Material UI ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΠΏΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ ΠΊΠΎΠ½ΡΡΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΊΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ ΠΈΠ· SCSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ»ΡΡΠΈΡΡΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ JavaScript
ΠΡΠΎΡΡΠ°Ρ ΡΠ΅ΡΡΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠ΅ΠΉ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΊΠΎΠ΄Π°ΠΌΠΈ Javascript Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π²ΠΎΠ»Π½ΠΎΠ²ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ CSS
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ CSS Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ½Π²Π΅ΡΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎ-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ
Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π¦Π²Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅ΠΆΠΈΠΌ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ : ΡΠ°Π·Π½ΠΈΡΠ°
.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠΊΡΠΈΠ½ Sweet Little Button
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
Π§Π΅ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ ΠΎΠ΄Π° Π² Π±ΠΈΠΎΠΌΠ΅ΡΡΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° Β«Π£Π΄Π°Π»ΠΈΡΡΒ» Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ
ΠΠ³ΡΠ° Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ /Π·Π½Π°ΡΠΎΠΊ ΠΊΠΎΡΠ·ΠΈΠ½Ρ .
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡΒ»
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ·ΡΡΡΠΊΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΠ΅Π»ΡΠΊΠ°
Π‘Π΄Π΅Π»Π°Π» ΠΏΡΠ·ΡΡΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ
Π΄Π»Ρ background-image
. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅ΡΠΈ Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
div
ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ( ::before
ΠΈ ::after
)
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
Π Π΅ΡΡΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ
ΠΠ³ΡΠ° Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS.
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π²ΠΎΠ»Π½ΠΎΠ²ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ES6.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ CSS
ΠΡΠΎΡΡΠΎΠΉ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ CSS
ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π²ΡΠ»Π΅ΡΠ°ΡΡΠΈΠΌΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠΌΡ ΠΏΡΡΠΈ (ΡΠ°Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΌΡ ΠΊΠ°ΠΊ ΠΏΡΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ CSS).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ barba.js Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠ° Π² HTML ΠΈ CSS Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS3
ΠΡΠΎΡΡΠΎΠΉ CSS ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS
ΠΡΠΎΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ Ρ CSS Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡΡΠΈΠΌΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°: Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
18+ Π»ΡΡΡΠΈΡ ΡΠ΅ΠΌ Shopify CSS Button Effects Themes Free & Premium 2022 β AVADA Commerce Blog
18+ Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² CSS Button Click Effects ΠΈΠ· ΡΠΎΡΠ΅Π½ ΠΎΠ±Π·ΠΎΡΠΎΠ² CSS Button Click Effects Π½Π° ΡΡΠ½ΠΊΠ΅ (Codepen.io), ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΠΉΡΠΈΠ½Π³Π΅ Avada Commerce, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΠ΅Π½ΠΊΠΈ Avada Commerce, ΡΠ΅ΠΉΡΠΈΠ½Π³ΠΎΠ²ΡΠ΅ ΠΎΠ±Π·ΠΎΡΡ, ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠΈΡΠΊΠ°, ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΠΈ. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΎΠ±Π·ΠΎΡΡ Π±ΡΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π½Ρ ΡΠΊΡΠΏΠ΅ΡΡΠ°ΠΌΠΈ Avada Commerce Π²ΡΡΡΠ½ΡΡ. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅Π³ΠΎ CSS Button Click Effects Π½Π΅Ρ Π² ΡΠΏΠΈΡΠΊΠ΅, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π½Π°ΠΌ. ΠΡΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ css Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΎΡΠ΅Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ 7 ΠΎΠΊΡΡΠ±ΡΡ 2022 Π³ΠΎΠ΄Π°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΈΠ»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.
ΠΠ½ΠΎΠΏΠΊΠ° CodepenChallenge Ripple Ρ VueJS ΠΎΡΠΠ½ΠΎΠΏΠΊΠ° #CodepenChallenge Ripple Ρ VueJS β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ CSS, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Π°Π²ΡΠΎΡΠΎΠΌ Π’Π°ΠΊΠ°Π½Π΅ ΠΡΠΈΠ½ΠΎΡΠ΅. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, ΠΊΠ½ΠΎΠΏΠΊΠ° #CodepenChallenge Ripple Ρ VueJS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ·ΠΎΠ²ΠΎΠΉ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΊΠ½ΠΎΠΏΠΊΡ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅. Π ΠΎΠ·ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡΠΈΠΉ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡ, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ. ΠΠ΅ ΡΠ΅ΡΡΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Ripple #CodepenChallenge Ρ VueJS Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ!
ΠΠ΅ΠΌΠΎ
Π½Π°ΠΆΠΌΠΈΡΠ΅ css ΠΏΠΎClick css β ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠ²Π°Π½ΡΠΎΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ ΠΏΡΠΎΡΡΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, Click css ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΡΡΡ Π±Π΅Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ»ΡΠ²Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²Π΅Π΄ΠΎΠΌΠΈΡΡ Π²Π°Ρ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΆΠ°ΡΡ Π½Π° Π½Π΅Π΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΡΠ³Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π²Ρ Π΅Π΅ Π²ΡΠ±ΡΠ°Π»ΠΈ. ΠΡΠ΅ Π΅ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Click css ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΌΠΈ!
ΠΠ΅ΠΌΠΎ
Π§Π΅ΡΠ½Π°Ρ Π±ΠΈΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° byBlack Biometirics Button β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠΈΠΊΠ°ΡΠ»Π΅ΠΌ ΠΠΉΠ½Π°Π»Π΅ΠΌΠΎΠΌ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ Π±ΠΈΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, Black Biometirics Button ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ ΡΠ΅ΡΠ½ΡΡ Π±ΠΈΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠΉΡΠΈΒ», ΠΎΡΠΏΠ΅ΡΠ°ΡΠΎΠΊ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΡΡΠ³Π°. ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΏΠ΅ΡΠ°ΡΠΎΠΊ Π·Π°Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π΅Π»ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π³Π°Π»ΠΎΡΠΊΠ°. ΠΠ΅ ΡΠΏΡΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΡΠ°Π½Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Black Biometirics Button!
Demo
ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome ΠΎΡΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ cjk ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠ»ΠΈ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome, Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ. ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΠΊΡΡΠΆΠΎΠΊ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Β«ICOΒ». ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΊΡΡΠ³ Π±ΡΡΡΡΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΏΡΡΠΌΡΡ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΡ Π»ΠΈΠ½ΠΈΡ. ΠΠ½ΠΎΠΏΠΊΠ° Π²Π΅ΡΠ½Π΅ΡΡΡ ΠΊ Π½Π°ΡΠ°Π»Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ½ΠΎΠ²Π° Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΡ ΠΏΡΡΠΌΡΡ Π»ΠΈΠ½ΠΈΡ. ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome ΠΈ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π΅Π³ΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ!
Demo
Cool Button Click Effect byCool Button Click Effect β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ Boundless ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π§ΡΠΎΠ±Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Cool Button Click Effect Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ Π½Π° Π²Π°ΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ΅ΠΊΡΡ Β«Click MeΒ» ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡ Π±Π΅Π»ΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΅Π»ΠΊΠ½Π΅ΡΠ΅ ΠΏΠΎ ΡΡΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΈΠ½ΡΡ ΡΡΠ±Ρ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π΅Π³ΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ° β ΡΡΠΎ ΠΌΠΎΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ CSS, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½Π°Ρ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠΈΠ°ΠΌΠΎΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²ΡΠ΅ΠΎΠ±ΡΠ΅Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΌΠ°Π³ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΈ ΡΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΠ±ΠΈ, ΠΏΡΠ΅Π²ΡΠ°ΡΠ°ΡΡΠΈΠΉ Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ· Π±Π΅Π»ΠΎΠΉ Π² ΡΠ΅ΡΠ½ΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΡΠ½ΠΎΠ²Π° Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π° ΡΠ½ΠΎΠ²Π° ΡΡΠ°Π½Π΅Ρ Π±Π΅Π»ΠΎΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΡΠ±ΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΠΊΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ SCSS Π½Π°Π‘ΠΊΠΎΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ SCSS β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΡΡΠ½Π΄ΠΎΠ½ΠΎΠΌ ΠΠ°ΠΊΠΠΎΠ½Π½Π΅Π»Π»ΠΎΠΌ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ SCSS Beveled Buttons Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ΠΉ ΠΊΡΠ°ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π΅Π΅, Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΊΠΎΡΠ΅Π½Π½ΠΎΠΉ, Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π΅ ΡΠΎΡΠΌΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π°ΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠΎΡΠ΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ SCSS!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΌΠΈΠ»Π°Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠ° ΠΌΠΈΠΊΡΠΈΠ½ ΠΎΡSweet little button mixin β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΡΠΈΡΡΠΈΠ½ΠΎΠΉ ΠΠΈΠΌΠ΅Ρ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅, ΠΌΠΈΠΊΡΠΈΠ½ Sweet little button ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΡΠΎΡ ΠΆΠ΅ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΠΈ ΡΡΠΈΡΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΎΠ΄Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΠΈ ΠΎΡΡΠ°Π½Π΅ΡΡΡ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° Π½Π΅Π΅ ΡΠ½ΠΎΠ²Π°. ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²ΡΠΌ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌ Ρ ΠΌΠΈΠΊΡΠΈΠ½ΠΎΠΌ Sweet little button!
ΠΠ΅ΠΌΠΎ
ΠΡΠ·ΡΡΡΠΊΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡBubbly Button β ΡΡΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΡΡΠΎΠΌ Π‘Π°ΡΠ΄ΠΎΠΌ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π·Π°Π±Π°Π²Π½ΠΎΠΉ ΠΈ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bubbly Button Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½Π°Ρ ΡΠΎΠ·ΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΡΠ·ΡΡΡ. Π ΠΎΠ·ΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠ²Π΅Ρ ΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½Π° ΡΠΎΠ·ΠΎΠ²ΠΎΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠΉ ΡΠ΅Π½ΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠ·ΡΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π² ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ° ΠΏΠΎΡΠ²ΡΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΠΏΡΠ·ΡΡΡΠΊΠΈ. ΠΠ΅ ΡΠΏΡΡΡΠΈΡΠ΅ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bubbly Button!
Demo
ΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ byΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΡΠΊΠ°ΡΠΎΠΌ ΠΡΡΠ²Π΅Π·ΠΎΠΌ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ 3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΊΠ»Π°ΡΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ: Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ», Β«Π£Π΄Π°Π»ΠΈΡΡΒ», Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ». ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΡΡΠ΅ΠΊΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ²Π΅ΡΠΎΠΌ, ΡΡΠΎ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π·Π½Π°ΡΠΎΠΊ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠ΅ ΡΠΏΡΡΡΠΈΡΠ΅ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ!
ΠΠ΅ΠΌΠΎ
ΠΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ byButton Click Effect β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ MinzCode ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ 3 ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΠΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅, Π‘ΡΠΎΠΏ ΠΈ ΠΠ°ΡΠ·Π°) Ρ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ (ΡΡΡΠ΅ΠΊΡ A, B, C ΠΈ D). ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅ ΡΠΈΠΏΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΈΠΏ!
ΠΠ΅ΠΌΠΎ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ byΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠ°ΡΠΎΠ½ΠΎΠΌ ΠΠ°ΠΊΠ³ΡΠ°ΠΉΡΠΎΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ Π·Π°Π±Π°Π²Π½ΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅: Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΡΡ ΡΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΡΡΡΠ΅ΠΊΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠΈΠ½ΡΡ ΡΠ°ΡΡΡ Π²ΡΡΡΠ½Π΅ΡΡΡ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡ Π² ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΊΡΡΠΆΠΎΠΊ. ΠΠ· ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΠΊΡΡΠ³Π° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠ΅ ΠΊΡΡΠ³ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΊΡΠ°Π½Ρ. ΠΠΎΡΡΠΎΠΌΡ ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ. ΠΡΠ΅ Π΅ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ!
ΠΠ΅ΠΌΠΎ
ΠΡΡΠ΅ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ byΠΡΡΠ΅ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΡΠΎΠ½ΠΊΠΎΠΉ Π Π°ΡΠ»Π΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠ΅Ρ Π·Π°Π±Π°Π²Π½ΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, Button Effect ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΎΡΡΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° Π·Π΅Π»Π΅Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±Π΅Π»ΡΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ Π·Π΅Π»Π΅Π½Π°Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ ΡΠ΅Π½Ρ, Π²ΡΠ΄Π΅Π»ΡΡΡΠ°Ρ Π΅Π΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° Π½Π΅Π΅, Π½Π° Π±Π΅Π»ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π·Π΅Π»Π΅Π½Π°Ρ ΡΡΠ±Ρ. ΠΡΠ΅ Π΅ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS, Π·Π°Π²ΠΈΡΠ°Π΅Ρ ΠΏΠ»Π°Π²Π½ΠΎ! ΠΏΠΎΠΠ½ΠΎΠΏΠΊΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS, ΠΏΠ»Π°Π²Π½ΠΎ Π·Π°Π²ΠΈΡΠ°Π΅Ρ! β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ hawcubite Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠ΅Ρ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π§ΡΠΎΠ±Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS ΠΏΠ»Π°Π²Π½ΠΎ Π·Π°Π²ΠΈΡΠ°Π΅Ρ! ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΡΠ°Π΄ΡΠΆΠ½ΡΠΌΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ. Π‘Π»Π΅Π³ΠΊΠ° Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΈ Π²Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠ²Π΅ΡΠ° ΡΠ°Π΄ΡΠΆΠ½ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ, ΡΡΠΎ Π²Ρ Π½Π°ΠΆΠ°Π»ΠΈ Π½Π° Π½Π΅Π΅. ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS, ΠΏΠ»Π°Π²Π½ΠΎ Π·Π°Π²ΠΈΡΠ°Π΅Ρ! ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ!
Demo
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ byΠ£Π΄Π°Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ Π₯ΠΈΠΌΠ°Π»Π°Π΅ΠΉ Π‘ΠΈΠ½Π³Ρ ΠΎΠΌ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π£Π΄Π°Π»ΠΈΡΡ Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈΒ» Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° Π·Π½Π°ΡΠΎΠΊ ΠΊΠΎΡΠ·ΠΈΠ½Ρ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ ΠΊΠΎΡΠ·ΠΈΠ½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΠ½Π΅-Π±Π΅Π»ΠΎΠΉ. ΠΠΎΡΠ·ΠΈΠ½Π° Π΄Π»Ρ ΠΌΡΡΠΎΡΠ° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠ΅ΡΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ. ΠΠ΅ ΡΠΏΡΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΡΠ°Π½Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π£Π΄Π°Π»ΠΈΡΡ Ρ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈΒ»!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π½Π°ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠΈΠΊΠ°ΡΠ»Π΅ΠΌ ΠΠΉΠ½Π°Π»Π΅ΠΌΠΎΠΌ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅, ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ Π·Π°Π±Π°Π²Π½ΡΡ ΠΈ ΠΆΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ. ΠΡΡΡ ΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈ ΠΎΠ΄Π½Π° ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠΎΠ³Π΄Π° Π²Ρ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ, ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΡΠΎΠΌΡ Π²Π°ΡΠΈΠ°Π½ΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π΅ ΡΠΏΡΡΡΠΈΠΌ Π²Π°Ρ ΡΠ°Π½Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΆΠΈΠ²ΡΠΌ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ Material UI!
ΠΠ΅ΠΌΠΎ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS3 byΠ Π°Π΄ΠΈΠ°Π»ΡΠ½Π°Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ CSS-ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ ΠΠΈΠ½Π΅ΡΠ΅ΠΌ ΠΠ°Π±Ρ ΠΠ΅ΡΠΈΠ½Π³Π°ΡΠΎΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠ΅Ρ Π·Π°Π±Π°Π²Π½ΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ³Π»ΡΠ±ΠΈΡΡΡΡ Π² Π΄Π΅ΡΠ°Π»ΠΈ, ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS3 ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΅Π»ΠΊΠ°Π΅ΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ, Π½Π° Π±Π΅Π»ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ·ΠΎΠ²ΡΠΉ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΡΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ Π²Π΅ΡΠ΅Π»Π΅Π΅ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅. ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ! ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Radial Gradient Animation CSS3 ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ!
ΠΠ΅ΠΌΠΎ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π²ΠΎΠ»Π½ΠΎΠ²ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ES6 byRipple Effect Animation Ρ CSS ΠΈ ES6 β ΡΡΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΡΠΎΠΌ Π₯ΡΠ°Π½ΠΎΠΌ ΠΠΎΠΉΡΠ΅ΡΠΎΠΌ Π’ΠΎΡΡΠΈΡ ΠΎΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-Π±ΠΈΠ·Π½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΡΠΊΡΠ°ΡΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π·Π°Π±Π°Π²Π½ΠΎΠΉ ΠΈ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ, Ripple Effect Animation Ρ CSS ΠΈ ES6 ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°ΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° Π½Π΅Π΅. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ. ΠΠΎΠ²Π΅ΡΡΡΠ΅ ΠΌΠ½Π΅, Π²Ρ Π½Π΅ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΡΠΏΡΡΡΠΈΡΡ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ripple Effect Animation Ρ CSS ΠΈ ES6!
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ°ΠΊ AVADA Commerce ΡΠ°Π½ΠΆΠΈΡΡΠ΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² CSS Button Click Effects
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ 18 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² CSS Button Click Effects Π΄Π»Ρ CSS ΡΠ°Π½ΠΆΠΈΡΡΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΊΡΠΈΡΠ΅ΡΠΈΠ΅Π²: Π΄Π²ΠΈΠ³Π°ΡΠ΅Π»ΠΈ
ΠΠΎΠ»Π΅Π΅ 18 Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
ΠΡΠΎΠ±Π°Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½ΠΎΡΡΡ Π²ΡΠ΅ΠΌ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠ°ΠΌ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ²ΡΠΈΠΌ 18 Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS. ΠΡ ΠΈΡΠΊΡΠ΅Π½Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ CSS Π²ΡΡΠ΅, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΡ ΡΠ΅ΡΠΈΡ ΠΎΠ±Π·ΠΎΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°ΠΌ CSS Π½Π°ΠΉΡΠΈ Π»ΡΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΎΠ±Π·ΠΎΡΠ΅ (Π²ΠΊΠ»ΡΡΠ°Ρ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΡΠ΅Π½Ρ ΠΈ ΡΡΡΠ»ΠΊΠΈ) ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠ° ΠΈΠ»ΠΈ Ρ Π΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ/ΠΊΠ°Π½Π°Π»ΠΎΠ² ΠΏΡΠΎΠ΄Π°ΠΆ.
ΠΠ°ΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠ΅Π³ΡΠ»ΡΡΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· 18 Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΡΠΈΠΌ ΠΎΠ±Π·ΠΎΡΠΎΠΌ css.
ΠΠ΅ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ css Π² ΡΠΏΠΈΡΠΊΠ΅? Π₯ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΡΡΠΎΡ ΠΎΠ±Π·ΠΎΡ? Π‘Π²ΡΠΆΠΈΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ
ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ CSS, JS, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ Π½Π°ΡΠΈ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ CSS, JS!
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΡΡΠ°Π»ΠΈΡΡ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½ΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΡΠ»ΠΊΠΈ) ΠΈ ΠΏΠΎΠ½ΡΠ»ΠΈ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡΡ?
ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΈΡΡΠ½ΠΎΠΊ Π½ΠΈΠΆΠ΅. Π― ΡΠ΄Π΅Π»Π°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°Ρ, ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΅ΡΠ°ΡΡ.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ UX
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ WCAG
Π ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ WCAG 2.1 ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΠΊΠ°ΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΌΡΡΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 44Γ44 ΠΏΠΈΠΊΡΠ΅Π»Ρ. Π Π°Π·ΠΌΠ΅Ρ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, 44Γ44 ΠΏΠΈΠΊΡΠ΅Π»Ρ β Ρ ΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΏΡΠ°Π²Π½Π°Ρ ΡΠΎΡΠΊΠ°.
ΠΠ°ΠΊΠΎΠ½ Π€ΠΈΡΡΡΠ°
ΠΠ°ΠΆΠ½ΡΠΉ Π·Π°ΠΊΠΎΠ½, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π² UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±Π»ΠΈΠΆΠ΅ ΡΠ΅Π»Ρ ΠΊΠ°ΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅Π»ΡΠΊΠ°, ΡΠ΅ΠΌ ΠΌΠ΅Π½ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π½ΠΈΠΌ.
ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅ Ρ ΡΠΌΠΎΠ΄Π΅Π»ΠΈΡΠΎΠ²Π°Π» Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΡΠ»ΡΡΠ°Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠ΅Π½ΡΡΠ΅ ΠΈ Π΄Π°Π»ΡΡΠ΅, ΡΡΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π½Π΅ΠΉ. Π‘ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π²ΠΎΠ΄Π°, ΡΡΠΎ ΡΠΏΡΠΎΡΡΠΈΡ ΠΈ ΡΡΠΊΠΎΡΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π½Π΅ΠΉ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌ, Π½Π΅ Π·Π°Π±ΡΠ²Π°Ρ ΠΎ WCAG 2.5.5 Target Size ΠΈ Π·Π°ΠΊΠΎΠ½Π΅ Π€ΠΈΡΡΡΠ°.
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΡΠΎΡΡΡΡ <ΠΊΠ½ΠΎΠΏΠΊΡ>
, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π²Π°ΠΌ Π½ΡΠΆΠ½Π°. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ Π²Π·ΡΡ ΠΈΠ· ΡΠΈΡΡΠ΅ΠΌΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π±Π°Π½ΠΊΠΈΠ½Π³Π°, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ:
ΠΠ°Π»Π΅Π΅
ΠΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ GIF Π΄Π»Ρ HTML-ΠΊΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΡΠ΅. Π― Π½Π°Π²ΠΎΠΆΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, Π° ΠΊΡΡΡΠΎΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΌ, ΠΈ ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ, ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΡΡΡΠΎΡ! ΠΡΠΎΠ³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π±ΡΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML