PixelIvy & Laravel
PixelIvy PixelIvy
ΠŸΡ€ΠΈΠ²Π΅Ρ‚, я Ρ‚ΡƒΡ‚ Ρ€ΠΈΡΡƒΡŽ эскиз ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠ΅Ρ‡Ρ‚Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ, ΠΏΠ°ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ садовой сцСны для Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΈ Π΄ΡƒΠΌΠ°ΡŽ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ это Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ Π² ΠΊΠΎΠ΄Π΅ – ΠΌΠΎΠΆΠ΅Ρ‚, ΠΏΠ»Π°Π²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π΅ΠΆΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° Ρ„ΠΎΠ½Π΅? Как Ρ‚Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡˆΡŒ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ идСю Π² чистый, Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½?
Laravel Laravel
Начну с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΡŽ эскиз Π½Π° слои – сначала Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Ρ„ΠΎΠ½Π°, ΠΏΠΎΡ‚ΠΎΠΌ элСмСнты срСднСго ΠΏΠ»Π°Π½Π° ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½. Для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° я Π±Ρ‹ использовал CSS linear-gradient с ΠΏΠ°ΡΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°ΠΌΠΈ, ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π»Ρ‘Π³ΠΊΡƒΡŽ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΌΡΠ³Ρ‡ΠΈΡ‚ΡŒ края. ΠΠ½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ keyframes ΠΈΠ»ΠΈ нСбольшой JS-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ GSAP. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΡƒΡŽ параллакс-ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ для ΠΊΠ»ΡƒΠΌΠ± ΠΈ Π΅Π΄Π²Π° Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠ΅ ΠΌΠ΅Ρ€Ρ†Π°Π½ΠΈΠ΅ Π½Π° каплях росы. Код Π»ΡƒΡ‡ΡˆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΌ: SCSS-миксин для Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта ΠΈ нСбольшой скрипт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅. Π’Π°ΠΊ ΠΈ получится чистоС Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΈΠΊΠ° останСтся обособлСнной, ΠΈ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π»Π΅Π³ΠΊΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.