Π Π°Π·Π½ΠΎΠ΅

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ эффСкт ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹: 30 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅Π±-сайтов с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ использования параллакс-скроллинга

09.09.2023

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

ЗаблуТдСния ΠΎ параллаксС Π½Π° сайтах β€” CMS Magazine

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ Π½Π° ΡΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… сайтах примСняСтся Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ часто, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ стал общСпринятым стандартом. Однако ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΎ ΡΠΈΡ… ΠΏΠΎΡ€ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ прСдставлСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ параллакс. Π ΠΎΠ± ΠŸΠ°Π»ΠΌΠ΅Ρ€ (Rob Palmer), Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ ΠΈΠ· Π’Π΅Π»ΠΈΠΊΠΎΠ±Ρ€ΠΈΡ‚Π°Π½ΠΈΠΈ, Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«The Troublesome Misconception of Parallax in Web DesignΒ» расставляСт Ρ‚ΠΎΡ‡ΠΊΠΈ Π² ΡΡ‚ΠΎΠΌ вопросС, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Π΅ΠΌ параллакс отличаСтся ΠΎΡ‚ Β«ΠΏΡ€ΠΎΡΡ‚ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° ΡΠ°ΠΉΡ‚Π΅Β».

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ β€” это ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ полоТСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ΄Π°Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΠΈ ΠΎΡ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚Π΅Π»Ρ.

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

Π”Π°Π²Π°ΠΉΡ‚Π΅ взглянСм Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ сайтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, ΠΊΠ°ΠΊ ΡƒΠ²Π΅Ρ€ΡΡŽΡ‚ ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, примСняСтся параллакс.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

Ни Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ся параллакс. Π—Π΄Π΅ΡΡŒ Π±Ρ‹Π»Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ имитация двиТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΈ Π΅Ρ‰Π΅ β€” скольТСниС Π΄Π²ΡƒΡ… плоскостСй Π΄Ρ€ΡƒΠ³ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π° Ρ€Π°Π·Π½ΠΎΠΉ скорости ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π­Ρ‚ΠΎ Π½Π΅ ΠΏΠ°Ρ€Π°Π»Π»Π°ΠΊΡ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ? Π”Π°Π²Π°ΠΉΡ‚Π΅ вСрнСмся ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ. Π“Π΄Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚? Π“Π΄Π΅ Π΄Π²Π΅ Π»ΠΈΠ½ΠΈΠΈ взгляда, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π² ΠΎΠ΄Π½Ρƒ? Π‘Π΅Π· выполнСния этих условий нСльзя Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ ΠΏΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ΅.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ?

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

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΠΉΡ‚Π΅ Π³ΠΎΠ»ΠΎΠ²Ρƒ Π²Π»Π΅Π²ΠΎ-Π²ΠΏΡ€Π°Π²ΠΎ, Π±ΡƒΠ΄Ρ‚ΠΎ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° (кстати, вмСсто Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚).

 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡŒΡ‚Π΅ устройство Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π² ΠΏΠΎΠ»Π΅ вашСго зрСния, ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ двиТСния. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стСну с Ρ€Π°Π·Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² зрСния, Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΡΠ²Π΅Ρ‰Π΅Π½ΠΈΠΈ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Β«Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡΒ» стСрСоскопичСскому Π·Ρ€Π΅Π½ΠΈΡŽ.

ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€ располоТСн Π±Π»ΠΈΠΆΠ΅ ΠΊ Π²Π°ΠΌ, Π° Π½Π΅ ΠΊ ΡΡ‚Π΅Π½Π΅, поэтому Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π²ΠΈΠΆΠ΅Ρ‚ся. Вакая оптичСская иллюзия Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹.

Если Π²Ρ‹ Π½Π°ΠΊΠ»ΠΎΠ½ΠΈΡ‚Π΅ Π³ΠΎΠ»ΠΎΠ²Ρƒ Π²Π»Π΅Π²ΠΎ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ, зафиксируСтС своё ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ ΠΏΡ€Π°Π²Ρ‹ΠΉ Π³Π»Π°Π·, Ρ‚ΠΎ ΡΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньший участок стСны. Π’Π°ΠΊ устроСно нашС бинокулярноС Π·Ρ€Π΅Π½ΠΈΠ΅: Π»Π΅Π²Ρ‹ΠΉ Π³Π»Π°Π· смотрит Π½Π° ΡΡ‚Π΅Π½Ρƒ ΠΏΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ острым ΡƒΠ³Π»ΠΎΠΌ, поэтому ΠΌΡ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΠΌ Β«ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹Β». Если ΠΆΠ΅, Π½Π΅ ΠΌΠ΅Π½ΡΡ полоТСния, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€Π°Π²Ρ‹ΠΉ Π³Π»Π°Π· ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π»Π΅Π²Ρ‹ΠΉ, Π²Ρ‹ ΡΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΆΠ΅, сколько Π²ΠΈΠ΄Π΅Π»ΠΈ Π΄ΠΎ ΡΡ‚ΠΎΠ³ΠΎ двумя Π³Π»Π°Π·Π°ΠΌΠΈ сразу.

Наш ΠΌΠΎΠ·Π³ распознаСт нСсоотвСтствия ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ видят наши Π³Π»Π°Π·Π° ΠΏΠΎ-ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Если ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ… ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Β«Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ»Π°Π½Β», Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ β€” Π½Π΅Ρ‚, ΠΌΠΎΠ·Π³ Π²Π΅Ρ€Π½Ρ‘Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠ±Π° Π³Π»Π°Π·Π°, Π½ΠΎ ΡƒΠΆΠ΅ Π±Π΅Π· ощущСния Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹.

На ΡΡ‚ΠΎΠΌ всё с Π±ΠΈΠ½ΠΎΠΊΡƒΠ»ΡΡ€Π½Ρ‹ΠΌ Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ. ПониманиС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π²Π°ΠΆΠ½ΠΎ для понимания истинного параллакса.

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ понадобится для достиТСния эффСкта параллакса Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ β€” это имитация стСрСопсиса ΠΈΠ· Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ. ΠœΡ‹ ΡƒΠΆΠ΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈ Π΄Π²Π΅ Π»ΠΈΠ½ΠΈΠΈ зрСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСкт параллакса Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π».

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊ ΡΠ°ΠΉΡ‚Ρƒ ΠΏΡ€Π΅Π΄ΡŠΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠ΅ трСбования:

  • НуТСн ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈΠ»ΠΈ Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° отсчСта.
  • НуТСн ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.
  • НуТСн Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ удалСнная Ρ‚ΠΎΡ‡ΠΊΠ° отсчСта.
  • И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, дСйствиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹ запускало Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅.

БоотвСтствСнно, Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… сайтах ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π²Ρ‹ΡˆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ параллакс. ΠŸΡƒΡ‚Π΅ΠΌ добавлСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ эффСкт параллакса Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠ±Ρ‹ΠΊΠ½ΠΎΠ²Π΅Π½Π½Ρ‹Ρ… двиТущихся Π±Π»ΠΎΠΊΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ сущСствСнно.

БлСстящий ΠΏΡ€ΠΈΠΌΠ΅Ρ€ параллакса β€” это parallax.js, Π³Π΄Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ курсора, Π½ΠΎ ΠΈ Β«Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽΡ‚Β» ΡƒΠ³ΠΎΠ» Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² с Π³ΠΈΡ€ΠΎΡΠΊΠΎΠΏΠΎΠΌ.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Ρƒ

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ-эффСкт сСгодня сравним ΠΏΠΎ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΠΈ, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, со ΡΠ»Π°ΠΉΠ΄Π΅Ρ€Π°ΠΌΠΈ-карусСлями ΠΏΡΡ‚ΡŒ Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄. Π₯отя стоит Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ послСдниС ΠΈ Π΄ΠΎ ΡΠΈΡ… ΠΏΠΎΡ€ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΡΠΊΡΠΏΠ»ΡƒΠ°Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

Если Π½Π΅ ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ Π² Ρ…ΠΎΠ»ΠΈΠ²Π°Ρ€Π½Ρ‹Π΅ Π±Ρ€ΡŽΠ·ΠΆΠ°Π½ΠΈΡ Π½Π° Ρ‚Π΅ΠΌΡƒ «это Ρ‚Ρ€Ρƒ-параллакс, Π° ΡΡ‚ΠΎ Π½Π΅Ρ‚Β», ΠΌΠΎΠΆΠ½ΠΎ вывСсти Ρ‚Π°ΠΊΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρƒ: ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π°ΠΊΡ ΠΈ Π½Π΅-параллаксовая анимация Π΄Π΅Π»Π°ΡŽΡ‚ сайт Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²Ρ‹ΠΌ.

Но Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ наш Π±Π»ΠΎΠ³ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π»ΡΡ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ Π²Ρ€ΠΎΠ΄Π΅ Β«ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это красиво», Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π²Ρ‹ΡˆΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ нСсколько тСзисов, ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰ΠΈΡ…β€¦

Π—Π°Ρ‡Π΅ΠΌ параллакс-эффСкт Π½ΡƒΠΆΠ΅Π½ Π²Π°ΡˆΠ΅ΠΌΡƒ сайту

На ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ самыС простыС.

  1. ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡ Π² Π΄Π΅ΠΉΡΡ‚Π²ΠΈΠΈ. Π›ΡŽΠ±ΠΎΠΉ ΠΌΠΎΡƒΡˆΠ΅Π½ всСгда ΠΊΡƒΠ΄Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Π±Π΅Π»Π΅Π½, Ρ‡Π΅ΠΌ статичная ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Ρ€Π΅Ρ„Π»Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Π°Ρˆ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, Ссли Π½Π° ΡΠ°ΠΉΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ двиТСтся.
  2. ВозмоТности для ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π°. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ β€” всСго лишь инструмСнт, Π½ΠΎ ΡΠΊΠΎΠ»ΡŒΠΊΠΎ Β«Ρ„ΠΈΡˆΠ΅ΠΊΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π½Π° Π΅Π³ΠΎ основС! Π’Π·ΡΡ‚ΡŒ хотя Π±Ρ‹ Π²ΠΎΡ‚ этот ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ ΠΏΠΎ Π·Ρ€Π΅Π»ΠΈΡ‰Π½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ Π² #SOTD. ΠžΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠ°Π΄Ρ€Ρ‹ снимали ΠΊΠ°ΠΌΠ΅Ρ€ΠΎΠΉ, Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½ΠΎΠΉ Π½Π° ΠΊΠ²Π°Π΄Ρ€ΠΎΠΊΠΎΠΏΡ‚Π΅Ρ€ β€” Π½ΠΎ Π½Π΅Ρ‚, это просто Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π°ΠΊΡ.
  3. БрСдство сторитСллинга. ΠœΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ говорят ΠΎ ΡΡ‚ΠΎΡ€ΠΈΡ‚Π΅Π»Π»ΠΈΠ½Π³Π΅, историях ΠΊΠ°ΠΊ ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ воздСйствия Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ посСтитСля. ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ «рассказа» ΠΊΠ°ΠΊ нСльзя Π»ΡƒΡ‡ΡˆΠ΅ дополняСтся Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎ ΡΠΊΡ€ΠΎΠ»Π»Ρƒ ΠΈ ΡΡ„Ρ„Π΅ΠΊΡ‚Π°ΠΌΠΈ параллакса Π² ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΡ….
  4. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ Β«Π·Π°Ρ†Π΅ΠΏΠΈΡ‚ΡŒΒ» ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ-эффСкт особСнно эффСктно смотрится Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ ΡΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½Π°Ρ… с Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½Ρ‹ΠΌ гироскопом. Наклоняя устройство, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ смСщСниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΠΈ ΠΎΡ‚ ΡΡ‚Π΅ΠΏΠ΅Π½ΠΈ удалСнности β€” Ρ‚Π΅ΠΌ самым создаСтся эффСкт Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Π°Ρ€Π½ΠΎ β€” Ρ‚Π°ΠΊΠΎΠΉ сайт ΠΏΠΎΠΊΠ°ΠΆΡƒΡ‚ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Π΄ΡƒΡ‚ Π½Π° Π½Π΅ΠΌ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  5. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π²Ρ‹ΠΏΠ°ΡΡ‚ΡŒ ΠΈΠ· Ρ‚Ρ€Π΅Π½Π΄Π°. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, совсСм Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ слСпо Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π·Π° ΠΌΠΎΠ΄ΠΎΠΉ, Π½ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΡƒΡ‚ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ позиция «я ΠΎΡΡ‚Π°ΡŽΡΡŒ Π½Π° ΠΌΠ΅ΡΡ‚Π΅, Ρ‚Π΅ΠΌ ΠΈ Π·Π½Π°Ρ‡ΠΈΠΌΒ» β€” Π·Π°Π²Π΅Π΄ΠΎΠΌΠΎ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹ΡˆΠ½Π°Ρ.

Π˜Ρ‚Π°ΠΊ, спасибо Π ΠΎΠ±Ρƒ Π·Π° ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ Π½Π°ΡƒΡ‡Π½Ρ‹Π΅ Π΄ΠΎΠ²ΠΎΠ΄Ρ‹. Π’Π΅, ΠΊΡ‚ΠΎ Ρ‡ΠΈΡ‚Π°Π» с ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°, ΠΌΠΎΠ³ΡƒΡ‚ напослСдок Ρ‚Π°ΠΏΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΈ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с Π³ΠΈΡ€ΠΎΡΠΊΠΎΠΏΠΎΠΌ πŸ˜‰

ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»: https://medium.com/p/2a55ad1459f7

Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹ΠΉ параллакс-эффСкт c ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° Codepen

ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° Telegram-ΠΊΠ°Π½Π°Π» Π±Π»ΠΎΠ³Π°

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ стили

Для Π½Π°Ρ‡Π°Π»Π° создаСм Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ

HTML

<div>
  <div>
    <div><img src="https://picsum.photos/1920/1081" alt=""/></div>
    <div>
      <div>Lorem ipsum</div>
      <div>Dolor sit amet, consectetur adipisicing elit.  Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div>
    </div>
  </div>
  <div>
    <div>
      <div>Lorem ipsum</div>
      <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div>
    </div>
    <div><img src="https://picsum.photos/1920/1082" alt=""/></div>
  </div>
  <div>
    <div><img src="https://picsum.photos/1920/1083" alt=""/></div>
    <div>
      <div>Lorem ipsum</div>
      <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div>
    </div>
  </div>
  <div>
    <div>
      <div>Lorem ipsum</div>
      <div>Dolor sit amet, consectetur adipisicing elit.
Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> <div><img src="https://picsum.photos/1920/1084" alt=""/></div> </div> <div> <div><img src="https://picsum.photos/1920/1085" alt=""/></div> <div> <div>Lorem ipsum</div> <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> </div> <div> <div> <div>Lorem ipsum</div> <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> <div><img src="https://picsum. photos/1920/1086" alt=""/></div> </div> <div> <div><img src="https://picsum.photos/1920/1087" alt=""/></div> <div> <div>Lorem ipsum</div> <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> </div> <div> <div> <div>Lorem ipsum</div> <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> <div><img src="https://picsum.photos/1920/1088" alt=""/></div> </div> <div> <div><img src="https://picsum.photos/1920/1089" alt=""/></div> <div> <div>Lorem ipsum</div> <div>Dolor sit amet, consectetur adipisicing elit. Soluta modi, distinctio quae magni molestias odit cum veritatis ipsam quas vero eveniet cupiditate fugiat animi, saepe tempora eaque delectus officia suscipit?</div> </div> </div> </div>

НазначаСм стили для Π±Π»ΠΎΠΊΠΎΠ²

CSS

.parallax__flex {
  display: flex;
}
.parallax__image {
  width: 60%;
  overflow: hidden;
}
.parallax__image img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.parallax__body {
  width: 40%;
  padding: 60px;
  background: #fff;
}
.parallax__title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
.parallax__text {
  font-size: 18px;
}
@media (max-width: 991.98px) {
  .parallax__flex {
    flex-direction: column;
  }
  .parallax__image {
    width: 100%;
  }
  .parallax__body {
    width: 100%;
  }
}

ΠŸΡ€ΠΎ object-fit ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ β€” Zoom-эффСкт: ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния


Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°Π΅ΠΌ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ jQuery

Для этого этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery

Π‘ΠΊΠ°Ρ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС jQuery

НаТимаСм ΠΊΠ½ΠΎΠΏΠΊΡƒ Download

Π˜Ρ‰Π΅ΠΌ ссылку Π½Π° ΠΌΠΈΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ jQuery ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ

БохраняСм Ρ„Π°ΠΉΠ» Π² ΠΏΠ°ΠΏΠΊΡƒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ js-Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Ρ„Π°ΠΉΠ» jquery-3. 5.1.min.js ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ </body> Π΄ΠΎ основного js-Ρ„Π°ΠΉΠ»Π°


ПишСм jQuery код

Основной main.js Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄

$(window).on('load', function(){ /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΡΡ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ всС изобраТСния */
  function parallax(){
    $('.parallax__image').each(function(){ /* Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° с классом .parallax__image */
      const img = $(this).find('img') /* Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ‚Π΅Π³Ρƒ img */
      const windowTop = $(window).scrollTop() /* вычисляСм сколько ΡƒΠΆΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡Π΅Π³ΠΎ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° страницы */
      const windowHeight = $(window).height() /* вычисляСм высоту ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
      const windowBottom = $(window).scrollTop() + windowHeight /* вычисляСм Π³Π΄Π΅ Π½ΠΈΠ· ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
      const imageTop = $(this).offset().top /* вычисляСм расстояниС ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° страницы Π΄ΠΎ Π²Π΅Ρ€Ρ…Π° Π±Π»ΠΎΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ  */
      const imageHeight = $(this).height() /* вычисляСм высоту Π±Π»ΠΎΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
      const imageBottom = $(this). offset().top + imageHeight /* вычисляСм Π½ΠΈΠ· Π±Π»ΠΎΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ */
      if (!(imageTop > windowBottom || imageBottom < windowTop)) { /* провСряСм находится Π»ΠΈ Π±Π»ΠΎΠΊ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
        const sub = imageTop - windowTop /* вычисляСм Ρ€Π°Π·Π½ΠΈΡ†Ρƒ Π²Π΅Ρ€Ρ…Π° Π±Π»ΠΎΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π²Π΅Ρ€Ρ…Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
        if (sub >= 0) { /* Ссли Π²Π΅Ρ€Ρ… изобраТСния Π½ΠΈΠΆΠ΅ Π²Π΅Ρ€Ρ…Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
          img.css({ /* Π½Π°Π·Π½Π°Ρ‡Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ динамичСскиС inline-свойства */
            transform: `scaleX(${(sub / 2000) + 1})` /* ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡƒΠΆΠ°Ρ‚ΡŒΡΡ (scaleX) ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ взависимости ΠΎΡ‚ sub */
          })
        } else { /* ΠΈΠ½Π°Ρ‡Π΅ Ссли Π²Π΅Ρ€Ρ… изобраТСния Π²Ρ‹ΡˆΠ΅ Π²Π΅Ρ€Ρ…Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
          img.css({
            transform: `scaleX(1) translateY(${(-sub / 2)}px)` /* scaleX сбрасываСм Π΄ΠΎ значСния 1 ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΠΈΠ· взависимости ΠΎΡ‚ sub */
          })
        }
      }
    })
  }
  parallax() /* запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы */
  $(window).scroll(function(){
    parallax() /* запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы */
  })
  $(window). resize(function(){
    parallax() /* запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
  })
})

Π’Ρ‹ΡˆΠ΅ Π² ΠΊΠΎΠ΄Π΅ написал ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ какая строка Π·Π° Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚, Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΡƒΡ‚ΠΎΡ‡Π½ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹

  1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ $(window).on('load', function(){}), Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния успСли Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌ сработала функция parallax(). Если Π±Ρ‹ использовали $(document).ready(function(){}), Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°Π»ΠΈΡΡŒ Π±Ρ‹ сразу послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ DOM, ΠΈ Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ изобраТСния Π½Π΅ успСли Π±Ρ‹ Π΅Ρ‰Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ, ΠΌΡ‹ Π±Ρ‹ Π½Π΅ смогли ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ высотС ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ элСмСнтов, ΠΈ функция parallax() Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° Π±Ρ‹ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ

  2. scaleX(${(sub / 2000) + 1}) β€” ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌ ΠΏΡƒΡ‚Π΅ΠΌ опрСдСляСм Π½Π° ΠΊΠ°ΠΊΠΎΠ΅ число Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ sub, ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΊ 0, Π° Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ scaleX() ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΊ 1, Ρ‚ΠΎ прибавляСм Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ ΠΈ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Аналогично ΠΈ с translateY(${(-sub / 2)}px), Ρ‚ΠΎΠ»ΡŒΠΊΠΎ здСсь Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ значСния ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΎΡ‚ 0 Π΄ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… сотСн пиксСлСй

  3. Π€ΡƒΠ½ΠΊΡ†ΠΈΡŽ parallax() запускаСм нСсколько Ρ€Π°Π·, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ элСмСнтов Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы ΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы ΠΈ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°


Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ эффСкты для элСмСнтов ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ Π½Π° Codepen, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ значСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹ΠΉ эффСкт


Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ β€” https://picsum.photos/

10 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с эффСктом параллакса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ | by Justinmind

Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΈΠ· ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ параллакса для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств β€” Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚Π΅ΡΡŒ ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свой собствСнный эффСкт параллакса прямо сСйчас 7

Π’Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° приходят ΠΈ уходят, Π½ΠΎ эффСкт параллакса остался. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΎΠΊΠ°Π·Π°Π»Π° большоС влияниС Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΊΠ°ΠΊ Π½Π° Π²Π΅Π±-сайтах, Ρ‚Π°ΠΊ ΠΈ Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях.

ΠžΡ‚ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ с фиксированным ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… 3D-эффСктов ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана β€” Π΄Π°Π²Π°ΠΉΡ‚Π΅ взглянСм Π½Π° 10 ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов с параллаксом.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ эффСкт параллакса?

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

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

Если всС сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, эффСкт параллакса обСспСчиваСт удобство Ρ€Π°Π±ΠΎΡ‚Ρ‹ с вашим Π²Π΅Π±-сайтом ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρƒ:

1 β€” Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса ΠΏΡ€ΠΈ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ с Fluttuo

Π˜Π·ΡΡ‰Π½Π°Ρ анимация, чистый интСрфСйс, контраст Π½ΡŽΠ΄ΠΎΠ²Ρ‹Ρ… ΠΈ Ρ‚Π΅ΠΌΠ½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ сочСтаниС Π±ΠΎΠ³Π°Ρ‚ΠΎ ΡƒΠΊΡ€Π°ΡˆΠ΅Π½Π½Ρ‹Ρ… ΠΈ тяТСлых ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ Fluttuo ΠΈΠ· Ρ‚ΠΎΠ»ΠΏΡ‹ элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ параллакса ΠΊ сумкС обСспСчиваСт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

ΠŸΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ экрана эффСкт параллакса Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ ΠΏΠΎ Ρ„ΠΎΠ½Ρƒ. Когда Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ страницу, ΠΎΠ½ воспринимаСт контСкст ΠΈ ΡΡ‚ΠΈΠ»ΡŒ ΡŽΠ²Π΅Π»ΠΈΡ€Π½ΠΎΠ³ΠΎ сайта Ρ‡Π΅Ρ€Π΅Π· эстСтику Ρ„ΠΎΠ½Π°, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой содСрТит ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π΅ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ сопровоТдаСтся парящими Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ΠΌΠΈΠ½ΠΈ-карусСлями. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дополняСт Π±Ρ€Π΅Π½Π΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ всСгда «экспСримСнтируСт с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌΠΈ ΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌΒ».

2 β€” Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ параллакса с Hot Dot

Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса Hot Dot Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ отличаСтся: ΠΎΠ½ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ страницу, ΠΎΠ½Π° пСрСмСщаСтся слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ. На сайтС Hot Dot Π΅ΡΡ‚ΡŒ эффСкт ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ являСтся фиксированным, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² (ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²!).

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

3 β€” ΠŸΡ€ΠΎΡΡ‚Π°Ρ домашняя страница с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ параллакса Π½Π° Money Saving

Π­Ρ‚ΠΎΡ‚ шаблон банковского сайта ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈΠΏΠΊΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, Ρ€ΡƒΡ‡Π½ΠΎΠ΅ слайд-ΡˆΠΎΡƒ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’Π²Π΅Ρ€Ρ…Β» с эффСктом Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ параллакса.

Π¨Π°Π±Π»ΠΎΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ Π² минималистском стилС ΠΈ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ настройки. Он Ρ‚Π°ΠΊΠΆΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π΅Π½, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°Ρ‚ΡŒΡΡ ΠΈΠΌ ΠΊΠ°ΠΊ со своих ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Ρ‚Π°ΠΊ ΠΈ с Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола.

4 β€” Знакомство с эффСктом параллакса с Π”Π΅ΠΉΠ²ΠΎΠΌ Π“Π°ΠΌΠ°ΡˆΠ΅ΠΌ

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

Π›ΡƒΡ‡ΡˆΠΈΠ΅ совСты Дэйва ΠΏΠΎ параллаксной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅:

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

5 β€” Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ параллакс-Π΄ΠΈΠ·Π°ΠΉΠ½ с NASA Prospect

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно: Laughing GIF

NASA Prospect β€” это ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описываСт ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ ΠΏΠ»Π°Π½Π΅Ρ‚Π°Ρ€Π½Ρ‹Ρ… Ρ€Π°Π·Π²Π΅Π΄Ρ‡ΠΈΠΊΠΎΠ². НАБА ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΈΡ… Π·Π°Π½ΠΎΠ²ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ чСловСчСство разбросало ΠΏΠΎ Π‘ΠΎΠ»Π½Π΅Ρ‡Π½ΠΎΠΉ систСмС послС глобальной катастрофы.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅, Π²ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ использованиС эффСкта параллакса. Π—Π²ΡƒΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сцСну ΠΈ являСтся ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

6–3D-эффСкт параллакса с Hello Monday

Hello Monday прСдставляСт собой Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ эффСкт параллакса с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ сторонС экрана ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ дизайнСрскиС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ β€” ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ ΠΈΡ… описаниС ΠΈ подробности. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ дизайнСрский корпус ΠΈΠΌΠ΅Π΅Ρ‚ свой собствСнный внСшний Π²ΠΈΠ΄.

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

7 β€” ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ эффСкт параллакса с Bearideas

Нам просто нравится сайт параллакса Bearideas β€” это Ρ‚Π°ΠΊ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ! ΠžΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ со ссылками для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ β€” Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΈ простой Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ параллакса ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚. Команда Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² использовала ΠΊΠ°Ρ€Ρ‚Ρ‹ Π² Π²ΠΈΠ΄Π΅ сСтки для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ. Π―Ρ€ΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ контраст ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚Π°ΠΌΠΈ.

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ добавляСт простоты Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

8 β€” 3D-эффСкт параллакса Β«ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉΒ» с Immersive Garden

«Нам ΠΎΡ‡Π΅Π½ΡŒ нравится Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ истории, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€ΠΎΠ³Π°ΡŽΡ‚ людСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эмоции».

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ параллакс ΠΈ Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅, Π²Π΅Π±-сайт Immersive Garden создаСт иллюзию Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, 3D ΠΈ погруТСния Π² сцСны Π±Π΅Π· фактичСского использования 3D-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ интСрфСйс ΠΌΠΈΠ½ΠΈΠΌΠ°Π»Π΅Π½, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ наглядСн ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятСн.

Π’Π΅Π±-сайт состоит ΠΈΠ· мноТСства ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… Π²ΠΈΠ΄Π΅ΠΎΡ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ, ΠΏΡ€ΠΈΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ.

Одной ΠΈΠ· самых интСрСсных Π²Π΅Ρ‰Π΅ΠΉ Π½Π° этом сайтС являСтся органичСский курсор. Immersive Garden использовал Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ эффСкты скорости, ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° ΠΈ увСличСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ ΠΆΠΈΠ²Ρ‹ΠΌ.

9 β€” Π˜ΠΌΠΌΠ΅Ρ€ΡΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ с Valaire

Valaire β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ иммСрсивного Π²Π΅Π±-сайта. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ свой ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³, Π° Ρ‚Π°ΠΊΠΆΠ΅ свой Π½ΠΎΠ²Ρ‹ΠΉ альбом, ΠΎΠ½ΠΈ сдСлали всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ для взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π­Ρ‚ΠΎ Π½Π΅ просто Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°, это полноцСнная история.

Π˜ΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт параллакса β€” соСдинСниС всСх Ρ‚ΠΎΡ‡Π΅ΠΊ соприкосновСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ для ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

10 β€” ΠŸΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт параллакса с Cyclemon

И послСднСС, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ΅: Cyclemon. Π­Ρ‚ΠΎΡ‚ сайт β€” ΠΌΠ΅Ρ‡Ρ‚Π° вСлосипСдиста. Когда Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ страницу Π²Π½ΠΈΠ·, Π²Ρ‹ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π΅Ρ‚Π΅ΡΡŒ с Ρ†Π΅Π»Ρ‹ΠΌ рядом вСлосипСдов Π² Ρ€Π°Π·Π½Ρ‹Ρ… условиях. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ вСлосипСда Π΅ΡΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ описываСт, ΠΊΠ°ΠΊΠΈΠΌ Π³ΠΎΠ½Ρ‰ΠΈΠΊΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π΄Π°Ρ‚ΡŒ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŽ контСкст ΠΈ, надСюсь, Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ Π΅Π³ΠΎ Π½Π° ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ β€” ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π²Ρ‹ Ρ‚Π°ΠΊ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅.

На самом Π΄Π΅Π»Π΅ это вовсС Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ вСлосипСдов. НСт, это сайт, ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΉ Π΄Π²ΡƒΠΌ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°ΠΌ-Π³Ρ€Π°Ρ„ΠΈΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‚ свои Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π­Ρ‚ΠΎ прСкрасный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, насколько ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ эффСкт параллакса .

Π”ΡƒΠΌΠ°Π΅Ρ‚Π΅ ΠΎ создании собствСнного эффСкта параллакса? Π›ΡƒΡ‡ΡˆΠΈΠΉ способ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ β€” ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ параллакса. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ для вас, Ρƒ Justinmind Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ параллакса, Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… для вас. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Justinmind сСйчас ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ сами!

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°: ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ история

ΠœΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ , Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° , Π²Π΅Π±-сайты // 30.10.12

ΠšΡ€ΠΈΡ ΠŸΡ€Π΅Π½Π΄Π΅Ρ€Π³Π°ΡΡ‚ // ΠŸΠ°Ρ€Ρ‚Π½Π΅Ρ€ ΠΈ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ стратСгии

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

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ большС, Ρ‡Π΅ΠΌ просто Π·Π»ΠΎΠ΄Π΅ΠΉ ΠΈΠ· Π—Π΅Π»Π΅Π½ΠΎΠ³ΠΎ Ѐонаря. Π’Π΅Ρ€ΠΌΠΈΠ½ «параллакс» относится ΠΊ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡƒ двиТСнию ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Ссли ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Π½ΠΈΡ… с Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ. ΠŸΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ этого ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²ΠΎ врСмя двиТСния ΠΏΠΎ шоссС: ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ смотритС Π² ΠΎΠΊΠ½ΠΎ, каТСтся, Ρ‡Ρ‚ΠΎ элСктричСскиС столбы Ρƒ Π΄ΠΎΡ€ΠΎΠ³ΠΈ проносятся ΠΌΠΈΠΌΠΎ, Π° Π΄Π΅Ρ€Π΅Π²ΡŒΡ Π²Π΄Π°Π»Π΅ΠΊΠ΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΏΡ€ΠΎΠΏΠ»Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠΈΠΌΠΎ.

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ½ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π½Π° экранС Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ Π½Π° Π·Π°Ρ€Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Disney (ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅) использовали многоплоскостныС ΠΊΠ°ΠΌΠ΅Ρ€Ρ‹ для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ своих 2D-сцСн. «БСлоснСТка ΠΈ сСмь Π³Π½ΠΎΠΌΠΎΠ²Β» Π±Ρ‹Π» самым популярным ΠΈΠ· этих Ρ€Π°Π½Π½ΠΈΡ… Ρ„ΠΈΠ»ΡŒΠΌΠΎΠ² с параллаксом. Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ² ДиснСй ΠΏΠ΅Ρ€Π΅ΡˆΠ΅Π» Π½Π° ΡΠ΅ΠΌΠΈΡΠ»ΠΎΠΉΠ½ΡƒΡŽ ΠΌΠ½ΠΎΠ³ΠΎΠΏΠ»ΠΎΡΠΊΠΎΡΡ‚Π½ΡƒΡŽ ΠΊΠ°ΠΌΠ΅Ρ€Ρƒ, которая ΠΌΠΎΠ³Π»Π° ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ сСмь Ρ€Π°Π·Π½Ρ‹Ρ… плоскостСй двиТСния.

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ стала ΠΎΡ‡Π΅Π½ΡŒ популярной Π² 2D-Π²ΠΈΠ΄Π΅ΠΎΠΈΠ³Ρ€Π°Ρ…. Sonic the Hedgehog (срСди ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ…) ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Π» ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, замСдляя ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ двиТСния для Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… плоскостСй ΠΈ сохраняя ΠΏΠΎΡΡ‚ΠΎΡΠ½Π½ΡƒΡŽ, Π±Ρ‹ΡΡ‚Ρ€ΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°. Π­Ρ‚ΠΎ создавало Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ с использованиСм ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ 2D-спрайтов.

Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ параллакса Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ ΠΎΡ‡Π΅Π½ΡŒ просто, всСго с двумя слоями. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эту Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ, слой ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π° с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ Π±ΠΈΡ‚Π°ΠΌΠΈ прокручиваСтся ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя, создавая иллюзию ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ двиТСния. Think Geek ΡƒΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ со своими Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями. We Bleed Design ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ симуляции ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ параллакса PNG.

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

НСкоторыС участки параллакса ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° эффСкт, создаваСмый многоплоскостной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Π”Ρ€ΡƒΠ³ΠΈΠ΅ сайты использовали эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ параллакса, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π΄ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π΅Π±-страница, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ для добавлСния Π½ΠΎΠ²Ρ‹Ρ… элСмСнтов ΠΈ создания двиТСния Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ оси Y. Nike Π±Ρ‹Π» ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠΈΠΎΠ½Π΅Ρ€ΠΎΠ² этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ Π² своСй ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΠΈ Better World ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡˆΠ΅ΡΡ‚Π²Π°. (ВСкущая вСрсия сайта Better World большС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ параллакс.)

НС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ сайт ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для параллакса; эффСкт ΠΈΠΌΠ΅Π΅Ρ‚ свои ограничСния, особСнно Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ…. Но ΠΊΠΎΠ³Π΄Π° ситуация ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ, рассмотритС ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π» параллакса. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ параллакса Π½Π° clickrain.com ΠΈ собрали здСсь нСсколько Π½Π°ΡˆΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² параллакса.

Бписок сайтов с параллаксной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

Π’Π΅Π»ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅Π»ΡŒ Π‘Π΅Π½

ΠšΠΈΠ½Π²Π°Ρ€Π° 3

Руководство ΠΏΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ Galaxy

ΠΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΏΠΈΡ‚ΠΊΠΈ

ΠŸΡ€ΠΎΡΡ‚ΠΎ скаТи слово

По ΠΌΠ΅Ρ€Π΅ развития Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΡ‹, вСроятно, ΡƒΠ²ΠΈΠ΄ΠΈΠΌ всС большС (ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТных) ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² сайтов с параллаксной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ Π² β€‹β€‹Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. НайдитС ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ параллакса? ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π½ΠΈΠΆΠ΅ ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ сайтами.

Let’s Talk

ΠžΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ ΠΊ нашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅ с вопросами, коммСнтариями ΠΈΠ»ΠΈ идСями ΠΎ Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

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

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