Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ jQuery


Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° jQuery прСдоставляСт нСсколько Ρ‚Π΅Ρ…Π½ΠΈΠΊ для добавлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊ DOM-элСмСнтам Π½Π° страницС. НиТС описаны простыС, стандартныС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ способныС ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ слоТныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ эффСкты.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  

ВыполняСт ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π°Π±ΠΎΡ€Π° CSS свойств.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  | Π”Π°Π½Π½Ρ‹Π΅  | Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹  

ΠžΡ‡ΠΈΡ‰Π°Π΅Ρ‚ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Ρƒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов страницы.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  

УстанавливаСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  | Π”Π°Π½Π½Ρ‹Π΅  | Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹  

НачинаСт Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π—Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅  

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π° страницС, Π·Π° счСт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ измСнСния прозрачности.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π—Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅  

Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты ΠΏΡƒΡ‚Π΅ΠΌ затухания ΠΈΡ… Π΄ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ состояния.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π—Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅  

Π˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ прозрачности Ρƒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов Π½Π° страницС. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π—Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅  

Π’Ρ‹Π·ΠΎΠ² этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΏΠ»Π°Π²Π½ΠΎΠΌΡƒ ΠΈΡΡ‡Π΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡŽ (Ссли элСмСнт Π½Π΅ скрыт) ΠΈΠ»ΠΈ появлСнию (Ссли элСмСнт скрыт) Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов Π½Π° страницС, Π·Π° счСт измСнСния прозрачности. ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ послС скрытия элСмСнта, Π΅Π³ΠΎ css-свойство display становится Ρ€Π°Π²Π½Ρ‹ΠΌ none, Π° ΠΏΠ΅Ρ€Π΅Π΄ появлСниСм, ΠΎΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ своС ΠΏΡ€Π΅ΠΆΠ½Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  

ΠŸΡ€Π΅ΠΊΡ€Π°Ρ‰Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ всСх Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΎΡ‡ΠΈΡ‰Π°Π΅Ρ‚ всю ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ событиС complete для всСх Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… элСмСнтов.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π‘Π°Π·ΠΎΠ²Ρ‹Π΅  

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π° страницС, Π·Π° счСт измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ прозрачности.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  | Π”Π°Π½Π½Ρ‹Π΅  | Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹  

Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΈΠ»ΠΈ измСняСт (Π² зависимости ΠΎΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²) ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π‘Π°Π·ΠΎΠ²Ρ‹Π΅  

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π° страницС, Π·Π° счСт измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ прозрачности.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > БкольТСниС  

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π° страницС, Π·Π° счСт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ разворачивания ΠΈ сворачивания.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > БкольТСниС  

Π’Ρ‹Π·ΠΎΠ² этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΏΠ»Π°Π²Π½ΠΎΠΌΡƒ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΡŽ (Ссли элСмСнт Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚) ΠΈΠ»ΠΈ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΡŽ (Ссли элСмСнт свСрнут) Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов Π½Π° страницС.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > БкольТСниС  

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты Π½Π° страницС, Π·Π° счСт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ разворачивания ΠΈ сворачивания.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  

ΠžΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > Π‘Π°Π·ΠΎΠ²Ρ‹Π΅  

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ»ΠΈ скрываСт элСмСнты Π² Π½Π°Π±ΠΎΡ€Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° jQuery.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  | Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ > ВСрсия 3.0  | Бвойства > Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ jQuery  

The rate (in milliseconds) at which animations fire.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  | Бвойства > Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ jQuery  

Globally disable all animations.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ > ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅  

Creates an object containing a set of properties ready to be used in the definition of custom animations.

Анимация Π² JQuery OTUS

JQuery – Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ JavaScript, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для взаимодСйствия с HTML. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ собой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ доступ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту DOM, позволяя Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌ ΠΈ содСрТимому элСмСнтов DOM, Π½ΠΎ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌΠΈ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ вСдСтся ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π΄ΠΎΠ±Ρ€ΠΎΠ²ΠΎΠ»ΡŒΡ†Π΅Π². Она ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ API для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с AJAX. 

JQuery часто встрСчаСтся Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Π·Π° счСт ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для процСссов Π½Π° страницах Π²Π΅Π±-сайтов. Π”Π°Π»Π΅Π΅ прСдстоит Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с самыми популярными ΠΈΠ· Π½ΠΈΡ…. ВсС рассматриваСмыС Π΄Π°Π»Π΅Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.

НСсколько слов ΠΎΠ± Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Анимация – это базовая Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ сайта ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠΈ посСтитСлСй Π½Π° постоянной основС. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ (Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты) ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ большС внимания ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² сравнСнии со «стандартным» Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±Π΅Π· JavaScript ΠΌΠΎΠΆΠ½ΠΎ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ – Ρ‡Π΅Ρ€Π΅Π· Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ CSS3. Для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для элСмСнтов Π²Π΅Π±-сайта Ρ‡Π΅Ρ€Π΅Π· HTML5 ΠΈ CSS3 придСтся ΠΏΠΎΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ. МоТно ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ процСсс Π·Π° счСт ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° JQuery.

НаиболСС распространСнной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ ΠΏΡ€ΠΈ создании Π²Π΅Π±-сайтов являСтся ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ видимости элСмСнта. МоТно ΡΠΊΡ€Ρ‹Ρ‚ΡŒ/ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ CSS display ΠΈΠ»ΠΈ visibility. JQuery ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡Ρƒ. Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всСго Π΄Π²Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ – hide ΠΈ show.

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡƒΠ±Π΅Ρ€Π΅Ρ‚ элСмСнт. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΎΠ½ ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ. Π§Π°Ρ‰Π΅ всСго для animations Π½Π° сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ:

  1. РастворСниС – Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ процСсс постСпСнного удалСния элСмСнта HTML. ДостигаСтся Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π·Π° счСт коррСктирования свойства opacity.
  2. БкольТСниС – Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ постСпСнноС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ сТатиС элСмСнта HTML. Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ высоту ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π”Π°Π»Π΅Π΅ прСдстоит Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ эффСкты Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ. JQuery инкапсулируСт слоТности Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, прСдоставляя встроСнныС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных Π·Π°Π΄Π°Ρ‡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ сокрытиС

Анимации появлСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π½Π° Π²Π΅Π±-страницС ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – это простоС сокрытиС. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ hide. Он устанавливаСт Π² стилях Π±Π»ΠΎΠΊΠ° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«display: noneΒ». Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ скрываСтся любой div Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ спрятанный Π±Π»ΠΎΠΊ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ show. Если элСмСнт Π²Π΅Π±-страницы ΠΈΠΌΠ΅Π΅Ρ‚ свойство Β«display: noneΒ», потрСбуСтся Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠΊΠ°Π·Π° скрытых ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с animation Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ hide ΠΈ show ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€. Π’ Π½Π΅Π³ΠΎ допускаСтся ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° миллисСкунд (1 000 миллисСкунд – это 1 сСкунда), Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ происходит скрытиС ΠΈ ΠΏΠΎΠΊΠ°Π· элСмСнта. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ выглядит ΠΊΠΎΠ΄ с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ 1 000, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ΠΌ Π² 2 000:

Π—Π΄Π΅ΡΡŒ для удобства Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Ρ€Π°ΠΌΠΊΠΈ элСмСнтов (строк). Они Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для наглядной дСмонстрации ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Ρ‹ «закрытия».

Иногда трСбуСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС с Β«ΠΏΠΎΠΊΠ°Π·Π°Π½Β» Π½Π° «спрятан», Π½Π΅ выясняя Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС элСмСнта. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ .toggle(). Если элСмСнт скрыт, сработаСт анимация появлСния (словно ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΌΠ΅Ρ‚ΠΎΠ΄ show). ΠžΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ дСйствия Ρ‚ΠΎΠΆΠ΅ поддСрТиваСтся.

БкольТСниС

ΠŸΡ€ΠΈ использовании hiding ΠΈ shown (ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² hide ΠΈ show соотвСтствСнно) animated ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π±Π»ΠΎΠΊΠΎΠ² Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ исчСзнСт. ΠŸΡ€ΠΈ отсутствии ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² эти ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ. Для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ просто исчСзнСт. Если трСбуСтся анимация свСртывания Π²Π²Π΅Ρ€Ρ…, Π² JQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹:

  • slideUP – ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ сокрытия;
  • slideDown – анимация появлСния (showing animate).

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ выглядит наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°:

SlideDown ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, раскатывая свСрху. Π’Π°ΠΊΠΎΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ достигаСтся Π·Π° счСт увСличСния высоты Π±Π»ΠΎΠΊΠ°. SlideUp скрываСт Π΅Π³ΠΎ, закатывая Π½Π°Π²Π΅Ρ€Ρ…. ΠŸΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅ высоты Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π² CSS Π½Π΅ появится свойство элСмСнта Β«display: noneΒ».

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС с hidden animate Π½Π° showing ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ Π±Π΅Π· изучСния Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ полоТСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ .slideToggle(). Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ .toggle: Ссли Π±Π»ΠΎΠΊ спрятан – ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½, Π° Ссли ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ – скрыт.

Π£ рассмотрСнных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Он ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ значСния slow ΠΈΠ»ΠΈ fast. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – мСдлСнная Ρ€Π°Π±ΠΎΡ‚Π°, Π²Ρ‚ΠΎΡ€ΠΎΠΉ – быстрая анимация.

РастворСниС

РастворСниС достигаСтся Π·Π° счСт измСнСния прозрачности. Π’ CSS ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ называСтся opacity. Π—Π΄Π΅ΡΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • для hides animates (скрытиС) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ fadeOut;
  • для появлСния (showing) примСняСтся fadeIn.

Если Π·Π°Π΄Π°Ρ‚ΡŒ этим ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π² Π²ΠΈΠ΄Π΅ числа – ΠΎΠ½ΠΈ выступят Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π² миллисСкундах Π½Π° исполнСниС примСняСмых ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€. Π’ΠΎΡ‚ наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°:

FadeOut ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, приводя ΠΊ появлСнию showing animate. FadeIn ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ прозрачности. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ Π½Π° Π²Π΅Π±-страничкС постСпСнно исчСзаСт.

Иногда трСбуСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π½Π° экранС, Π½Π΅ рассматривая Π΅Π³ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Β«ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β». Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ .fadeToggle(). Π‘ΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Π»ΠΎΠΊ, Ссли ΠΎΠ½ Π±Ρ‹Π» скрыт (словно использовалась «инструкция» fadeout), Π° Ρ‚Π°ΠΊΠΆΠ΅ скрываСт – ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ отобраТался (ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ fadeIn).

БобствСнныС эффСкты

Π’ JQuery допускаСтся созданиС «особых» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов. Данная опСрация рСализовываСтся Ρ‡Π΅Ρ€Π΅Π· animate-method. Он встрСчаСтся Π² исходном ΠΊΠΎΠ΄Π΅ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π½ΠΈ Π² сокрытии ΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ Π±Π»ΠΎΠΊΠ°, Π° Π² создании Π΄Ρ€ΡƒΠ³ΠΈΡ… эффСктов.

Animate ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²:

  • Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ происходит ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° CSS-Π½Π°Π±ΠΎΡ€Π° свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚;
  • Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ задаСтся врСмя прСобразования (Π² миллисСкундах).

НиТС – ΠΏΡ€ΠΈΠΌΠ΅Ρ€ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. Богласно ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ, трСбуСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· Π½Π΅Π³ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ высотой ΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 100 пиксСлСй:

На экранС появится ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ допускаСтся использованиС Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS-свойств Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. МоТно ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ height:=’+=20’. Π’ этом случаС высота ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° увСличится Π½Π° 20 пиксСлСй ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ.

Π’Ρ‹ΡˆΠ΅ – наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°. Он ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ Π½Π° 10 пиксСлСй, Π° высоты – Π½Π° 20. ΠŸΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ это ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданной ΠΊΠ½ΠΎΠΏΠΊΠ΅. Она называСтся Β«Π£Π²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Β».

Π”Π°Π»Π΅Π΅ Π±ΡƒΠ΄ΡƒΡ‚ рассмотрСны ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ «нСстандартных» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов Π½Π° Π²Π΅Π±-страницС.

По частям

JQuery допускаСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ изобраТСния, примСняя animation ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΅Π³ΠΎ частям. Π‘Π½Π°Ρ‡Π°Π»Π° Β«ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Β» дСлится Π½Π° нСсколько ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ….

Π”Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° 12 частСй Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 150 Π½Π° 150 пиксСлСй. Они Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² 2 ряда ΠΏΠΎ 6 ΡˆΡ‚ΡƒΠΊ. ВсС изобраТСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ряда Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ страницы:

Код позиционирования выглядит Ρ‚Π°ΠΊ:

ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ всС изобраТСния Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ряду ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, примСняя Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Если ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² JQuery, получится Ρ‚Π°ΠΊΠΎΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚:

Π—Π΄Π΅ΡΡŒ:

  1. Π—Π°Π΄Π°Π½Ρ‹ Π΄Π²Π° сСлСктора для ΠΎΡ‚Π±ΠΎΡ€Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² классов img_item ΠΈ img_item2.
  2. ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ функция animate ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ частям для ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ измСнСния значСния свойства opacity Π½Π° 1, Π° left измСняСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ полоТСния ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
  3. АнимационныС эффСкты Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊΠΎ всСм частям изобраТСния.

Π’Ρ‹ΡˆΠ΅ – ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.

Π¦Π΅ΠΏΠΎΡ‡ΠΊΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΎΠ², примСняСмых для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π΅Π±-сайта, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько. Π’ Π±ΠΎΠ»Π΅Π΅ слоТных Π·Π°Π΄Π°Ρ‡Π°Ρ… ΠΎΠ½ΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ Π² Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ:

Π¦Π΅ΠΏΠΎΡ‡ΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΏΡƒΡ‚Π΅ΠΌ Π²Ρ‹Π·ΠΎΠ²Π° animate нСсколько Ρ€Π°Π· Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΡƒΡŽ Π½ΠΎΡ‚Π°Ρ†ΠΈΡŽ.

20 ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ эффСктов jQuery для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π²Π΅Π±-сайтов

ДолгоТданная вСрсия jQuery 3.6 Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ поступила Π² ΠΏΡ€ΠΎΠ΄Π°ΠΆΡƒ, ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Π΄ использованиСм Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ своих ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π² Π½ΠΎΠ²ΡƒΡŽ систСму кодирования. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Π»ΠΈ jQuery для старых вСрсий IE, Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½Ρ‹ отсутствиСм ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых вСрсий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π½ΠΎ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ всСго интСрСсного. jQuery Π·Π°Π»ΠΎΠΆΠΈΠ» ΠΌΠΎΠ½ΡƒΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ основу, которая Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ управляСт большСй Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ испытываСм Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π·Π½Π°Π½ΠΈΠΉ jQuery с Ρ‚Π°ΠΊΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΊ React ΠΈ Angular, ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌ.

Заработная ΠΏΠ»Π°Ρ‚Π° jQuery Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ ΠΏΠ»ΠΎΡ…Π°, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π½Π΅ Π² Ρ‚Π΅Ρ… ΡˆΡ‚Π°Ρ‚Π°Ρ…, Π³Π΄Π΅ срСдний Π΄ΠΎΡ…ΠΎΠ΄ ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° jQuery ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ 90 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ². Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ jQuery бСсплатно, Π° Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ°ΠΊ Khan Academy ΠΈ Codecademy, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ бСсплатныС ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-курсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. GitHub содСрТит тысячи Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ jQuery, всС ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ большС углубляСт ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ этой Ρ„Π΅Π½ΠΎΠΌΠ΅Π½Π°Π»ΡŒΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JavaScript.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, срСдний Π²Π΅Π±-мастСр ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ jQuery ΠΊΠ°ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²Π΅Π±-сайта ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… эффСктов ΠΈ сцСнариСв, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ Π΅Π³ΠΎ основным основным трСбованиям. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· самых ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… ΠΈ, бСзусловно, самых ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery. Π­Ρ‚ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ эффСкты Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π΄ΠΎ создания Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… условий Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ вашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ ваш ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΏΡ€ΠΈ рСгистрации. Π­Ρ‚ΠΎ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π² самых Ρ€Π°Π·Π½Ρ‹Ρ… ситуациях, практичСски Π½Π΅ прилагая усилий для ΠΈΡ… запуска ΠΈ запуска.

Cropper

Cropper Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ самым ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΌ Π²Π΅Π±-инструмСнтом для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ смоТСтС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ. Он ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 70 способов ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, понимания ΠΈ измСнСния Π΄Π°Π½Π½Ρ‹Ρ… изобраТСния. Он ΡƒΠ΄ΠΎΠ±Π΅Π½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств с сСнсорным экраном, позволяСт ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ/Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ/ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ соврСмСнныС Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. ΠŸΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Π΄ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ сторон ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌΡ‹ просмотра, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΈ Π΅ΡΡ‚ΡŒ нСсколько способов ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ массив Π΄Π°Π½Π½Ρ‹Ρ… ΠΎ вашСй Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ , ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, холст ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ поля ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΎΠ΄Π½ΠΈΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ΄ΠΎΠ±Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ составит Ρ‚Ρ€ΡƒΠ΄Π° Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π²Π°ΡˆΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ эффСктивно ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Cropper с Π»ΡŽΠ±Ρ‹ΠΌΠΈ извСстными сцСнариями Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² jQuery ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ для вашСго сайта ΠΎΠ±ΠΌΠ΅Π½Π° изобраТСниями.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Clusterize.js

ДСнис Π›ΡƒΠΊΠΎΠ² внСс большой Π²ΠΊΠ»Π°Π΄ Π² сообщСство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² интСрфСйсов (CSS ΠΈ JavaScript), Π° ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π΅Π³ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ Π²ΠΎΡΡ…ΠΈΡ‰Π°ΡŽΡ‚ дСсятки тысяч людСй ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ, Π° Clusterize β€” ΠΎΠ΄Π½Π° ΠΈΠ· Π΅Π³ΠΎ самыС извСстныС творСния. ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½Π½Ρ‹ΠΉ с использованиСм ванильного JavaScript, Clusterize β€” это Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для отобраТСния большого Π½Π°Π±ΠΎΡ€Π° Π΄Π°Π½Π½Ρ‹Ρ…, извСстного ΠΊΠ°ΠΊ большиС Π΄Π°Π½Π½Ρ‹Π΅, Ρ‡Π΅Ρ€Π΅Π· интСрфСйс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, Π½ΠΎ Clusterize выдСляСтся, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π΄ΠΎ 500 000 строк ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΡ… Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Сдиная Ρ‚Π°Π±Π»ΠΈΡ†Π°, Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ, Π½Π° самом Π΄Π΅Π»Π΅ дСмонстрационный Π²Π΅Π±-сайт построСн с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ просмотром Π² нСсколько шагов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ удаСтся Π»Π΅Π³ΠΊΠΎ ΠΈΡ… ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх соврСмСнных Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. ДокумСнтация ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Clusterize, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π±ΠΎΡ€Ρ‰ΠΈΡ‚ΡŒ с вашими Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ ограничСния Π½Π° Ρ‚ΠΎ, сколько Π΄Π°Π½Π½Ρ‹Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ элСмСнтС.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

TwentyTwenty

Π’ наши Π΄Π½ΠΈ стартапы ΠΈ ИВ-ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ Π½Π°ΠΏΡ€Π°Π²ΠΎ ΠΈ Π½Π°Π»Π΅Π²ΠΎ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… сосрСдоточСны Π½Π° Ρ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ Π²Π΅Π±-манипулирования с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ своСго ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΈΠ½ΠΎΠ³Π΄Π° это ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ваш Π²Π΅Π±-сайт Π² ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚, ΠΈ Π·Π° послСдниС 2 Π³ΠΎΠ΄Π° появилась новая тСндСнция, ΠΊΠΎΠ³Π΄Π° стартапы Π½Π°Ρ‡Π°Π»ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ‹Ρ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ 20/20 своСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. НапримСр, ΠΏΡ€ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ 20/20 ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ваш ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ влияСт Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈΠ»ΠΈ элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ. Π­Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² Ρ‚Π°ΠΊΠΈΡ… инструмСнтах, ΠΊΠ°ΠΊ Affinity Pro ΠΈΠ»ΠΈ Photoshop; Π³Π΄Π΅ изобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ Π½Π°Π·Π°Π΄.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° TwentyTwenty, интСгрированная Π² ваш основной стСк, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для отобраТСния Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ фотографиями с ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π° ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ бСсшовной. Π’Π°ΠΊΠΈΠ΅ сайты, ΠΊΠ°ΠΊ TinyPNG, ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ Π²Ρ‹Π³ΠΎΠ΄Ρƒ ΠΈΠ· этого ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ позволяСт Π²Π΅Π±-мастСру ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ выглядСло ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ сТатия ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ выглядСло послС сТатия, ΠΈ эту ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ любой ситуации, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ, ΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, ΠΈ Π΅Π³ΠΎ высоко цСнят ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΆΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ Ρ‚Π°ΠΊΠΈΠΌ соврСмСнным ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

МСню Π½Π΅ΠΈΠ·Π±Π΅ΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых просматриваСмых/доступных элСмСнтов вашСго Π²Π΅Π±-сайта, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Π³Π΄Π΅ навигация ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ зависит ΠΎΡ‚ мСню, Π½ΠΎ Π΄Π°ΠΆΠ΅ Π² нашС врСмя мСню ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, динамичСских ΠΎΠΏΡ†ΠΈΠΉ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π‘Π»Π°ΠΉΠ΄- ΠΈ Push-мСню ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎ-Π½ΠΎΠ²ΠΎΠΌΡƒ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ соврСмСнноС мСню Π²Π΅Π±-Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. А ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊ этому мСню прилагаСтся ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ собствСнному Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΡƒΠΆΠ΅ сказано ΠΈ сдСлано.

ВызываСтся Blueprint, это мСню ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°; ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ ΠΈ Ρ‚ΠΎΠ»ΠΊΠ°Ρ‚ΡŒ. ΠŸΡ€ΠΈ взаимодСйствии с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ (ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π²Ρ‹Π·ΠΎΠ²) мСню ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π²Ρ‹Π΄Π²ΠΈΠ³Π°Π»ΠΎΡΡŒ ΠΈΠ· Π»Π΅Π²ΠΎΠΉ, ΠΏΡ€Π°Π²ΠΎΠΉ, Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ частСй Π²Π΅Π±-страницы, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² своС мСню Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ всС, Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, Ссли ΠΎΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ HTML5. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ смыслС Blueprint Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ основу для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ мСню, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ, Π΄Π°ΠΆΠ΅ Ссли это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ использованиС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вашС мСню Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ являСтся ΠΎΡ‡Π΅Π½ΡŒ популярным ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ прямо сСйчас. для отобраТСния послСдних новостСй ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… элСмСнтов.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Fancybox

Fancybox β€” это инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всСвозмоТныС ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹. Π’ΠΈΠ΄Π΅ΠΎ ΠΈ изобраТСния фантастичСски Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Fancybox, прСдлагая Π²Π°ΠΌ красиво ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…. Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ настройки ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Fancybox Π² соотвСтствии с вашими потрСбностями. ИзлишнС Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ, Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° смартфонах, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ β€‹β€‹Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ пСрвоклассной Π½Π° всСх устройствах ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…. Fancybox Ρ‚Π°ΠΊΠΆΠ΅ ускоряСтся Π½Π° графичСском процСссорС, распознаСт ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с извСстных сайтов ΠΈ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π±Ρ‹ΡΡ‚Ρ€ΡƒΡŽ ΠΈ Π»Π΅Π³ΠΊΡƒΡŽ настройку. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ приятный ΠΎΠΏΡ‹Ρ‚ просмотра вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

FullPage

Как слСдуСт ΠΈΠ· названия, FullPage β€” это инструмСнт, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-сайты с полноэкранной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ², одностраничных сайтов. Если это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Ρƒ вас интСрСс, этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery β€” ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, FullPage ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ совмСстим со всСми популярными устройствами, поэтому ваш сайт отобраТаСтся Π½Π° всСх экранах с ΠΊΡ€ΠΈΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π΅Ρ‚ΠΊΠΎΡΡ‚ΡŒΡŽ. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ, ΠΏΠ»Π°Π²Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, прСвосходная Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π‘ FullPage созданиС полноэкранного одностраничного Π²Π΅Π±-сайта происходит Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. ΠΠ°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ созданиС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° с нуля Π² наши Π΄Π½ΠΈ каТСтся старомодным.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ слайдСр

ИспользованиС слайдСра для прСдставлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для любого Π²Π΅Π±-сайта ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³Π°. Tiny Slider β€” это Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° Owl Carousel, которая сразу ΠΆΠ΅ заставит вас Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. НСкоторыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π»Π΅Π½ΠΈΠ²ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ, автовоспроизвСдСниС, Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊ касанию / ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Π½ΠΈΡŽ, Π·Π°Ρ†ΠΈΠΊΠ»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ отступы ΠΏΠΎ краям, ΠΈ это лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ…. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Ρ‚ΠΎΡ‡Π½ΠΎ соотвСтствовал Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ, Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. ВсС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, установка ΠΈ другая информация доступны Π½Π° страницС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΡΡƒΡ‚ΡŒ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ с ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Π½ΠΎΠ³ΠΈ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Π—Π²Π΅Π·Π΄Π½Ρ‹ΠΉ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ Bootstrap

Π£ Bootstrap Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅; Π½Π΅ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ это Π²Π΅Π΄ΡƒΡ‰ΠΈΠΉ интСрфСйсный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π£ вас Π΅ΡΡ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΏΠ°Π½Π΅Π»ΠΈ администратора, Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅ΠΌΡ‹ WordPress, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bootstrap, ΠΈ Π² этом пространствС сущСствуСт мноТСство ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery. Как Π±Ρ‹ Π½Π°ΠΌ Π½ΠΈ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… всС здСсь (ΠΌΡ‹ сдСлаСм это Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ), Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ сосрСдоточим Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… эффСктах jQuery ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ оТивят ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ Π·Π²Π΅Π·Π΄Π½ΠΎΠ³ΠΎ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ просты, хотя Bootstrap Star Ratings ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ большим количСством Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΏΡƒΡ‚Π°Ρ‚ΡŒ Π΅Π³ΠΎ с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ! Плагин ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌΠΈ Π΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ Π·Π²Π΅Π·Π΄Π°ΠΌΠΈ.

Π­Ρ‚ΠΎ настраиваСмый ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· сущСствСнных Π΄ΠΈΡ„Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΠ°Ρ‚ΠΎΡ€ΠΎΠ² ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ любой ΠΈΠ· Π²Π°ΡˆΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для отобраТСния Π²Π°ΡˆΠΈΡ… Π·Π²Π΅Π·Π΄Π½Ρ‹Ρ… символов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ FontAwesome). Π•Π³ΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊ вашим собствСнным стилям (Ρ‚Π΅ΠΌΠ°ΠΌ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅. Π’ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ объяснСния Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ эти Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ Bootstrap Star Rating Π² свои ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Shepherd

Богласно соврСмСнному пониманию бСспрСпятствСнного взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, ΠΎΠ½Π±ΠΎΡ€Π΄ΠΈΠ½Π³ стал популярной Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠ΅ΠΉ для обСспСчСния Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ знакомились с вашим ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ посрСдством рСгистрации. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΡ€ΠΎΡ‰Π΅ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ рСгистрируСтся, процСсс ΠΎΠ½Π±ΠΎΡ€Π΄ΠΈΠ½Π³Π° становится ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ успСха вашСго прилоТСния ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ всС Π΅Ρ‰Π΅ удаСтся ΡΠΏΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ прСимущСствах создания ΠΎΠ½Π±ΠΎΡ€Π΄ΠΈΠ½Π³Π°, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΆΠ΅ добились большого успСха Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² являСтся ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ Shopify, которая Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Ρ€Π°ΠΌΠΊΠΈ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΎΠ½Π±ΠΎΡ€Π΄ΠΈΠ½Π³Π° ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΠ±ΡƒΡ‡Π°Ρ‚ΡŒ своих ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΌΡ‹ подписались, Ρ‡Π°Ρ‰Π΅ всСго Ρ‡Π΅Ρ€Π΅Π· элСктронный ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³.

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Inbox ΠΈ Peach, ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π»ΠΈ свои ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ экраны ΠΈ добились Π±ΠΎΠ»ΡŒΡˆΠΈΡ… успСхов Π² объяснСнии своих ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΅Ρ‰Π΅ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ настройку пароля своСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи. Π’Π΅ΠΏΠ΅Ρ€ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Shepherd (ΠΎΡ‚ HubSpot, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… ΠΌΠΈΡ€ΠΎΠ²Ρ‹Ρ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ) любой ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ процСсс Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ для своСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ прилоТСния. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ соотносится с вашим Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ΠΌ. ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, счастливого знакомства!

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Tingle.js

ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° (Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°, экранныС увСдомлСния) ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΡ†Π²Π΅Ρ‚Π°Ρ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅Π±-ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡ‰ΡƒΡ‚ Π½ΠΎΠ²Ρ‹Π΅ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ способы взаимодСйствия с Π²Π΅Π±-сайтами, Π½ΠΎ это Π½Π΅ СдинствСнный Ρ€Ρ‹Π½ΠΎΡ‡Π½Ρ‹ΠΉ Π²ΠΈΠ΄ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ВСхничСски ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ. НапримСр, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π° Facebook, появляСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ (модальноС) ΠΈ просит вас ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ своС дСйствиС.

МногиС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΠ·Π±Π΅Π³Π°Π»ΠΈ использования ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ считали, Ρ‡Ρ‚ΠΎ это ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Но Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ примСнСнная модальная функция ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ваш UX! Tingle.js ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅. Он соотвСтствуСт ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ стандартам Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ обСспСчиваСт Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ модального ΠΎΠΊΠ½Π° ΠΊ Π΅Π³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Ρ€ΠΈΠ³ΡƒΠ΅Ρ‚, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Tingle.js ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ динамичСский ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ фактичСского модального ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ Ρ„ΠΎΡ€ΠΌ, взаимодСйствиС с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π²ΠΎ внСшнСм Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅. Π›ΡŽΠ±ΠΎΠΉ, Ρƒ ΠΊΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с JavaScript, ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ для WordPress-Π±Π»ΠΎΠ³Π΅Ρ€ΠΎΠ².

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Barba.js

Π£ΠΆΠ΅ Π΄Π΅ΡΡΡ‚ΡŒ Π»Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ AJAX для создания спокойного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ способы ΡΠ²ΡΠ·Π°Ρ‚ΡŒ эту Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΡ‚Ρ€Π΅Π±Π»Π΅Π½ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Barba.js β€” это эффСкт jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Π΅Π±-сайту эффСкт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ страницами. Π’Ρ‹, вСроятно, просматривали Π²Π΅Π±-сайт Ρ€Π°Π½ΡŒΡˆΠ΅, Π³Π΄Π΅ Π²Π΅Π±-сайт ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π» стрСлки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ сторонам страницы, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π°ΡΒ» ΠΈ Β«Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ запись».

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ эти стрСлки ΡΠ²Π»ΡΡŽΡ‚ΡΡ ТСсткими элСмСнтами Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ страницу ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ Π½ΠΎΠ²ΡƒΡŽ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π° Π½ΠΈΡ… Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅, поэтому Barba.js Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС, Π½ΠΎ удаляСт Ρ‡Π°ΡΡ‚ΡŒ, Π³Π΄Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ снова ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ страницу, ΠΈ вмСсто этого, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ PJAX, ΠΎΠ½ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ страницу, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса добавляСт Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ ΠΈ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π² блиТайшиС Π³ΠΎΠ΄Ρ‹. Barba ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ систСму ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ для ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ страниц, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π΅ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Π Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ SVG-слайдСр

Π‘Π»Π°ΠΉΠ΄Π΅Ρ€Ρ‹ β€” Π² частности, jQuery one β€” Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΈ снова ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, ΠΏΠΎΠΊΠ° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ слайдСров jQuery Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ соврСмСнныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΈ удобство Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Ρ‚Π° самая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°. Π Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ слайдСр SVG ΠΊΠ°ΠΊ Π±Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ шаги Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ SVG clipPath ΠΈ эффСкты маскирования, эффСкт Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ скольТСния прСдставляСт слайдСр, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ΄ΠΎΠ±Π΅Π½ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Π½ΠΎ ΠΈ быстрСС, Ρ‡Π΅ΠΌ ΠΊΡ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ³. ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ сСбС. ИзлишнС Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π²ΠΎ всСм этом сцСнарии. Radial, Π½Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ эффСктами, с Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ станСт Ρ‡Π°ΡΡ‚ΡŒΡŽ вашСго Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ процСсса проСктирования, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ создаСтС Π½ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ для своих ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ соврСмСнныС инструмСнты Π² вашСм распоряТСнии.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Turntable.js

Turntable β€” это Π½Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ слайдСр jQuery, ΠΈΠ½Π°Ρ‡Π΅ ΠΌΡ‹ Π±Ρ‹ Π΅Π³ΠΎ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ! Turntable β€” это ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для создания эффСктов Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° для Π²Π°ΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ Π²Π΅Π±-сайт Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Turntable Π½Π°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΅Π³ΠΎ «эффСктом Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊΠ°Β», ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ряду ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ сходство ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊΠΎΠΌ. Π΄ΠΈΠ·Π°ΠΉΠ½. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π΅ myTurntable ID ΠΈ классС проигрыватСля ΠΊΠ°ΠΊ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты HTML li. Turntable.js разбСрСтся с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ. Π’Π°ΠΊΠΆΠ΅ трСбуСтся Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π³Π»Π°Π΄ΠΊΠΈΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Trix

WYSIWYG, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ ΠΈ ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π±Ρ‹Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π²ΠΎ всСх вСрсиях соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎ создаСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ хотят ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ тСкста Π² своих прилоТСниях. Trix Π΄Π΅Π»Π°Π΅Ρ‚ свою Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ WYSIWYG ΠΈ дСлая ΡƒΠΏΠΎΡ€ Π½Π° Ρ‚Π°ΠΊΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠ°ΠΊ написаниС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (Π±Π»ΠΎΠ³ΠΈ, ΡΡ‚Π°Ρ‚ΡŒΠΈ, исслСдования, Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ!), составлСниС списков, написаниС ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… сообщСний ΠΈ ΠΎΠ±Ρ‰ΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ². Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Bold, Italic, Strike, Link, Quote, Lists ΠΈ Undo, Π½ΠΎ составлСнныС Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π²Ρ‹ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π° письмС, Π° Π½Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ.

Trix автоматичСски ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ„Π°ΠΉΠ»Ρ‹, пСрСтаскиваСмыС ΠΈΠ»ΠΈ вставляСмыС Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΈ вставляСт ΠΈΡ… ΠΊΠ°ΠΊ влоТСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. КаТдоС Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ считаСтся ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‰ΠΈΠΌ, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ сохранитС Π΅Π³ΠΎ ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎ ΠΈ Π½Π΅ прСдоставитС Trix постоянный URL-адрСс. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Trix ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Π»ΡƒΡ‡ΡˆΠ΅ всСго Π½Π°Ρ‡Π°Ρ‚ΡŒ с Trix с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ способы Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ вашСго собствСнного прилоТСния. Π‘ΡƒΠ΄ΡƒΡ‰Π΅Π΅ тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ выглядит довольно Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ благодаря людям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°Π΄ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ, ΠΊΠ°ΠΊ Trix!

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Push.js

ΠšΠΎΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ элСктронный ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с push-увСдомлСниями ΠΈ ΠΎΠΏΠΎΠ²Π΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎ Π½ΠΎΠ²ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ ΠΈ обновлСниях прямо Π½Π° ΠΈΡ… Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС ΠΈΡ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ²! Π­Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ смотрим, ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, push-увСдомлСния станут Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ динамичСский ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ навСрняка Π·Π°Ρ…Π²Π°Ρ‚ΠΈΡ‚ сфСру элСктронного ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π° ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ Π½ΠΎΠ²Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ. Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-сайтов ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ push-увСдомлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ своих посСтитСлСй ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° послСдний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π­Ρ‚ΠΎ простоС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, хотят Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° увСдомлСния Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, ΠΈ Π΄Π°Π΅Ρ‚ ΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΠΈΡ‚ΡŒ. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹ смоТСтС ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ людям Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³Ρ‡Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ваш послСдний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Push.js внСдряСт эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ нСпосрСдствСнно Π½Π° ваши Π²Π΅Π±-сайты ΠΈ Π² прилоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery. Π’Π°ΠΌ всС Π΅Ρ‰Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для настройки Π²Π°ΡˆΠΈΡ… сообщСний, Π½ΠΎ это ΠΏΠΎΠ»Π΄Π΅Π»Π° послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с push-увСдомлСниями. НСизбСТно ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ сайты БМИ пСрСходят Π½Π° Ρ‚Π°ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ взаимодСйствия.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Plyr

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅, Plyr β€” это Π»Π΅Π³ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для встраивания Π²ΠΈΠ΄Π΅ΠΎ для Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° YouTube ΠΈ Vimeo. ИмСя Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ всСго 10 ΠšΠ‘, Plyr Π½Π΅ Ρ‚Π°ΠΊ сильно повлияСт Π½Π° Π²Π°ΡˆΡƒ Π²Π΅Π±-ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ ΠΎΡ‚ просмотра Π²Π°ΡˆΠΈΡ… страниц с большим количСством Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ИмСя Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Plyr ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ соврСмСнныС Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π½ΠΎ ΠΈ Π»ΡŽΠ±Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ всСго, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅ ΠΎΡ‚ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ€Π°, с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

АнимированныС эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° страницы Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ·ΡƒΡ‡Π°ΡŽΡ‚ Π½ΠΎΠ²Ρ‹Π΅ способы использования CSS ΠΈ JavaScript для создания ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. АнимированныС эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° β€” ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π΅Ρ… Ρ‚Π΅Ρ…Π½ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΌΠ΅Ρ‚Π°ΡŽΡ‚ с Π½ΠΎΠ³ ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…, Ρ‚Π°ΠΊ ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠšΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… конструктивных особСнностСй для своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΈ это ΠΈΠΌΠ΅Π΅Ρ‚ смысл. Π’ соврСмСнном ΠΌΠΈΡ€Π΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π’Π°ΠΊΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ эффСкты, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² памяти ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π³ΠΎΡ€Π°Π·Π΄ΠΎ дольшС. Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Π»Π΅Π³Ρ‡Π΅ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Π΅ΠΌ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ тысячу Ρ€Π°Π·.

Π­Ρ‚ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹Π΅ эффСкты Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹, которая ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ Π²Ρ‹Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ содСрТимого. Но с нСбольшой ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ любой ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ эти эффСкты Π² Π±Π΅ΡΡˆΠΎΠ²Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ. Π­Ρ‚ΠΎ срабатываСт всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ страницу ΠΈΠ»ΠΈ запускаСт Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π²Ρ‹Π·ΠΎΠ². Π§Ρ‚ΠΎ интСрСсно, для достиТСния этого Π·Π°Π±Π°Π²Π½ΠΎΠ³ΠΎ эффСкта ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ всСго нСсколько строк ΠΊΠΎΠ΄Π°, ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ понадобились Ρ€Π°Π½ΡŒΡˆΠ΅.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Mark.js

ΠœΠ°Π»ΠΎΠ²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ Google Π½Π°Ρ‡Π½Π΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π½Π° страницах Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² поиска. Но Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ Π³ΠΎΠ΄Ρƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΡˆΠΈΠ»ΠΈ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Бюда входят ΠΌΠ΅Π΄ΠΈΠ°- ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚-сайты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Π΅ списки Π΄Π°Π½Π½Ρ‹Ρ…, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ поиск. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° стандартных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ поиска Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π°ΡŽΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹. Напротив, ΠΎΠ½ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ фактичСскиС Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅. Π’Ρ‹ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ΡΡŒ Π² ситуациях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹. НапримСр, Ρƒ вас 5 страниц, Π½ΠΎ Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌΡƒ слову, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ искали.

Π’ΠΎΡ‚ Π³Π΄Π΅ Mark.js ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊ любой страницС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π³Π΄Π΅ функция поиска Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ°. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ автоматичСски выдСляСт искомыС ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π»ΠΈΠ±ΠΎ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π»ΠΈΠ±ΠΎ послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ поиска. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с содСрТимым сообщСний Π² Π±Π»ΠΎΠ³Π°Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Π½Π°Π±ΠΎΡ€Π°ΠΌΠΈ динамичСских Π΄Π°Π½Π½Ρ‹Ρ….

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Balance Text

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π±Π΅Π· обоснования ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π³Π»Π°Π·Π°. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ использованиС «выравнивания» для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π΅ всСгда являСтся Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, создавая ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слишком Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ, особСнно Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Π₯отя Balance Text пытаСтся Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ. Π­Ρ‚ΠΎ обСспСчит Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½Ρ‹ΠΉ баланс всСго тСкста ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ ΠΈΠ· Π°Π±Π·Π°Ρ†Π΅Π². ΠŸΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с дСмонстрациСй, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π²Ρ‹ΡˆΠ΅, ΠΈ Π΄Π²Π°ΠΆΠ΄Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Ρ‚ΠΈΠΏ эффСкта jQuery. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ для всСх, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для вас. (Π§Ρ‚ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ‚ мСсто Π±Ρ‹Ρ‚ΡŒ!)

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Filterizr

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ свою ΠΌΠ°Π»Π΅Π½ΡŒΠΊΡƒΡŽ ΠΈΠΌΠΏΠ΅Ρ€ΠΈΡŽ Π² Instagram? Filterizr ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ эту ΠΌΠ΅Ρ‡Ρ‚Ρƒ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ! Π­Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠ°ΠΏΠΊΠ°ΠΌ вашСй Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ красивыС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ графичСскиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Photoshop ΠΈ Illustrator. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для удобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Bricks.js

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊΠ»Π°Π΄ΠΊΠΈ (сСтки) Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ! ΠœΡ‹ ΠΆΠΈΠ²Π΅ΠΌ Π² эпоху Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Тизнь. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Bootstrap для создания ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки Π»Π΅Π³ΠΊΠΎ. Но ΠΊΠ°ΠΊ часто ваши ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ хотят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с Bootstrap? Bricks.js β€” это Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΊΠΈΡ€ΠΏΠΈΡ‡Π½ΠΎΠΉ ΠΊΠ»Π°Π΄ΠΊΠΈ. Π­Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π³Π°Π»Π΅Ρ€Π΅ΠΈ, ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹, Π³Π΄Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… сСтках с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π½Π° Π½ΠΈΡ…. АвтоматичСский Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ сСтки позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ количСство Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ². ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ Π·Π° сСкунду.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ

Π’Ρ‹Π±ΠΎΡ€ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ jQuery для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… эффСктов Π²Π΅Π±-сайта

jQuery являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ JavaScript ΠΏΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ. Π‘Ρ€Π΅Π΄ΠΈ Π½ΠΈΡ… Π΅Π³ΠΎ эффСктивная Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Он способСн Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π° Π²Π΅Π±-сайт, Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, доступ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ осущСствляСтся с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π²Π΅Π±-сайта. ΠœΡ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠ°ΡΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ повСрхности Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ. ΠœΡ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ сосрСдоточСны Π½Π° ΠΈΠ΄Π΅Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… эффСктов. Π­Ρ‚ΠΈ эффСкты Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ, ΡƒΡΠΈΠ»ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ прСдоставляСтС посСтитСлям вашСго Π²Π΅Π±-сайта. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всСгда Π΅ΡΡ‚ΡŒ возмоТности для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ со своими Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ jQuery. ΠœΡ‹ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ рассмотрим ваши прСдлоТСния.

Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚Π΅ Π²Π΅Π±-сайт ΠΈ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΏΡƒΡ‚ΡŒ? Π’ΠΎΡ‚ Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Bootstrap 5, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ послуТат основой для любого Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΎΡ‚ простого Π±Π»ΠΎΠ³Π° Π΄ΠΎ Π²Π΅Π±-сайта элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ.

Π‘Ρ‹Π»Π° Π»ΠΈ эта ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?

ДаНСт

10 ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery

jQuery ΠΌΠΎΠΆΠ΅Ρ‚ практичСски всС, ΠΎ Ρ‡Π΅ΠΌ Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, это творчСскоС Π²ΠΎΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ простой ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный API. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ подСлимся с Π²Π°ΠΌΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ способами использования jQuery для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ элСмСнтов Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π’Ρ‹ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Ρ‚Π΅ ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… интСрСсных ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ…, руководствах ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΊΠ°ΠΆΡƒΡ‚ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ эффСкты Π½Π° Π²Π°ΡˆΠΈΡ… собствСнных Π²Π΅Π±-сайтах ΠΈ ​​в Π²Π΅Π±-прилоТСниях.

1. Π­Ρ„Ρ„Π΅ΠΊΡ‚ клубящСгося Π΄Ρ‹ΠΌΠ° Π² jQuery

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ голландского Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π“Π°ΠΉΠΈ ΠšΠ΅ΡΡΠ»Π΅Ρ€ дСмонстрируСт Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт ΠΌΡƒΠ»ΡŒΡ‚ΡΡˆΠ½ΠΎΠ³ΠΎ Π΄Ρ‹ΠΌΠ°, исходящСго ΠΈΠ· Ρ„Π°Π±Ρ€ΠΈΡ‡Π½Ρ‹Ρ… Π΄Ρ‹ΠΌΠΎΠ²Ρ‹Ρ… Ρ‚Ρ€ΡƒΠ±. ΠšΠ΅ΡΡΠ»Π΅Ρ€ ΠΏΡ€Π΅Π΄ΡƒΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прСдоставляСт настраиваСмый ΠΏΠ»Π°Π³ΠΈΠ½ jQuery с инструкциями, основанными Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π΅Π³ΠΎ сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для своСго Π²Π΅Π±-сайта. Живая дСмонстрация: эффСкт Π΄Ρ‹ΠΌΠ°

2. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΊΠΈ

Бэм Π”Π°Π½Π½ ΠΈΠ· дуэта Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Build Internet написал руководство ΠΏΠΎ созданию Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ° с использованиСм ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ PNG. Π’ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ популярный ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Easing, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΉ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, ΠΈ функция JavaScript setTimeout() для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ событий. Живая дСмонстрация: анимированная ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΊΠ°

3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ рСалистичного эффСкта навСдСния

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты изобраТСния. Π’ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ прСдставлСны ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ Π²Π²Π΅Ρ€Ρ…. Π’ ΠΆΠΈΠ²ΠΎΠΉ дСмонстрации эффСкта ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ отраТСния ΠΈ Ρ‚Π΅Π½ΠΈ Π²Π½ΠΈΠ·Ρƒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ поднимаСтся; ΠΎΡ‚ΡΡŽΠ΄Π° «рСалистичный» Π² Π½Π°Π·Π²Π°Π½ΠΈΠΈ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ.

Живая дСмонстрация: рСалистичный эффСкт навСдСния

4. Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΠΈ сайта youlove.us дСлятся своим ΠΊΠΎΠ΄ΠΎΠΌ (ΠΈ пояснСниСм) для создания бСсшовного Ρ„ΠΎΠ½Π° CSS с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ; ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² шапкС сайта. Π‘ΠΊΡ€ΠΈΠΏΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ зависит ΠΎΡ‚ систСмного Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ; анимация начинаСтся Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, посСщаСтС Π»ΠΈ Π²Ρ‹ сайт Π½ΠΎΡ‡ΡŒΡŽ ΠΈΠ»ΠΈ ΡƒΡ‚Ρ€ΠΎΠΌ, приятноС прикосновСниС. ДСмонстрация Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ: youlove.us (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-страницы)

5. НСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Glimmer

Glimmer, инструмСнт для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ JavaScript, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery, ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΆΠΈΠ²Ρ‹Ρ… дСмонстраций Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery. ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. НапримСр, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Glimmer Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ эффСктный ΠΈ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠΉΡΡ Π±Π°Π½Π½Π΅Ρ€ для своСго Π²Π΅Π±-сайта. Π–ΠΈΠ²Ρ‹Π΅ дСмонстрации: ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Freestyle, ΠΎΠ±Ρ€Π°Π·Π΅Ρ† ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Fade Text

6. jQuery Blend

jQuery Blend β€” это ΠΏΠ»Π°Π³ΠΈΠ½ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS. Π’ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ удСляСтся ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ прогрСссивноС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ JavaScript ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΌΠΎΠ³Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с вашим интСрфСйсом, хотя ΠΈ Π±Π΅Π· эффСктов Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Живая дСмонстрация: навигация ΠΏΠΎ Π²Π΅Π±-сайту с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ

7. Π€ΠΎΠ½ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ параллакса

Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ пособии ΠΏΠΎ jQuery Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ параллакса, Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ популяризированный Π² Π²Π΅Π±-интСрфСйсах с использованиСм Flash. Π’Π΅Ρ…Π½ΠΈΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя элСмСнты div с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями CSS. Для Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ параллаксной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ трСбуСтся ΠΏΠ»Π°Π³ΠΈΠ½ scrollTo ΠΎΡ‚ аргСнтинского Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈ программиста ΠΈΠ³Ρ€ Ариэля ЀлСслСра.

Живая дСмонстрация: ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΎΠ±Π»Π°ΠΊΠ°

8. ΠŸΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ эффСкт Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π΄Π²Π΅Ρ€ΠΈ

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ КСвин Π›ΡŒΡŽ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΈΠΌ создатСлям Π²Π΅Π±-сайтов, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ раздСляСтся Π½Π° Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ части, ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡΡΡŒ ΠΊ ΡƒΠ³Π»Π°ΠΌ , ΠΈ раскрывая Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. Π­Ρ‚ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт, подходящий для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Живая дСмонстрация: эффСкт Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π΄Π²Π΅Ρ€ΠΈ  

9. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π» Π½Π° двиТСния ΠΌΡ‹ΡˆΠΈ

  ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°: По ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ Π½Π° 16 апрСля 2012 Π³. этот рСсурс большС Π½Π΅ сущСствуСт, поэтому ссылка Π±Ρ‹Π»Π° ΡƒΠ΄Π°Π»Π΅Π½Π°. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ jQuery Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° двиТСния ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.