- Darslar, Dasturlash Darslar, Grafika va Dizayn

HTML va CSS yordamida Parallax effecti

Assalom alaykum ismim SaidAbbos, Hozir siz bilan sayt sahifasi uchun oddiy ammo chiroyli parallax effektini yaratamiz. Albatta bu judaoddiy va oson bajaralidigan ish, aslida ushbu maqoladan maqsad ham web dasturlash sohasiga endigina qadam qo’ygan, ishni nimadan boshlashni bilmayotgan do’stlarimizga qo’lidan nimadur kelishini ko’rsatib ruhiyatini ko’tarish, demak boshladik.

1) Eng avval saytimiz asosiy papkasiga kerakli suratlar joylangan «images» momli papkani yuklaymiz.

2) Papka yoniga «index.html» nomli fayl yaratamiz.

  • «index.html» faylda oddiy html sahifa shakllantirmiz va «title» teglari ichiga sahifa nomini yozamiz:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Parallax Page</title>
  </head>
  <body>

  </body>
</html>
  • «body» teglari orasiga ulkan fotosuratni fon shaklida saqlaydigan «section» tegi yaratamiz va fonga surat biriktiradigan ko’rsatma bilan style atrebutini qoshamiz:
<section style="background-image: url(images/1.jpg);"></section>
  • «sec-text» class nomi bilan «div» tegi yaratamiz, ichiga avval » sec-text__title» class nomi bilan «h3» tegi yaratib, qo’shalaq «h3″ teglari orasiga istalgan sarlavhani kiritamiz. » sec-text__dsc » class nomi bilan «p» tegi yaratamiz ichiga istalgan ma’lumotni joylaymiz:
    <div class="sec-text">
      <h3 class="sec-text__title">Malumotlar va kontent uchun blok !</h3>
      <p class="sec-text__dsc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        unde. Deserunt ex eveniet voluptatum aliquam aperiam odit eum 
        temporibus, harum quae, maiores, similique iste veniam? Blanditiis 
        accusantium sint?Exercitationem laboriosam tenetur sit reiciendis 
        illo, repellat veritatis repudiandae nihil, vel accusantium adipisci
        distinctio dolorem eum nobis corporis consequuntur deserunt illum a
        architecto? Consequuntur eaque voluptates asperiores laborum
      </p>
    </div>
  • Ohirgi harakat orqali istagancha surat va ma’lumot qo’shishimiz mumkin. Sahifa chiroyli ko’rinishi uchun bir nechta suratlar va ma’lumotlar qo’shamiz:
<section style="background-image: url(images/2.jpg);"></section>
    <div class="sec-text">
      <h3 class="sec-text__title">Malumotlar va kontent uchun blok !</h3>
      <p class="sec-text__dsc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        unde. Deserunt ex eveniet voluptatum aliquam aperiam odit eum 
        temporibus, harum quae, maiores, similique iste veniam? Blanditiis 
        accusantium sint?Exercitationem laboriosam tenetur sit reiciendis 
        illo, repellat veritatis repudiandae nihil, vel accusantium adipisci
        distinctio dolorem eum nobis corporis consequuntur deserunt illum a
        architecto? Consequuntur eaque voluptates asperiores laborum
      </p>
    </div>
<section style="background-image: url(images/3.jpg);"></section>
    <div class="sec-text">
      <h3 class="sec-text__title">Malumotlar va kontent uchun blok !</h3>
      <p class="sec-text__dsc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        unde. Deserunt ex eveniet voluptatum aliquam aperiam odit eum 
        temporibus, harum quae, maiores, similique iste veniam? Blanditiis 
        accusantium sint?Exercitationem laboriosam tenetur sit reiciendis 
        illo, repellat veritatis repudiandae nihil, vel accusantium adipisci
        distinctio dolorem eum nobis corporis consequuntur deserunt illum a
        architecto? Consequuntur eaque voluptates asperiores laborum
      </p>
    </div>
<section style="background-image: url(images/4.jpg);"></section>
    <div class="sec-text">
      <h3 class="sec-text__title">Malumotlar va kontent uchun blok !</h3>
      <p class="sec-text__dsc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus,
        unde. Deserunt ex eveniet voluptatum aliquam aperiam odit eum 
        temporibus, harum quae, maiores, similique iste veniam? Blanditiis 
        accusantium sint?Exercitationem laboriosam tenetur sit reiciendis 
        illo, repellat veritatis repudiandae nihil, vel accusantium adipisci
        distinctio dolorem eum nobis corporis consequuntur deserunt illum a
        architecto? Consequuntur eaque voluptates asperiores laborum
      </p>
    </div>

3) «index.html» fayli yoniga «style.css» faylini yaratamiz:

«index.html» faylimizda «head» teglari orasiga «style.css» faylini ulash uchun «link» tegini yozamiz:

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Parallax Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  • «style.css» faylimiz ichiga avval «body uchun ichki va tashqi egallash maydoni, sahifada qo»llaniladigan shrift, hamda barcha yozuvlar uchun matn rangini kiritamiz:
      body {
          margin: 0;
          padding: 0;
          font-family: sans-serif;
          color: #262626;
      }
  • section tegi uchun kenglik, balandlik, chegara hisobi, fon sozlamarini belgilaymiz:
      section {
          width: 100%;
          height: 100vh;
          box-sizing: border-box;
          background: no-repeat center / cover;
          background-attachment: fixed;
      }
  • » sec-text » class nomiga ega div tegi uchun ichki masofa va avtomatik balandlikni belgilaymiz:
      .sec-text {
          padding: 4% 8%;
          height: auto;
      }
  • » sec-text__title » class nomli sarlavha uchun ichki va tashqi masofa, hamda yozuv hajmini belgilaymiz:
      .sec-text__title {
          margin: 0;
          padding: 0;
          font-size: 2em;
      }
  • » sec-text__dsc » class nomli p tegimiz uchun yozuv hajmini belgilaymiz:
      .sec-text__dsc {
          font-size: 1em;
      }

Shu bilan oddiygina parallax effektimiz tayyor va natijani ushbu sahifada ko’rishingiz mumkin: Demo Sahifa.