Original videoga havola: Epic hover effect Ushbu saytga havola: Advanced Team

Yuqoridagi video-da siz ikkita chirolyli effektni ko'rishingiz mumkin: Rangli zarralar effekti va rasim ustiga sichqoncha borgandagi effekt. Biz bu maqolada ikkinchi effektni qanday qilnishini o'rganib chiqamiz.

Effektni bajarilishini rejalashtirish

Birinchidan: tepadagi rasmda ko'rib turganimizdek, hover effekti qilganimizdan keyin animatsiyaning 50% vaqti o'tganda rasm kattalashganligini ko'rishimiz mumkin. Ikkinchidan esa shu vaqtga kelib qandaydur rasmni hiralashuvini ko'rishimiz mumkin. Pastdagi rasimda:

Kodlash

Asosiy kod

Keyingi navbatda kodlashni boshlaymiz. Oldin html-elementimizni

<div id="card"></div>

va ushbu kard elementimizni css qoidalarini berishni boshlaymiz, demak to'rburchak chakl va oziroq ko'rinib turishi uchun ingichka chegaralar berib chiqamiz.

  #card {
    width: 580px;
    aspect-ratio: 2 / 3;
    border: 0.25rem solid rgb(255 255 255 / 15%);
  }

Va bizning Elementnimiz quydagi ko'rinishda bo'lishi mumkin.

Bu kartamizga rasm qo'shamiz:

<div id="card">
  <img  src="https://images.unsplash.com/photo-1520210599173-ba8e9fc44395?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80"/>
</div>

Rasmni kattalshtirish

Va ushbu rasim 100% balandlikni,kengligini egallashini ta'minalymiz. Va albatta rasm uchun css qoidlarini berayotganda object-fit: cover; qoidasini esdan chiqarmang, chungi bergan rasmimiz berilgan aspect-ratio: 2 / 3 mos kelmasdan, cho'zilib yoki qisqarib buzilishi mumkin va biz bu bilan buning oldini olamiz.

 #card {
   width: 580px;
   aspect-ratio: 2 / 3;
   border: 0.25rem solid rgb(255 255 255 / 15%);
 }

 #card > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

Endigi navbatda kartamiz ustidan hover qilganimzda rasmni kattalashish effektini bajarishimiz kerak bo'ladi. Ya'ni ichkariga va tashqariga puls effektini qilgandek. Va shuni bajaradigan bitta css animatsiyasini yaratib olamiz:

#card {
   width: 580px;
   aspect-ratio: 2 / 3;
   border: 0.25rem solid rgb(255 255 255 / 15%);
 }

 #card > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
  @keyframes pulse {
    from, to {
      scale: 1; 
    }

    50% {
      scale: 1.08;
    }
  }

Bu yaratgan animatsiyaning ma'nosi: boshlanishida va tugashida kattalashish koefisienti 1-ga teng yani o'zgarishsiz, lekin animatsiya 50%-daligida oziroq ya'ni 8%-ga yoki 0.08 ga kattalashtiramiz;

Va ushbu animatsiyani biz kartani hover qilganimzda rasm uchun beramiz:

#card {
   width: 580px;
   aspect-ratio: 2 / 3;
   border: 0.25rem solid rgb(255 255 255 / 15%);
 }

 #card > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
  @keyframes pulse {
    from, to {
      scale: 1; 
    }

    50% {
      scale: 1.08;
    }
  }

  #card:hover > img {
    animation: pulse 800ms ease-in-out;
  }

Bu yerda sizda bitta savol tug'ilshi mumkin, men qancha vaqt va animatsiya bajarilishi funsiyasini qayerdan bilaman? Buni shunchaki xar-hil vaqt va funsiyalarni ishlatib ko'rib o'zingizga mosini tanlashingiz mumkin, bizga eng ma'qul kelgani ushbu 800ms va ease-in-out bo'ldi.

Va yana bitta kutilmagan holatni ko'rishimiz mumkin, rasm kattalashib, belgilangan chegaradan chiqib ketmoqda, va biz buni quydagicha yechimini berishimiz mumkin:

#card {
   width: 580px;
   aspect-ratio: 2 / 3;
   border: 0.25rem solid rgb(255 255 255 / 15%);
   overflow: hidden;
 }

 #card > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }
 
  @keyframes pulse {
    from, to {
      scale: 1; 
    }

    50% {
      scale: 1.08;
    }
  }

  #card:hover > img {
    animation: pulse 800ms ease-in-out;
  }

SVG bilan effekt berish

Keyingi qadam eng qiziqarli va men unchalik "professional" bo'lmagan joyi - "SVG" bilan ishlash.

SVG - bu nima? Xo'sh qisqa qilib aytgnda svg da berilgan joyni pixellarni boshqarish imkonini beradi. Siz deyarli hamma narsa yaratishingiz mumkin:

Lekin SVG bilan ishlashni eng zo'r joyi u sizga turli hil effektlar yodamida rasmlarni filtrlashga yordam beradi.

SVG yodamida rasmni filtrlash

Demak biz, xatto sahifada umumuman ko'rinmydigan svg yaratib olsihimiz mumkin:

<svg style="display: none;">
  
</svg>

va ushbu ko'rinmas svg ga biz filtrning ta'rifini defs - ni berishimiz mumkin. Va biz shu joyida <feTurbulence /> elementidan foydalanga holda effet yaratamiz.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence />
    </filter>
  </defs>
</svg>

