Təmiz CSS-da 8 faydalı imkan: 5) Parallaks-şəkillər

10.03.2019 0 PAYLAŞIM 262 OXUNMA

#Step IT Academy tərəfindən təqdim olunur  





    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasına davam edirik.

Öncəki hissələr:

1) «Yapışqan» footer
2) İmage zoom on hover
3) Daimi Night Mode
4) Custom bullet-lar


5. Parallaks-şəkillər

Bu məhşür effekt daima istifadəçilərin diqqətini çəkir. Əgər siz skrollinq zamanı səhifənin canlı görsənməyini istəyirsinizsə bu effektdən istifadə edə bilərsiniz. Skroll zamanı adi şəkillər yer dəyişdirərkən, parallaks-şəkillər olduqları yerdə qalırlar.

CSS-nümunə (yalnız CSS)
Burada əsas element backround-attachment: fixed sətridir. O şəklin yerləşməsini müəyyən pozisiyaya fiksləyir. Pəncərədə fırlanma baş verərkən şəkil elə olduğu yerdə qalır.belə bir təəsurat yaranır ki, sanki şəkil bütün saytın arxasında durur. Bu effektin əksini sınamaq üçün background-attachment:scroll istifadə edin.




CSS+Javascript