Պարզ անիմացիա՝ օգտագործելով խաչմերուկի դիտորդը

Դուք ունեք ձեր անիմացիան ձեր կայքում, բայց խնդիրն այն է, որ երբ դուք ոլորում եք դեպի այդ բաժինը, ձեր անիմացիան ավարտված է: Իհարկե, դուք ցանկանում եք, որ օգտվողը տեսնի ձեր անիմացիան, ուստի ինչպե՞ս եք պատրաստվում հետաձգել անիմացիան, մինչև այն տեսանելի լինի դիտակետին:

Այս հոդվածում ես ձեզ ցույց կտամ դա անելու մեկ եղանակ՝ օգտագործելով Intersection Observer API:

Ես ստեղծել եմ div տարր՝ դասի անվանմամբ «դեմո.

<div class="demo"><div>
 

Եվ ես սահմանեցի այս հատկությունները CSS-ում: Ես վերևում դրեցի 100 վժ, որպեսզի div տարրը չերևա էկրանին, որպեսզի ցույց տա անիմացիայի ժամանակը:

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

Ես ստեղծել եմ անիմացիան առանցքային կադրերի միջոցով: Ստորև ունեմ այս օրինակը, որը մենք կարող ենք օգտագործել css ֆայլի վրա: Սա կկենդանացնի տարրը ձախից աջ: Ես դրեցի ձախը -90vw, այնպես որ մենք կարող ենք ունենալ 10vw դեռ տեսանելի էկրանին, եթե ցանկանում եք, որ տարրը շարժվի ամեն անգամ, երբ այն տեսնում եք էկրանին: Ես դա ավելի ուշ կբացատրեմ:

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

Այնուհետև մենք կարող ենք օգտագործել այս առանցքային շրջանակը՝ սահմանելով animation-name, animation-duration և animation-iteration-count հատկությունը: Ստորև բերված օրինակը ձախից աջ դաս է, որը կարող ենք օգտագործել CSS ֆայլի վրա:

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

Հաջորդը javascript կոդ ստեղծելն է:

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

Յուրաքանչյուր տողի վերևի մեկնաբանությունները կբացատրեն javascript գործառույթը:

«entry.target.classList.remove(«ձախ-աջ»);» տողով հեռացրեք անիմացիան .ձախ-աջ դասը, երբ div տարրը տեսանելի չէ էկրանին: Հիշու՞մ եք մեր անիմացիայի կարգավորումներում 0%-ով մենք սահմանել ենք -90vh, որպեսզի տեսանելի լինի 10vh: Դրա պատճառն այն է, որ javascript ֆունկցիան դեռ կտեսնի div տարրը, և ձախ-աջ դասը չի հեռացվի, քանի դեռ անիմացիան ընթացքի մեջ է: Եթե ​​անիմացիոն .ձախ-աջ դասը կդարձնի տարրը էկրանում տեսանելի չտեսնելու ինչ-որ պահի, այն ձեզ այլ արդյունք կտա, երբ ֆունկցիան կանչվի: js սկրիպտը չի տեսնի այն էկրանին, հետևաբար կհեռացնի դասը, այնուհետև div տարրը կունենա իր սկզբնական դիրքը, ձախից՝ 0vh, որը տեսանելի է, այնուհետև այն նորից կկանչի ֆունկցիան և կավելացնի անիմացիան։ Եվ հետո այն կրկին անտեսանելի կլինի անիմացիայի սկզբնական դիրքի պատճառով: Դասը կհեռացվի և կավելացվի նորից ու նորից, դուք չեք տեսնի անիմացիայի գործընթացը այնպես, ինչպես սպասում էիք: Դուք կարող եք հեռացնել «entry.target.classList.remove(«ձախ-աջ»);» տողը: եթե ցանկանում եք, որ անիմացիան գործարկվի միայն մեկ անգամ, ապա լավ կլինի, եթե ձեր անիմացիայի հետ դասը ինչ-որ պահի տարրը տեսանելի դարձնի:

Սա դիրքի/տեսանելիության վրա հիմնված անիմացիայի ընդամենը մեկ եղանակ է: Ձեր կայքում անիմացիա ունենալը գրավում և ստիպում է դիտողներին ավելի երկար մնալ: