با CSS و لمس جاوا اسکریپت یک انیمیشن متنی چشمک زن بی نهایت بسازید

در این آموزش جدید، نحوه ایجاد افکت متنی چشمک زن/چشمک زن بی نهایت با انیمیشن های CSS و کمی جاوا اسکریپت را یاد خواهیم گرفت. به طور خاص، قسمت های متن انتخاب شده پس از یک دوره معین، رنگ ها را تغییر می دهند. پس از آن، انیمیشن دوباره راه اندازی می شود.

اثر متن ما

در اینجا چیزی است که ما می خواهیم ایجاد کنیم. این یک افزودنی عالی به یک نمونه کارها یا صفحه فرود شرکت، برای برجسته کردن مارک ها، نام ها، مکان ها و غیره است.

1. با نشانه گذاری HTML شروع کنید

در داخل یک کانتینر، یک عنصر بسته بندی تعریف می کنیم که متنی با مارک های معروف را در خود جای می دهد، مانند این:

1

<div class="container">

2

  <div class="blinking-wrapper">

3

    Accenture,

4

    Amazon

5

    Apple,

6

    Astrazeneca,

7

    Citigroup,

8

    Coca-Cola Co,

9

    China Merchants Bank,

10

    Disney

11

    Google,

12

    ...

13

  </div>

14

</div>

برای هر نام تجاری (تکه ای از متن) که می خواهیم متحرک سازی کنیم، آن را داخل یک می بندیم span عنصر و به آن بدهید data-number صفت. مقدار ویژگی سفارشی ترتیب انیمیشن را تعیین می کند. هرچه این عدد کمتر باشد، انیمیشن زودتر اجرا می شود. گفت: عنصر با data-number="1" مقدار مشخصه ابتدا متحرک خواهد شد، سپس این با data-number="2" مقدار ویژگی و غیره

در اینجا اسکلت نشانه گذاری مورد نیاز آمده است:

1

<div class="container">

2

  <div class="blinking-wrapper">

3

    Accenture,

4

    Amazon

5

    Apple,

6

    Astrazeneca,

7

    Citigroup,

8

    <span data-number="1">Coca-Cola Co</span>,

9

    China Merchants Bank,

10

    Disney

11

    Google,

12

    IBM,

13

    <span data-number="2">Intel</span>,

14

    JPMorgan Chase,

15

    Mastercard,

16

    McDonalds,

17

    Meta,

18

    NASA,

19

    <span data-number="4">Nestle SA</span>,

20

    Netflix,

21

    Nike,

22

    ...

23

  </div>

24

</div>

2. CSS را اضافه کنید

CSS بسیار ابتدایی خواهد بود. تنها چیزی که ما نیاز داریم این است که یک انیمیشن CSS را روی آن اعمال کنیم spanرنگ آنها از سفید به سایه دلخواه ما تغییر می کند. اما به یک نکته در اینجا توجه کنید: انیمیشن ها به صورت متوالی در هنگام بارگیری صفحه اجرا می شوند. در آن مرحله، ما را اضافه می کنیم blinking کلاس به لفاف و دادن spanتاخیرهای مناسب

در مورد شما، بسته به طرح‌بندی صفحه، ممکن است بخواهید افکت چشمک زن را در زمانی شروع کنید .blinking-wrapper عنصر در معرض دید قرار می گیرد.

در اینجا همه سبک ها وجود دارد:

1

/*CUSTOM VARIABLES HERE*/

2

3

.container {

4

  max-width: 1600px;

5

  padding: 0 15px;

6

  margin: 0 auto;

7

}

8

9

.blinking-wrapper {

10

  font-size: 50px;

11

}

12

13

.blinking-wrapper.blinking [data-number] {

14

  animation: changeColor 1.5s var(--delay, 0s);

15

}

16

17

@keyframes changeColor {

18

  to {

19

    color: var(--green);

20

  }

21

}

22

23

@media (max-width: 600px) {

24

  .blinking-wrapper {

25

    font-size: 25px;

26

  }

27

}

3. جاوا اسکریپت را اعمال کنید

همانطور که در بالا ذکر شد، جدا از اضافه کردن blinking کلاس به عنصر wrapper هنگامی که صفحه بارگیری می شود، تاخیرهای مناسبی را برای هر کدام تعیین می کنیم span برای تعیین زمان شروع انیمیشن چشمک زن آنها. عنصر اول هیچ تاخیری نخواهد داشت. همه بقیه به محض اتمام انیمیشن عنصر متحرک قبلی فعال می شوند.

البته می توانید تاخیرها را به صورت دستی تنظیم کنید یا زمان بندی را به دلخواه تنظیم کنید.

در اینجا کد جاوا اسکریپت مورد نیاز است:

1

const blinkingWrapper = document.querySelector(".blinking-wrapper");

2

const animatedEls = blinkingWrapper.querySelectorAll("[data-number]");

3

const TOGGLE_CLASS = "blinking";

4

const BASE_DELAY = 1.5;

5

6

window.addEventListener("load", function () {

7

  blinkingWrapper.classList.add(TOGGLE_CLASS);

8

  animatedEls.forEach(function (el, index) {

9

    if (index != 0) {

10

      const delay = BASE_DELAY * el.dataset.number - BASE_DELAY;

11

      el.style.setProperty("--delay", `${delay}s`);

12

    }

13

  });

14

});

پخش مجدد انیمیشن ها

با قرار دادن این کد، انیمیشن های ما برای یک بار به صورت مورد انتظار پخش می شوند. اما اگر بخواهیم آنها را به ترتیب (با حفظ تأخیرهای مورد نظر) بی نهایت پخش کنیم چه؟ فقط با استفاده از infinite کلمه کلیدی برای تعداد تکرار انیمیشن کار نخواهد کرد

در چنین حالتی، ما منتظر می‌مانیم تا تمام انیمیشن‌ها قبل از شروع مجدد با استفاده از آن، تمام شوند animationend رویداد آخرین عنصر متحرک – یکی با بزرگترین data-number. یک راه سریع برای یافتن اینکه کدام عنصر باید باشد، دادن دستی یک ID/کلاس منحصر به فرد به آن است. از طرف دیگر، می‌توانیم کدی برای بازیابی بزرگترین عدد از همه بنویسیم data-number مقادیر ویژگی مانند زیر:

1

...

2

3

function getMaxNumber() {

4

  const numbers = Array.from(animatedEls).map(function (el) {

5

    return el.dataset.number;

6

  });

7

  return Math.max(...numbers);

8

}

در مرحله بعد، عنصر مورد نظر را هدف قرار می دهیم و به آن گوش می دهیم animationend رویداد.

1

...

2

3

blinkingWrapper

4

  .querySelector(`[data-number="${getMaxNumber()}"]`)

5

  .addEventListener("animationend", function () {

6

    //stuff here

7

  });

در داخل آن، ما سه کار را انجام خواهیم داد:

• را حذف کنید blinking کلاس از عنصر wrapper.
• نیروی الف جریان مجدد به آن عنصر با محاسبه ارتفاع آن یا هر چیزی که باعث می شود بدون بازگرداندن چیزی دوباره جریان یابد.
• دوباره اضافه کنید blinking کلاس به آن

به این ترتیب، انیمیشن‌های CSS با تأخیر در هر بار اتمام دسته قبلی از سر گرفته می‌شوند. اگر دوباره جریان ایجاد نکنیم، انیمیشن ما دوباره راه اندازی نمی شود. می توانید با حذف عمل جریان مجدد تست کنید.

در اینجا کد جاوا اسکریپت مورد نیاز است:

1

...

2

3

blinkingWrapper

4

  .querySelector(`[data-number="${getMaxNumber()}"]`)

5

  .addEventListener("animationend", function () {

6

    blinkingWrapper.classList.remove(TOGGLE_CLASS);

7

    void blinkingWrapper.offsetHeight;

8

    blinkingWrapper.classList.add(TOGGLE_CLASS);

9

  });

یک پیاده‌سازی جایگزین، به‌جای اجبار یک جریان مجدد که بسته به طرح‌بندی‌های شما می‌تواند گران باشد، این است که پس از کوتاه‌ترین تأخیر ممکن، کلاس را به wrapper اضافه کنید. زمان:

1

...

2

3

blinkingWrapper

4

  .querySelector(`[data-number="${getMaxNumber()}"]`)

5

  .addEventListener("animationend", function () {

6

    blinkingWrapper.classList.remove(TOGGLE_CLASS);

7

    setTimeout(function () {

8

      blinkingWrapper.classList.add(TOGGLE_CLASS);

9

    }, 0);

10

  });

جدا از این روش هایی که در اینجا مورد بحث قرار گرفت، روش های دیگری نیز وجود دارد. در صورت تمایل به به ما اطلاع دهید ایکس یا در نظرات نسخه ی نمایشی اگر از دیگری برای انجام کاری مشابه استفاده کرده اید!

نتیجه

در این آموزش، ما موفق شدیم یک افکت CSS چشمک زن بی نهایت با آن بسازیم انیمیشن های خیره کننده به لطف animationend رویداد. اگر می‌خواهید بخش‌های خاصی از متن مانند آخرین پروژه‌ها، مشتریان برتر، مهارت‌های برتر و غیره را برجسته کنید، این نوع افکت مفید است.

این هم دوباره اثر ما: