Π Π°Π·Π½ΠΎΠ΅

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ эффСктом ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ: Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ параллакс эффСкт для сайта

09.02.2023

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

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт параллакса Π² Slider Revolution

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ нашСй ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‰Π΅ΠΉΡΡ сСрии руководств ΠΏΠΎ Slider Revolution. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ всС ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΈΠ· этой сСрии Π² нашСм Π²ΡΠ΅ΠΎΠ±ΡŠΠ΅ΠΌΠ»ΡŽΡ‰Π΅ΠΌ руководствС Slider Revolution.

ОглавлСниС

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ параллакс?

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ параллакс Π² Slider Revolution

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ параллакс ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ изобраТСниям

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ параллакс ΠΊ слоям

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ

ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ β€” это популярный эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ вашСго Π²Π΅Π±-сайта. БущСствуСт мноТСство ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅ΠΌ WordPress со встроСнными эффСктами параллакса, ΠΈ Π²Ρ‹, вСроятно, Π²ΠΈΠ΄Π΅Π»ΠΈ этот эффСкт тысячу Ρ€Π°Π· Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Но Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±Ρ‹Π»ΠΎ интСрСсно, ΠΊΠ°ΠΊ это Π±Ρ‹Π»ΠΎ сдСлано. БСгодня ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± использовании эффСкта параллакса Π² слайдСрах Slider Revolution.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ параллакс?

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

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ способы достиТСния этого эффСкта, ΠΈ Ссли Π²Ρ‹ ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ со Slider Revolution, Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π΄Ρ‹ ΡƒΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ содСрТит Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для создания параллакса.

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ параллакс Π² Slider Revolution

ΠŸΠ΅Ρ€Π²ΠΎ-Π½Π°ΠΏΠ΅Ρ€Π²ΠΎ β€” Π·Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² Slider Revolution ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ параллакс. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠžΠ±Ρ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ модуля > ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ > Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π° основС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ > ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ ΠΈ ΠΏΠΎΠ²Π΅Ρ€Π½ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Parallax Enabled Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ На.

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

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ параллакс ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ изобраТСниям

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эффСкт параллакса ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ слайда > ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ > Настройки параллакса ΠΈ 3DΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈΠ· Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка.

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, Π·ΠΎΠ»ΠΎΡ‚ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π½Π΅ сущСствуСт. ΠœΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° вашСй страницС. Разная Π³Π»ΡƒΠ±ΠΈΠ½Π° создаст Ρ€Π°Π·Π½Ρ‹Π΅ эффСкты, поэтому ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡ… всС, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт для своСй страницы. Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎ Ρ‚Π΅, Ρ‡Ρ‚ΠΎ посСрСдинС, β€” всСгда бСзопасный Π²Ρ‹Π±ΠΎΡ€.

Π­Ρ‚ΠΎ Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни это для Ρ„ΠΎΠ½Π°.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ параллакс ΠΊ слоям

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

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свой слой, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ слоя > ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ > Π²ΠΊΠ»Π°Π΄ΠΊΠ° ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ ΠΈ 3DΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹.

И это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получится слой с параллаксом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ активируСтся ΠΏΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ.

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ

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

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° Facebook ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° Twitter ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° Pinterest ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° WhatsApp ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° WhatsApp ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅

Moyens Staff

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹Π΅ ΠΎΠ±ΠΎΠΈ с эффСктом двиТСния для iOS 7?

16 октября 2013 iOS Π‘Π΄Π΅Π»Π°ΠΉ сам

Ия Π—ΠΎΡ€ΠΈΠ½Π°

Автор Π›Π°ΠΉΡ„Ρ…Π°ΠΊΠ΅Ρ€Π°, Π°Ρ‚Π»Π΅Ρ‚, КМБ

Новый ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ слой Π² iOS 7 позволяСт ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ параллакс-эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½ΠΎ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС. Если ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½ΠΈΡ‚ΡŒ смартфон Π² любом Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π½Π° экранС Π½Π°Ρ‡Π½Π°Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°Π΅Ρ‚ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΡƒΡŽ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ.

Новый слой Π½Π° iOS 7 Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ рСалистичСн, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΡ‰ΡƒΡ‰Π°ΡŽΡ‚ дискомфот β€” Ρƒ Π½ΠΈΡ… ΠΊΡ€ΡƒΠΆΠΈΡ‚ΡŒΡΡ Π³ΠΎΠ»ΠΎΠ²Π°, Ρ‚ΠΎΡˆΠ½ΠΈΡ‚. Если Π²Ρ‹ Π±ΠΎΠΈΡ‚Π΅ΡΡŒ «морской Π±ΠΎΠ»Π΅Π·Π½ΠΈΒ»  ΠΈΠ»ΠΈ просто Π½Π΅ Π»ΡŽΠ±ΠΈΡ‚Π΅ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ этот эффСкт Π² настройках iOS. Однако сначала всС-Ρ‚Π°ΠΊΠΈ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ, Π²Π΄Ρ€ΡƒΠ³ Π²Π°ΠΌ понравится?

Π‘Π²ΠΎΠΈ Ρ„ΠΎΡ‚ΠΎ с объСмом ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π² ΠΎΠ±ΠΎΠΈ с эффСктом parallax Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, скачанныС ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, Π½ΠΎ ΠΈ свои Ρ„ΠΎΡ‚ΠΊΠΈ, сдСланныС прямо со смартфона.

Но здСсь ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° β€” для эффСкта parallax ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ‡ΡƒΡ‚ΡŒ большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Π΅ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ экран. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π° экранС ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Ρƒ заставку, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ приятно Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, придСтся ΠΏΠΎΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ β€” ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΊΠΈ, ΠΏΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π΅Ρ‘ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ракурс ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эффСктов.

Π§Ρ‚ΠΎΠ±Ρ‹ эффСкт параллакса проявился Π²ΠΎ всС своСй красС, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкт Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Π½ΠΎΠ², ΠΊΠ°ΠΊ Π½Π° Ρ„ΠΎΡ‚ΠΎ Π½ΠΈΠΆΠ΅.

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

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΌΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ свои Ρ„ΠΎΡ‚ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ стандартныС ΠΎΠ±ΠΎΠΈ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΈΠΌ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ эффСкт двиТСния. Π’ Apple с систСмой iOS 7 Π΅ΡΡ‚ΡŒ нСсколько стандартных Ρ„ΠΎΠ½ΠΎΠ² практичСски Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ†Π²Π΅Ρ‚Π΅, Π½ΠΎ Π΄Π°ΠΆΠ΅ Π² Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΡƒΠ·ΠΎΡ€ ΠΈΠ»ΠΈ тСкстура β€” всё, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши ΠΎΠ±ΠΎΠΈ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π»ΠΈ объСм, выглядСли Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰Π΅.

УстановитС ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€

Устанавливая ΠΎΠ±ΠΎΠΈ, ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€. Π•ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ мнСния ΠΎΠ± идСальном Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, Π½ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ сходятся Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ эффСкта Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ каТдая сторона ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±Ρ‹Π»Π° большС, Ρ‡Π΅ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана Π½Π° 200 пикс.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠ±ΠΎΠ΅Π² параллакс для Ρ€Π°Π·Π½Ρ‹Ρ… устройств:

  1. iPhone 5/5C/5S β€” 1,040 Γ— 1,536 пиксСлСй
  2. iPhone 4S β€” 1,040 Γ— 1,360 пиксСлСй
  3. iPad (Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ ΠΈ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΠΉ) β€” 1,936 Γ— 2,448 пиксСлСй
  4. iPad Mini β€” 1,168 Γ— 1,424 пиксСлСй
  5. iPod Touch (пятого поколСния) β€” 1,040 Γ— 1,536 пиксСлСй

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Photoshop ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π±ΠΎΠ»Π΅Π΅ простыС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

Если ваша ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° большС, Ρ‡Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСпросто ΠΏΠΎΠ΄ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ΄ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ, Π½ΠΎ ΠΏΡ€ΠΈ этом сама ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ испорчСна, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ±ΠΎΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ Π±Π΅ΡΠΈΡ‚ΡŒ вас.

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

Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ параллакса ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ | Webflow University

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

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅:

  1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ настройки
  2. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  3. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
  4. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  5. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ
  6. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для устройств

    8

  7. Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹
    Π‘ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ достовСрноС Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ΅ пространство, слСдуя ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ восприятия Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹. К Π½ΠΈΠΌ относятся Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ тСнями. Π”Π°ΠΆΠ΅ эффСкты размытия ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ рСзкости.

    Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ настройку

    Π¨Π°Π³ 1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»

    Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ создадим Ρ€Π°Π·Π΄Π΅Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ элСмСнт Section Π½Π° холст с ΠΏΠ°Π½Π΅Π»ΠΈ Elements , располоТСнной слСва. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½ΠΈΠΆΠ΅ сгиба, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ сСкциями.

    Π¨Π°Π³ 2. УстановитС Ρ€Π°Π·Π΄Π΅Π»

    Пока Ρ€Π°Π·Π΄Π΅Π» Π²Ρ‹Π±Ρ€Π°Π½, Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Ρ‚ΠΈΠ»ΡŒΒ» справа Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ отступы . Π’Π°ΠΊΠΆΠ΅ установитС overflow to hidden , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ содСрТимоС Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ€Π°Π·Π΄Π΅Π»Π°.

    Π¨Π°Π³ 3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

    ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ элСмСнт Container с ΠΏΠ°Π½Π΅Π»ΠΈ Elements ΠΈ помСститС Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ€Π°Π·Π΄Π΅Π»Π°. УстановитС Π΅Π³ΠΎ height Π½Π° 1200px ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ . Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

    Π¨Π°Π³ 4. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

    ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ПанСль Π°ΠΊΡ‚ΠΈΠ²ΠΎΠ² Π² Ρ€Π°Π·Π΄Π΅Π». УстановитС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρƒ для всСх ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ иллюзию Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ пространства, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ приняли это Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ настройкС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния.

    ПолСзно Π·Π½Π°Ρ‚ΡŒ
    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния Π²
    модальном ΠΎΠΊΠ½Π΅ настроСк изобраТСния . Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ, Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΠ΅ΡΡ‚Π΅Ρ€Π΅Π½ΠΊΠΈ рядом с ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ изобраТСния. Настройки изобраТСния Ρ‚Π°ΠΊΠΆΠ΅ находятся Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Element Settings 9.0030 справа ΠΎΡ‚ конструктора. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ доступ, Π²Ρ‹Π±Ρ€Π°Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΆΠ°Π² D Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅.
    Установка Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния Π² настройках изобраТСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ значСния ΠΊ этому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π½Π° всСх ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… устройства. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для изобраТСния Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах, установитС ΡˆΠΈΡ€ΠΈΠ½Ρƒ
    Ρ‡Π΅Ρ€Π΅Π· панСль стилСй .

    Π¨Π°Π³ 5. Π‘Ρ‚ΠΈΠ»ΠΈΠ·ΡƒΠΉΡ‚Π΅ изобраТСния

    Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅Π½ΡŒ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ всС изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΡƒΠ³ΠΎΠ» . Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ ΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ. УстановитС Π΅Π³ΠΎ расстояниС ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ† изобраТСния. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ размытия ΠΈ установитС Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ распространСниС Ρ‚Π΅Π½ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π³Ρ€Π°Π½ΠΈΡ† изобраТСния.

    Π¨Π°Π³ 6. РасполоТитС изобраТСния

    Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π·Π°Π΄Π°Ρ‡Π° β€” ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния Π½Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΡƒΡŽ . Π—Π°Ρ‚Π΅ΠΌ располоТитС ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² любоС ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ полоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈΠ»ΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ввСдя ΠΈΡ… для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ z-index для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. УстановитС Π±ΠΎΠ»Π΅Π΅ высокий z-индСкс для Ρ‚Π΅Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π±Π»ΠΈΠΆΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ изобраТСния, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.

    ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

    ПониманиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ ΠΈ дСйствиС , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ для достиТСния поставлСнной Ρ†Π΅Π»ΠΈ.  

    Π’ этой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния, ΠΊΠΎΠ³Π΄Π° Ρ‡Π°ΡΡ‚ΡŒ (элСмСнт) прокручиваСтся Π² ΠΎΠΊΠ½Π΅ просмотра. Π˜Ρ‚Π°ΠΊ, 9Π’Ρ€ΠΈΠ³Π³Π΅Ρ€ 0029 β€” это Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ элСмСнта ΠΈΠ· ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π² прСдставлСнии . И дСйствиС Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ .

    Π¨Π°Π³ 7. УстановитС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ элСмСнты своСго взаимодСйствия, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Π΅Π³ΠΎ созданию. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π», содСрТащий созданныС Π²Π°ΠΌΠΈ изобраТСния. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ панСль Interactions ΠΈ создайтС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ элСмСнта ΠΈΠ· ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π² прСдставлСнии .

    Π¨Π°Π³ 8. НастройтС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ для воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° анимация начинаСтся ΠΈ заканчиваСтся. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ анимация начинаСтся, ΠΊΠΎΠ³Π΄Π° сСкция Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра, ΠΈ заканчиваСтся, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра. ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для этого руководства.

    ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

    ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ. ЦСль Π½Π° Π΄Π°Π½Π½ΠΎΠΌ этапС состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния с Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ. Π’Π΅, ΠΊΡ‚ΠΎ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ быстрСС, Ρ‡Π΅ΠΌ Ρ‚Π΅, ΠΊΡ‚ΠΎ сзади, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Π΄Π΅Π». Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ дСйствиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния. Π—Π°Ρ‚Π΅ΠΌ установитС ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния Π½Π° оси Y Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

    Π¨Π°Π³ 9. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

    ΠŸΠ΅Ρ€Π΅Π΄ созданиСм Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ сглаТивании. Π‘Π³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄Π΅ΠΌΠΏΡ„ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ смягчаСт ΠΈ сглаТиваСт ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ°ΡŽΡ‰ΡƒΡŽΡΡ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ полоТСнию Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ шкалС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ сглаТивания Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ 9.0030 . Для этого ΡƒΡ€ΠΎΠΊΠ° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ 50%.

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ создайтС Π½ΠΎΠ²ΠΎΠ΅ дСйствиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ  ΠΈ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² Β«Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ параллакса».

    Π¨Π°Π³ 10. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ дСйствиС пСрСмСщСния

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с самым высоким z-индСксом, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ каТСтся блиТайшим ΠΊ вашСй Ρ‚ΠΎΡ‡ΠΊΠ΅ ΠΎΠ±Π·ΠΎΡ€Π°. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ дСйствиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ способ пСрСмСщСния изобраТСния Π²ΠΎ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

    Π”Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π° ΠΈΠ»ΠΈ экзСмпляра изобраТСния Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ ΡˆΠΊΠ°Π»Ρƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Один установлСн Π½Π° 0% β€” Π½Π°Ρ‡Π°Π»ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; ΠΈ ΠΎΠ΄ΠΈΠ½ Π½Π° 100% β€” ΠΊΠΎΠ½Π΅Ρ† Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

    Π¨Π°Π³ 11. УстановитС Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ Π½Π° 0%. Π’ настройках прСобразования пСрСмСщСния пСрСмСститС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΠΈΠ·, установив Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ оси Y Π½Π° 1000 пиксСлСй. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ позиция изобраТСния ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π°.

    Π¨Π°Π³ 12. УстановитС ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ шкалС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ пСрСмСститС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ…, установив Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ оси Y Π½Π° Π½Π° -1000 пиксСлСй. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ позиция изобраТСния, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Π΄Π΅Π» прокручиваСтся ΠΈΠ· поля зрСния.

    Π¨Π°Π³ 13. Π—Π°Π΄Π°ΠΉΡ‚Π΅ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ дСйствиС

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с наимСньшим z-индСксом, располоТСнноС Π² ΠΊΠΎΠ½Ρ†Π΅ Ρ€Π°Π·Π΄Π΅Π»Π°. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ дСйствиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ move . На Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ ΡˆΠΊΠ°Π»Ρƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для этого Π½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π΄Π²Π° Π½ΠΎΠ²Ρ‹Ρ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°: ΠΎΠ΄ΠΈΠ½ с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ 0 %, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ 100 %.

    ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ

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

    УстановитС ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ Π½Π° 100% для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния ΠΈ установитС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ оси Y Π½Π° 352px. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² эту ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы Π²Π½ΠΈΠ·. Если Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ настройку замСдлСния для ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… дСйствий, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ установили ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ замСдлСния для всСх дСйствий.

    Π¨Π°Π³ 14. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ‚Ρ€Π΅Ρ‚ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ дСйствиС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ move . Для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° пСрСмСститС Π΅Π³ΠΎ Π²Π½ΠΈΠ·. УстановитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 300px. Для Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° пСрСмСститС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ…. Π’Π΅ΠΏΠ΅Ρ€ΡŒ установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€ΠΎΠ΄Π΅ -500px. Π­Ρ‚ΠΎ заставит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π½Π° расстояниС 800 пиксСлСй, Ρ‡Ρ‚ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, Ρ‡Π΅ΠΌ блиТайшСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ быстрСС, Ρ‡Π΅ΠΌ самоС дальнСС.

    ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

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

    β€Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ просмотр Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ холста. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ двиТСтся с большСй ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ эффСкт параллакса, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ каТСтся Π±Π»ΠΈΠΆΠ΅ ΠΊ Π½Π°ΠΌ.

    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ

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

    ΠžΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для устройств

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

    ПолСзно Π·Π½Π°Ρ‚ΡŒ β€” Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ двиТСния

    Когда Π²Ρ‹ устанавливаСтС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ оси Y, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ устанавливаСтС ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ двиТСния. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ пСрСмСщаСтся ΠΈΠ· полоТСния ΠΏΠΎ оси Y, Ρ€Π°Π²Π½ΠΎΠ³ΠΎ 1000 пиксСлСй, Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ оси Y, Ρ€Π°Π²Π½ΠΎΠ΅ -1000 пиксСлСй, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π° расстояниС 2000 пиксСлСй. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ пСрСмСщаСтся Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ расстояниС 704 пиксСля, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ пСрСмСщаСтся ΠΈΠ· полоТСния ΠΏΠΎ оси Y Π² -352 пиксСля Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ оси Y Π² 352 пиксСля. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, оказываСтся, Ρ‡Ρ‚ΠΎ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅ Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΏΠ»Π°Π½Π° ΠΈΠ»ΠΈ уровня Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹: 9.0003

    • ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ β€” Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ каТСтся Π±Π»ΠΈΠΆΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ двиТСтся быстрСС
    • Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ β€” Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΡ‡Ρ‚ΠΈ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ изобраТСния каТутся двиТущимися с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ
    • Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ β€” Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ каТСтся дальшС Π½Π°Π·Π°Π΄ ΠΈ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅

    Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ параллакс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ ΠΈ двиТСния Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. β€” ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Windows

    ΠžΠ±Ρ€Π°Ρ‚Π½Π°Ρ связь Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

    Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€ LinkedIn ЀСйсбук Π­Π». адрСс

    • Π‘Ρ‚Π°Ρ‚ΡŒΡ
    • 3 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ Π½Π° Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

    ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ β€” это Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ элСмСнты, располоТСнныС Π±Π»ΠΈΠΆΠ΅ ΠΊ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŽ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ быстрСС, Ρ‡Π΅ΠΌ элСмСнты Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.

    ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ создаСт ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, пСрспСктивы ΠΈ двиТСния. Π’ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ UWP Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт управлСния ParallaxView для создания эффСкта параллакса.

    API Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Windows: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

    API ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ : класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

    ГалСрСя WinUI 2

    Если Ρƒ вас установлСно ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

    WinUI 2 Gallery , Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ParallaxView Π² дСйствии.

    • ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ГалСрСя WinUI 2 (Магазин Microsoft)
    • ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ исходный ΠΊΠΎΠ΄ (GitHub)

    Fluent Design System ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ соврСмСнный, смСлый ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя свСт, Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ, Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅, ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±. Parallax β€” это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Fluent Design System, Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅, Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π± Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС, см. ΠΎΠ±Π·ΠΎΡ€ Fluent Design.

    Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС

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

    ИспользованиС элСмСнта управлСния ParallaxView для создания эффСкта параллакса

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

    Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт управлСния ParallaxView, Π²Ρ‹ прСдоставляСтС элСмСнт Source, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ элСмСнт ΠΈ устанавливаСтС для свойств VerticalShift (для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ) ΠΈ/ΠΈΠ»ΠΈ HorizontalShift (для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ) Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ большС нуля.

    • Бвойство Source ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ссылку Π½Π° элСмСнт ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΠ·Π½ΠΈΠΊ эффСкт параллакса, Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ScrollViewer ΠΈΠ»ΠΈ элСмСнт, содСрТащий ScrollViewer, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ListView ΠΈΠ»ΠΈ RichTextBox.

    • Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ элСмСнт, Π²Ρ‹ добавляСтС этот элСмСнт Π² качСствС Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ элСмСнта управлСния ParallaxView. Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ элСмСнтом ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой элСмСнт UIElement, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ панСль, содСрТащая Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт параллакса, ParallaxView Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π·Π° элСмСнтом ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°. ПанСли Grid ΠΈ Canvas ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, поэтому ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с элСмСнтом управлСния ParallaxView.

    Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ создаСтся эффСкт параллакса для списка:

     
        
        
            
            <Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ x:Name="BackgroundImage" Source="Assets/turntable.png"
                   Stretch="Π£Π½ΠΈΡ„ΠΎΡ€ΠΌΠ° для заполнСния"/>
        
        
        
        
           Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1
           Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 2
           Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 3
           Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 4
           Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 5
           
    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 6
    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 7 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 8 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 9 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 10 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 11 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 13 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 14 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 15 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 16 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 17 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 18 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 19 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 20 Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 21

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

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

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