E'tibor bersangi rasmda shovqinni vjr-vjr )) ko'rishingiz mumkin;

Bunday SVG-larni yaratish uchun juda ham qilay web-sahifa mavjud:

SVGTurbulenceGenerator

Biz bu saytga kirib <feTurbulence /> - filtri nima bajaryotganini ko'rishimiz mumkin bo'ladi.

Saytda effekt turini fractalNoise-ga o'zgartiring:

Va bizga kerak bo'lgan effektni biz yaratib olishimiz mumkin bo'ladi.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
      />
    </filter>
  </defs>
</svg>

Keyingi biznig oldimizda turgan masala ushbu effetni qanday qilib rasmga filter sifatida ishlatishimiz mumkin? Demak, biz tepada berilgan kodimizda filterning id="noise" qilib bergan edik. Va shuni bilganimiz holda biz ushbu id-ni css qoidamizda ishlatishimiz mumkin bo'ladi.

#card {
   width: 580px;
   aspect-ratio: 2 / 3;
   border: 0.25rem solid rgb(255 255 255 / 15%);
   overflow: hidden;
 }

 #card > img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   filter: url(#noise);
 }
 
  @keyframes pulse {
    from, to {
      scale: 1; 
    }

    50% {
      scale: 1.08;
    }
  }

  #card:hover > img {
    animation: pulse 800ms ease-in-out;
  }

Endi bizda statik effetk mavjud lekin bizning rasm ko'rinmay qoldi. Xo'sh, ushubu filterni bizning rasmni yo'qmasdan qo'llashning yo'li bormi ekan? ....

Va biz uchun bu xolatda <feDisplacementMap /> degan narsa mavjud. Keling biz buni filtrimizga qo'shamiz.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
      />
      <feDisplacementMap in="SourceGraphic" />
    </filter>
  </defs>
</svg>

Va keling biz birinchi filtrimizni natijasini ya'ni result="static"-ni keyingi filtrimizga beramiz.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
        result="static"
      />
      <feDisplacementMap in="SourceGraphic" in2="static"/>
    </filter>
  </defs>
</svg

🤔️️️️ bu nimaga hech nimani o'zgartirmayapti?... Chunki oxirgi filtrimizda scale="0" bo'ladi va bu bizga filterni ko'rinmasligi sababini tushuntirishi mumkin, va biz bu qiymatni o'zgartisak yani scale="10", scale="20", scale="30" qilsak o'zgarishni sezishimiz mumkin.

Effekt bilan animatsiya qilishi

Bu qadamda biz qanday qilib animatsiya qilish mumkinligini o'ylayotgandursiz? Balki JavaScriptda foydalanib nimadur qilish bir yo'lidur... Lekin biz boshqa ya'ni <animate> - elementidan foydalanishimiz mumkin.

Bu element uchun nimani animatsiya qilishi, qanday qiymatdan-qanday qiymatgacha, va uning davomiligini berish kifoya qiladi.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
        result="static"
      >
        <animate 
          attributeName="seed" 
          values="0;100" 
          dur="800ms"  
          repeatCount="intefinite" 
        />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="static"/>
    </filter>
  </defs>
</svg

Lekin agar biz repeatCount="intefinite" qilib qoldirsak bu effekt umuman ketmaydi, va biz bu effekt faqat hover qilganimizda bo'lishini hohlaymiz. shuning uchun uni 1 qiymati bilan qoldiramiz:

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
        result="static"
      >
        <animate 
          attributeName="seed" 
          values="0;100" 
          dur="800ms"  
          repeatCount="1" 
        />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="static"/>
    </filter>
  </defs>
</svg

Va albatta bu animatsiya biz hover qilmagunimizcha boshlanmasligi kerak, shuncing uchun biz:

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
        result="static"
      >
        <animate 
          attributeName="seed" 
          values="0;100" 
          dur="800ms"  
          repeatCount="1" 
          begin="card.mouseenter"
        />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="static" scale="20"/>
    </filter>
  </defs>
</svg

begin="card.mouseenter" bilan buni yechimini berishimiz mumkin bo'ladi.

Agar e'tibor bergan bo'lsangiz, bizning rasmimi, animatsiya boshlanmasdanoq, hira bo'lib qolgan, buning sababi biz, scale="20" qilib statik qiymat berganimiz, lekin buni boshida va oxirida 0 bo'lishi kerak edi. Buning yechimi oddiy, biz animatsiyamizni yana bir bor ishlatamiz va bu muammoning oldini olamiz.

<svg style="display: none;">
  <defs>
    <filter id="noise">
      <feTurbulence 
        baseFrequency="0.7,0.8" 
        seed="0" 
        type="fractalNoise" 
        result="static"
      >
        <animate 
          attributeName="seed" 
          values="0;100" 
          dur="800ms"  
          repeatCount="1" 
          begin="card.mouseenter"
        />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="static" scale="0">
         <animate 
          attributeName="scale" 
          values="0;40;0" 
          dur="800ms"  
          repeatCount="1" 
          begin="card.mouseenter"
        />
      </feDisplacementMap>
    </filter>
  </defs>
</svg

Va oxirgi animation elementdagi values="0;40;0" hover qilmasdan oldin scale="0" bo'lishi, animatsiya o'rtasida scale="40" bo'lishi va eng oxirida esa yana scale="0" bo'lishini taminlaydi. Va natijada:

O'ylaymanki bugungi maqolam sizga maqul keldi.