ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ div Π±Π»ΠΎΠΊ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ?

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. 20130710205758644. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-20130710205758644. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 20130710205758644. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ
1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS?
2. Бвойства ΠΈ значСния overflow
3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS
4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ вопрос создания Π±Π»ΠΎΠΊΠ° (div) фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ срСдствами CSS. Π—Π° это ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ свойство overflow.

О ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΌ свойствС overflow

Бвойство overflow ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ содСрТания Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта. МоТно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ помСщаСтся ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ°.

Код CSS

Бвойства ΠΈ значСния overflow

Рассмотри ΠΏΡ€ΠΈΠΌΠ΅Ρ€ класса CSS. Π’ width ΠΈ height устанавливаСм Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π±Π»ΠΎΠΊΠ° (Π·Π° Π½ΠΈΡ… Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ содСрТимоС Π±Π»ΠΎΠΊΠ°), Π° свойством overflow: auto; Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² случаС надобности

Код CSS

ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΏΠΎ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅. Для этого ΠΊΠ°ΠΆΠ΄ΠΎΠΉ оси: overflow-y: scroll; (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒ) overflow-x: scroll; (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒ) ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ scroll, ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°.

Код HTML и CSS

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Код HTML и CSS

Одно ΠΈΠ· свойств overflow ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Ρ‚ΠΎΠ³Π΄Π° останСтся ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ оси, Ρ‡Π΅Π³ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ достаточно.
ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ скрипта Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅.

ДСмонстрация Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ исходники
МоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ оси. Для этого соотвСтствСнно ΡƒΠ±Π΅Ρ€ΠΈΡ‚Π΅ строку Π»ΠΈΠ±ΠΎ с overflow-x, Π»ΠΈΠ±ΠΎ с overflow-y.

Бпасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! НадСюсь ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° ΠΏΠΎΠ»Π΅Π·Π½Π°!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ΠžΠ±Π·ΠΎΡ€ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ скроллинга

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

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. . ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

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

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ спСцифичСских ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² скроллинга

Π’ CSS сущСствуСт нСсколько простых стандартных эффСктов скроллинга, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… соврСмСнными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΈΡ… примСнСния ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ особСнныС Π½ΡƒΠΆΠ΄Ρ‹ Π½Π΅ΠΊΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

▍CSS-свойство position: sticky

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. image loader. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Π‘ΠΈΠ½ΠΈΠΉ элСмСнт «упираСтся» Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ Π½Π΅ прокручиваСтся вмСстС с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ элСмСнтами

Π’ΠΎΡ‚ дСмонстрация Ρ‚Π°ΠΊΠΎΠ³ΠΎ скроллинга.

▍ЭффСкт параллакса

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

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. image loader. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса: элСмСнты двиТутся с Ρ€Π°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ.

Π’ΠΎΡ‚ дСмонстрация эффСкта параллакса.

β–ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° с привязкой ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ

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

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. image loader. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

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

Π’ΠΎΡ‚ дСмонстрация Ρ€Π°Π±ΠΎΡ‚Ρ‹ скроллинга с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ привязки.

β–ΠŸΠ»Π°Π²Π½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°

ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ скроллинг поддСрТиваСтся срСдствами Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы Π΄ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° с использованиСм ΠΌΠ΅Ρ‚ΠΎΠ΄Π° window.scrollTo() Π² JavaScript, ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ CSS-свойства scroll-behavior. Π’ настоящСС врСмя для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ скроллинга со сглаТиваниСм Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ колСса ΠΌΡ‹ΡˆΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Но ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ‚Π°ΠΊΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΈΡ… Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ взаимодСйствиС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ тСхнологиями скроллинга. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, использованиС ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ скроллинга β€” это Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всСгда Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя.

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ скроллинга ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния

β–Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ API Intersection Observer

API IntersectionObserver позволяСт с успСхом Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ, связанныС со скроллингом, Π² Ρ‚ΠΎΠΌ случаС, Ссли всё, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, β€” это Π·Π½Π°Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈ элСмСнт Π² области просмотра, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎ Ρ‚ΠΎΠΌ, какая ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‡Π°ΡΡ‚ΡŒ элСмСнта Π²ΠΈΠ΄ΠΈΠΌΠ°. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ API IntersectionObserver ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ инструмСнтом для запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰Π΅ΠΉ появлСниС элСмСнта Π½Π° экранС. Но, Π΄Π°ΠΆΠ΅ Ρ‚Π°ΠΊ, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ эффСкты ΠΎΡ‡Π΅Π½ΡŒ слоТно (хотя ΠΈ ΠΌΠΎΠΆΠ½ΠΎ) Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого API. НапримСр β€” это запуск Ρ€Π°Π·Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ Π² зависимости ΠΎΡ‚ направлСния двиТСния элСмСнта. Π­Ρ‚ΠΎΡ‚ API, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π² ситуации, Ссли ΠΏΡ€ΠΈ скроллингС Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° элСмСнт находится Π³Π΄Π΅-Ρ‚ΠΎ Π² сСрСдинС области просмотра, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, Π½Π΅ появляСтся Π² области просмотра ΠΈ Π½Π΅ исчСзаСт ΠΈΠ· Π½Π΅Ρ‘.

β–Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ события scroll

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для создания ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² скроллинга ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния

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

▍ScrollMagic

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ScrollMagic Π΄Π°Ρ‘Ρ‚ Π½Π°ΠΌ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ простой API, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ эффСкты ΠΏΡ€ΠΈ скроллингС. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ совмСстно с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ GSAP ΠΈ Velocity.js. ΠŸΡ€Π°Π²Π΄Π°, Π² послСдниС нСсколько Π»Π΅Ρ‚ эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° нСдостаточно Ρ…ΠΎΡ€ΠΎΡˆΠΎ поддСрТиваСтся. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»Π° создана Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ScrollScene.

▍ScrollScene

ScrollScene β€” это, Π² сущности, ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠ°, которая Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π° Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ удобство Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ScrollMagic ΠΈ (ΠΈΠ»ΠΈ) с API IntersectionObserver. Π—Π΄Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ собствСнная вСрсия ScrollMagic, которая отличаСтся Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Π’ΡƒΡ‚ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности, Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ проигрывания Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ GSAP.

▍ScrollTrigger

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ScrollTrigger β€” это ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ GreenSock-ΠΏΠ»Π°Π³ΠΈΠ½ для GSAP. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° отличаСтся большим Π½Π°Π±ΠΎΡ€ΠΎΠΌ возмоТностСй, Π΅Ρ‘ API каТСтся ΠΌΠ½Π΅ самым простым ΠΈΠ· API ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ для скроллинга. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эту Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, Π²Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ‚ΠΎ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ начинаСтся ΠΈ заканчиваСтся анимация скроллинга, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ всё Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ (WebGL, canvas, SVG, DOM), ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ элСмСнты Π½Π° врСмя выполнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΈΠΌ возмоТности Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, эту Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ GreenSock, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ Π΅Ρ‘ использованию ΠΌΠΎΠΆΠ½ΠΎ Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ°Ρ… GreenSock.

▍БиблиотСка, достойная упоминания: Locomotive Scroll

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ инструмСнтов

Π’ΠΎΡ‚ сравнСниС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ скроллинга.

API Intersection ObserverПлавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Π’ΠΎΡ‡ΠΊΠΈ привязки Π² CSSCSS-эффСкт параллаксаCSS-свойство position: sticky
Π—Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ элСмСнтов+
Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса+
Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈΒ±Β±
ИспользованиС ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊΒ±+
ДинамичСская пакСтная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° элСмСнтов+
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° эффСктов Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ скроллинга+++++
ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½Π° (Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ браузСрная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°)Β±Β±Β±+Β±
Полная свобода Π² Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌn/an/an/an/an/a
Π Π°Π±ΠΎΡ‚Π° с DOM, Canvas, WebGl, SVG+
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² элСмСнтов+++++
ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½Ρ‹ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ++++
Π Π°Π·Π»ΠΈΡ‡Π°Π΅Ρ‚ направлСния скроллинга±
ВСхнология, встроСнная Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€+++++

Π’ΠΎΡ‚ сравнСниС рассмотрСнных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ.

ScrollTriggerLocomotive ScrollScrollSceneScrollMagic
Π—Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ элСмСнтов+Β±++
Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса++++
Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ+Β±Β±Β±
ИспользованиС ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ+Β±Β±Β±
ДинамичСская пакСтная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° элСмСнтов++
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° эффСктов Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ скроллинга++++
ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½Π° (Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ браузСрная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°)+Β±++
Полная свобода Π² Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ+Β±++
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ+++
Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с DOM, Canvas, WebGl, SVG+Β±++
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² элСмСнтов+++Β±
ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½Ρ‹ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ+Β±Β±
Π Π°Π·Π»ΠΈΡ‡Π°Π΅Ρ‚ направлСния скроллинга+Β±++
ВСхнология, встроСнная Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€

Π˜Ρ‚ΠΎΠ³ΠΈ

Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особых ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² скроллинга, Π²Ρ€ΠΎΠ΄Π΅ закрСплСния элСмСнтов ΠΈ эффСкта параллакса, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно стандартных возмоТностСй CSS. По мСньшСй ΠΌΠ΅Ρ€Π΅ β€” это Ρ‚Π°ΠΊ ΠΏΡ€ΠΈ условии использования ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»ΠΎΠ² для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ возмоТности CSS Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚.

Π― ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, для настройки скроллинга, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ScrollTrigger. Она позволяСт Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ всСго, Π½Π° Ρ‡Ρ‚ΠΎ способСн чистый CSS, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ β€” ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π±Π΅Ρ€Ρ‘Ρ‚ Π½Π° сСбя Π·Π°Π±ΠΎΡ‚Ρƒ ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ вычислСний, Ρ‡Ρ‚ΠΎ позволяСт Ρ‚ΠΎΠΌΡƒ, ΠΊΡ‚ΠΎ Π΅Ρ‘ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚, просто Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ своими Π΄Π΅Π»Π°ΠΌΠΈ.

КакиС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈ настройкС скроллинга Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…?

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ становятся всС Π±ΠΎΠ»Π΅Π΅ популярными. ОсобСнно срСди мобильно ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… сайтов, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ высоты Π²Π΅Π±-страниц.

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. 42591 051400. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-42591 051400. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 42591 051400. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ПослС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚Π°ΠΊΠΈΡ… элСмСнтов я Π·Π°Ρ…ΠΎΡ‚Π΅Π» Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ минимального объСма ΠΊΠΎΠ΄Π° ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ, которая ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π½Π° всСх Ρ‚ΠΈΠΏΠ°Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… устройств.
Π‘Π½Π°Ρ‡Π°Π»Π° создадим ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ div Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

БущСствуСт Π΄Π²Π° способа ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эти div Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌΠΈ.

ΠœΠ΅Ρ‚ΠΎΠ΄ пустого пространства

Π’ΠΎΡ‚ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½. Никаких прСфиксов ΠΈ jQuery. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ использованиС overflow ΠΈ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ свойства.

ΠœΠ΅Ρ‚ΠΎΠ΄ Flexbox

Flexbox Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ эту Ρ€Π°Π±ΠΎΡ‚Ρƒ.

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ flex-wrap для достиТСния Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π½Π° основС flexbox Π»ΡƒΡ‡ΡˆΠ΅. Оно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² IE ΠΈ Edge.

Overflow ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°

Π’ iOS Π²Π΅Π±-страницы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ с ΠΈΠΌΠΏΡƒΠ»ΡŒΡΠΎΠΌ ускорСния. Если Π²Ρ‹ быстро протянСтС ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡƒΠ±Π΅Ρ€Π΅Ρ‚Π΅ ΠΏΠ°Π»Π΅Ρ†. Если Π²Ρ‹ достигнСтС Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ части страницы, ΠΎΠ½ Π° отскочит Π½Π°Π·Π°Π΄ ΠΎΡ‚ ΠΊΠΎΠ½Ρ†Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ встанСт Π½Π° мСсто.
К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это выглядит:

ΠŸΠΎΠ»ΠΎΡΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Но Ρ‡Ρ‚ΠΎ, Ссли ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ скроллинг? Π’Π°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π₯отя Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π° WebKit.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ становится всС Π±ΠΎΠ»Π΅Π΅ распространСнными.ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ эти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:ΠΎΠ½ΠΈ понадобятся Π²Π°ΠΌ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΊΠΎΠ΄ Π² ΠΌΠ΅Π΄ΠΈΠ°-запрос ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… устройств. И Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ Π±ΠΎΠ»ΠΈ с jQuery!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Бпособы добавлСния ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы Π² CSS ΠΈ JavaScript

НавСрняка Π²Ρ‹ посСщали страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ссылкС ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ. Π­Ρ‚ΠΎ красиво выглядит Π½Π° лэндингах (LandingPage, ΠΈΠ»ΠΈ посадочная страница), Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… пространство страницы Ρ€Π°Π·Π±ΠΈΡ‚ΠΎ Π½Π° части, ΠΈΠ»ΠΈ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ… с содСрТаниСм. Вакая ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° называСтся скроллингом (ΠΎΡ‚ Π°Π½Π³Π». scroll).

Однако, это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ красиво, Π½ΠΎ ΠΈ достаточно просто с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Если плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Ρ‚ΠΎ это свойство Π½Π°Π·Π½Π°Ρ‡Π°ΡŽΡ‚ для Π½Π΅Π³ΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π΅ΡΡ‚ΡŒ 5 ссылок Π²Π²Π΅Ρ€Ρ…Ρƒ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊ Π±Π»ΠΎΠΊΠ°ΠΌ тСкста ΠΈ ссылка со стрСлкой Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ для Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° Π½Π°Π²Π΅Ρ€Ρ… страницы. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ… для тСстов свойств ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² для ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ скроллинга страницы.

Π›ΠΎΠΆΠΊΠΎΠΉ дСгтя для этого свойства Π±ΡƒΠ΄Π΅Ρ‚ нСполная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π΅Π³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠ²Π° ΠΎΠ½Π° Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ ΠΈ Π½Π° caniuse.com.

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. scroll behavor support. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-scroll behavor support. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° scroll behavor support. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° свойства scroll-behavor Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ рассмотрим, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery ΠΈ JavaScript.

Π‘ΠΊΡ€ΠΎΠ»Π»ΠΈΠ½Π³ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery

Π‘Π°ΠΌ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ нСбольшим:

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π½Π° JavaScript

Π—Π΄Π΅ΡΡŒ Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ 3 Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ свой ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию плавности ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π½Ρ‹Ρ… JS-ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ².

РСшСниС 1. ΠœΠ΅Ρ‚ΠΎΠ΄ scrollIntoView()

Из Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π½Π° MDN ΡƒΠ·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ

ΠœΠ΅Ρ‚ΠΎΠ΄ Element.scrollIntoView() ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ родитСля элСмСнта, Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ этот элСмСнт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±Ρ‹Π» Π²Ρ‹Π·Π²Π°Π½ scrollIntoView() Π±Ρ‹Π» Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ css-свойству scroll-behavior: smooth для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΊ элСмСнту с Π½ΡƒΠΆΠ½Ρ‹ΠΌ id, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Π² Π²ΠΈΠ΄Π΅ Ρ…ΡΡˆ Π² ссылкС.

К соТалСнию, ΠΈ Ρ‚ΡƒΡ‚ Π½Π΅ обошлось Π±Π΅Π· «Π»ΠΎΠΆΠΊΠΈ дСгтя» Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Π”Π°Π²Π°ΠΉΡ‚Π΅ обратимся ΠΊ caniuse.com ΠΈ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ:

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. scrollIntoView support. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-scrollIntoView support. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° scrollIntoView support. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° свойства scrollIntoView Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

К соТалСнию, Π½ΡƒΠΆΠ½ΠΎΠ΅ Π½Π°ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства behavior: ‘smooth’ поддСрТиваСтся Π½Π΅ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° scrollIntoView() (ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅)).

РСшСниС 2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ window.scrollBy() для ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π’ΡƒΡ‚ всС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ свойства ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

Код JavaScript ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π° вашСй страницС Π½Π΅Ρ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈΠ»ΠΈ фиксированной шапки сайта (элСмСнт ), Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ‡Π°Ρ‰Π΅ всСго Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ссылки-якоря Π½Π° Ρ€Π°Π·Π΄Π΅Π»Ρ‹ страницы, поэтому пСрСмСнная offsetTop (смСщСниС свСрху) сначала Π·Π°Π΄Π°Π½Π° ΠΊΠ°ΠΊ 0.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π½Π° чистом CSS

Π”Π°Ρ‚Π° ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ: 2016-12-15

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. 100. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-100. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 100. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: ΡΡ‚Π°Ρ‚ΡŒΡ нашСго гостя, ΠŸΠΈΡ‚Π΅Ρ€Π° БизмСнса. ΠŸΠΈΡ‚Π΅Ρ€ – front-end Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π° сайтС Audience, Π³Π΄Π΅ ΠΎΠ½ Π»ΡŽΠ±ΠΈΡ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ стили Π½Π° SCSS. БСгодня ΠΎΠ½ Π½Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я Π½Π°Π·Ρ‹Π²Π°ΡŽ чСстным CSS Ρ‚Ρ€ΡŽΠΊΠΎΠΌ. Π’Π΅ΡΡŒ Π²Π΅Π± ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ строСниС. Π’Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ сайт, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ ΠΊΠ½ΠΈΠ³Ρƒ: слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, свСрху Π²Π½ΠΈΠ·. Но ΠΈΠ½ΠΎΠ³Π΄Π° хочСтся ΡƒΠΉΡ‚ΠΈ ΠΎΡ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡΡƒΠΌΠ°ΡΡˆΠ΅Π΄ΡˆΠ΅Π΅: ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ список. Или Π΅Ρ‰Π΅ Π±Π΅Π·ΡƒΠΌΠ½Π΅Π΅, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ сайт!

Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ, Ссли Π±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

К соТалСнию, Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Π’Π°ΠΊΠΎΠ³ΠΎ Π΄Π°ΠΆΠ΅ Π² ΠΏΠ»Π°Π½Π°Ρ… Π½Π΅Ρ‚ Π² CSS.

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. vmaster. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-vmaster. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° vmaster. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ, это Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ. ΠœΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ, Π° прСзСнтация – это довольно Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΡˆΡ‚ΡƒΠΊΠ°. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон Ρƒ слайдов составляСт 4:3 ΠΈΠ»ΠΈ 16:9. Из-Π·Π° этого Ρƒ нас Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ постоянная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ слайдами ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π²Π΅Π±-тСхнологиями. Под Β«ΠΌΡ‹Β» я имСю Π² Π²ΠΈΠ΄Ρƒ сСбя. Но Ρ‡Ρ‚ΠΎ я люблю, Ρ‚Π°ΠΊ это трудности.

Π”Ρ€ΡƒΠ³ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования

МнС Π² Π³ΠΎΠ»ΠΎΠ²Ρƒ ΠΏΡ€ΠΈΡˆΠ΅Π» ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ способ примСнСния. ИдСя Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ покупатСлям Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ всС Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ слайдС. ЕстСствСнно, ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² Π½Π΅ умСстился Π±Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Π½Π° Ρ‚Ρ€ΠΈ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, каТдая с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚Ρ€ΠΈ самых популярных Ρ‚ΠΎΠ²Π°Ρ€Π° Π²ΠΈΠ΄Π½Ρ‹ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, Π° ΠΊ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌ Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ Π»Π΅Π³ΠΊΠΈΠΉ доступ.

Бпособ бСз JavaScript

ВсС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° JS сущСствуСт масса способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ. НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΅ΡΡ‚ΡŒ Π½Π° CSS-Tricks. МнС стало интСрСсно, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ эту идСю Π½Π° чистом CSS. РСшСниС оказалось ΠΎΡ‡Π΅Π½ΡŒ простым:

создаСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с элСмСнтами;

ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π½Π° 90 градусов ΠΏΡ€ΠΎΡ‚ΠΈΠ² часовой стрСлки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ниТняя Π³Ρ€Π°Π½ΡŒ оказалась справа;

ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π½Π° своС мСсто.

Π¨Π°Π³ 1) создаСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π±Π»ΠΎΠΊ div с мноТСством Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ 300px ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Π² Π½Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ 8 элСмСнтов 100Ρ…100px. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅.

Высота ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° станСт ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. НиТС Β«ΡˆΠΈΡ€ΠΈΠ½Π°Β» ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ 300px:

И Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты:

Π¨Π°Π³ 2) ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. vmaster. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-vmaster. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° vmaster. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Волько Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° малСнькая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΠ»ΠΈΡΡŒ вмСстС с ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ.

Π¨Π°Π³ 3) Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π½Π° своС мСсто

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ элСмСнты Π½Π° своС мСсто? ΠŸΠΎΠ²Π΅Ρ€Π½ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS свойства transform.

Π¨Π°Π³ 4) фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Бмотрится всС Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

ΠœΡ‹ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π° Π² качСствС якоря Π·Π°Π΄Π°Π»ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΡƒΠ³ΠΎΠ», ΠΈΠ·-Π·Π° этого лСвая сторона ΡΠΌΠ΅ΡΡ‚ΠΈΠ»Π°ΡΡŒ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Если Π²Π°ΠΌ слоТно ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, просто ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΡ‚Π΅ ΠΏΠ°Π»Π΅Ρ† ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΡƒΠ³Π»Ρƒ страницы ΠΈ ΠΏΠΎΠ²Π΅Ρ€Π½ΠΈΡ‚Π΅ Π΅Π΅. Π’Ρ‹Ρ…ΠΎΠ΄: Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π΅Π΅ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства translate.

