Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada paralaks effektini hosil qilamiz. Buning uchun biz CSSning ajoyib uslublaridan foydalanamiz. Albatta, HTMLdan ham)

 

Keling, avvalo, bir narsani aniqlashtirib olaylik. Parallaks o'zi nima? Paralaks -bu ko'rish burchagini o'zgartirganda yaqin narsaning uzoqroqdagiga nisbatan siljishi. Ushbu effekt tufayli biz obyektlarni hajmda ko'ramiz, chuqurlikni idrok etamiz va nima yaqinroq va nima ko'proq ekanligini tushunamiz.

Masalan, mana bu animatsiyaga qarang:

Paralaks effekti
Paralaks effekti

 

"Bu paralaks effekti" deb yozilgan yozuv, sahifa scroll qilinganda orqadagi rasmga nisbatan tezroq harakatlanayapti. Bizda shunday his paydo bo'layaptiki, rasm matnga nisbatan chuqurroqda turgandek. Mana shu paralaks!

 

Keling, endi o'zimiz mana shu paralaksni sahifamizda shakllantiramiz:

HTML:

Ushbu maqola uchun HTML da faqat matndan foydalandim. Siz o'zingiz xohlagan obyektdan foydalanishingiz mumkin. <header> yordamida saytning bosh qismini aniqlab olamiz va unga h1 darajasidagi sarlavha matnini, sarlavha osti matnini kiritamiz.

<header>
  <h1>Bu paralaks effekti</h1>
  <small>Biror bir matin</small>
</header>

 

Endi esa CSS ga o'tamiz:

Avvalo, html va body uchun umumiy uslublarni yozib olamiz. Ekran to'liq qoplanishi uchun html uchun  height: 100%;  overflow: hidden; xossalarini, body uchun margin: 0; padding: 0; xossalarini yozamiz. Bodyda paralaks effekti uchun eng muhim narsa bu  perspective: 1px; transform-style:  preserve-3d;  overflow-y: scroll; overflow-x: hidden; xossalaridir. Bu xossalar 3d ni hosil qiladi. Ya'ni, bu paralaks effekti aslida 3 o'lchovli muhitda paydo bo'ladi. Ushbu holatda bizga faqat y o'qi bo'yicha harakat zarur, x o'qi bo'yicha esa kerak emas. Shuning uchun  overflow-y: scroll; overflow-x: hidden; xossalarini kiritdik. 

So'ngra header uchun umumiy xossalarni yozamiz. Bunda  transform-style: inherit;  xossasini unutmasligimiz zarur. Chunki inherit - o'z qiymatlarini ota-ona elementiga qarab oladi.

Eng muhim qism shuki, biz headerga :before psevdoklasini biriktiramiz. Va paralaks effektini hosil qiluvchi eng asosiy xossalarni kiritamiz. Umumiy xossalar ketidan z o'qi bo'yicha -1 qiymatni olishini belgilaymiz. Chunki header orqa fonga nisbatan bizga yaqinroq turadi. Keyin esatransform-origin: center;  xossasini ishlatamiz. Chunki bizning holatda transformatsiya markazga nisbatan sodir bo'lmoqda. Orqa fonga rasm yuklaymiz. Va yana bir muhim narsa, transition: 1s; ni unutmasligimiz kerak. Chunki transformatsiya, albatta, biror bir vaqt ichida sodir bo'ladi.

Hammasidan ham eng muhimi - bu transform: translateZ(-1px) scale(2);dir. Ushbu xossa aynan paralaksni hosil qilib beruvchi xossadir.
 

CSS:

html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  perspective: 1px; 
  transform-style: preserve-3d;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Amatic SC', cursive;
  color: #fff;
}
header {
  box-sizing: border-box;
  min-height: 100vh;
  text-align: center;
  padding-top: 35%;
  transform-style: inherit;
  width: 100vw;
}
header::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transform-origin: center;
  min-height: 100vh;
  background-image: url('/*Orqa fon rasmining URL-manzili*/');
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s;
  /* Paralaks */
  transform: translateZ(-1px) scale(2);
}
header h1 {
  margin-top: -100px;
  font-size: 42px;
}

 

Keling endi natijani ko'ramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!