Π£ΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅. Но ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта всС Π΅Ρ‰Π΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚Π° ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ΡΡ ΠΈ с Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, Π·Π°Π΄Π°Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌΡƒ элСмСнту Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ margin со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ трансформировав всС элСмСнты, ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π‘Π°ΠΌΡ‹ΠΉ простой способ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я нашСл, это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ padding ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ, Ρ€Π°Π²Π½Ρ‹ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов, Ρ‚Π΅ΠΌ самым создав Π±ΡƒΡ„Π΅Ρ€Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ для элСмСнтов.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎ с ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами:

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ

Π― ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠ» ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ Π½Π° доступных ΠΌΠ½Π΅ устройствах.

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. 10. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-10. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 10. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ДСсктоп

Π’Π°ΠΊ ΠΊΠ°ΠΊ стилизация скроллбаров ΠΏΠΎΠΊΠ° Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Webkit/Blink Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π² Firefox ΠΈ IE показываСтся ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ сСрый скроллбар. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS ΠΈ ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ ΠΈΡ… Π²ΠΎΠΎΠ±Ρ‰Π΅, Π½ΠΎ это Ρ‚Π΅ΠΌΠ° для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ°.

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ колСса ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° дСсктопС. Но Ρƒ ΠΌΠΎΠ΅Π³ΠΎ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ° своС ΠΌΠ½Π΅Π½ΠΈΠ΅ Π½Π° этот счСт. На устройствах с Ρ‚Π°Ρ‡ скринами ΠΈ Ρ‚Π°Ρ‡ ΠΏΠ°Π΄Π°ΠΌΠΈ Π΄Π΅ΠΌΠΎ Π²Π΅Π΄Π΅Ρ‚ сСбя Ρ‚Π°ΠΊ, Π±ΡƒΠ΄Ρ‚ΠΎ div Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π»ΠΈ.

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства

Π― Π±Ρ‹Π» приятно ΡƒΠ΄ΠΈΠ²Π»Π΅Π½, ΠΊΠΎΠ³Π΄Π° ΡƒΠ·Π½Π°Π», Ρ‡Ρ‚ΠΎ Android ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π±Ρ‹Π» ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚, ΠΈ позволяСт Π²Π°ΠΌ ΡΠΊΡ€ΠΎΠ»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свайпов Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π²Π»Π΅Π²ΠΎ.

Π‘ iOS ΠΆΠ΅ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, всС Π½Π΅ Ρ‚Π°ΠΊ Π³Π»Π°Π΄ΠΊΠΎ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Π΅Π΄Π΅Ρ‚ сСбя Ρ‚Π°ΠΊ, Π±ΡƒΠ΄Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π»ΠΈ вовсС. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свайпы Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎ довольно странно. Overflow: hidden Π½Π΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

По Π΄Π°Π½Π½Ρ‹ΠΌ сайта Can I Use трансформации Π² CSS сСйчас ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρƒ 93%+ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ (Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π½ΠΎΡΠ±Ρ€ΡŒ 2016). Π’ΡƒΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ.

Π₯отя Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π΅. Π― протСстировал Π΅Π³ΠΎ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… устройствах, Π½ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π½Π° всСх ΠΈ Π½Π΅ Ρ‚Π°ΠΊ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Бамая большая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – сСнсорныС ΠΈΠ½ΠΏΡƒΡ‚Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π°Π»Π΅Π²ΠΎ ΠΈ Π½Π°ΠΏΡ€Π°Π²ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ свайпы Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·. Π’ качСствС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ сообщСниС Π½Π° сайтС с объяснСниСм, Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π²Π°ΠΌ придСтся ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒΡΡ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π΅Π³ΠΎ. И Π΄Π°ΠΆΠ΅ Ρ‚ΠΎΠ³Π΄Π° это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΡ‚ΡŒ Π·Π΄Ρ€Π°Π²ΠΎΠΌΡƒ смыслу. Π”Ρ€ΡƒΠ³ΠΎΠΉ способ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ – Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ сСнсорныС ΠΈΠ½ΠΏΡƒΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS Π½Π° устройствах, Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π»ΡƒΡ‡ΡˆΠ΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ всС ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° JS ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ нашСго CSS Ρ…Π°ΠΊΠ°.

Автор: Pieter Biesemans

РСдакция: Команда webformyself.

ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. vmaster. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС-vmaster. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ скроллинга Π½Π° сайтС. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° vmaster. 1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ overflow Π² CSS? 2. Бвойства ΠΈ значСния overflow 3. ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ установка Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² Π±Π»ΠΎΠΊΠ΅ CSS 4. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ div Π±Π»ΠΎΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *