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

در یک مقاله اخیر، نحوه تنظیم یک گرادیان پس‌زمینه روی متن را نشان دادیم. نسخه ی نمایشی CodePen در زیر نتیجه را نشان می دهد.

اگر مطمئن نیستید که چگونه به این نتیجه رسیده‌ایم، حتماً آن مقاله را بخوانید، همانطور که در زیر به این مثال می‌پردازیم.

به خاطر این نسخه ی نمایشی، بیایید چند رنگ اضافی به پس زمینه گرادیان خود اضافه کنیم:

 h1 { background-image : linear-gradient ( 45 deg , #ffb3ba , #c49c6e , #bfbf76 , #77b084 , #ff7e74 , #3b82f6 , #c084fc , #db2777 ) ; }

اگر background-clip: text و text-color: transparent برای لحظه‌ای خاموش کنیم، درک بهتری از نحوه پرکردن گرادینت کادر محتوای متن را خواهیم داشت.

بیایید اکنون مراحل متحرک سازی گرادیان پس زمینه خود را طی کنیم.

مرحله 1: تنظیم اندازه پس زمینه

برای متحرک سازی پس زمینه گرادیان خود، باید آن را بزرگتر از کادر محتوای متن کنیم تا نتوانیم همه آن را به یکباره ببینیم. ما می‌توانیم این کار را با ویژگی background-size مفید انجام دهیم. (در اینجا می توانید همه چیز را در مورد اندازه پس زمینه بخوانید.)

من عرض گرادیان پس‌زمینه را سه برابر عرض عنصر عنوان خود تنظیم می‌کنم:

 h1 { background-size : 300 % 100 % ; }

اکنون، همانطور که در زیر مشاهده می کنید، تنها یک سوم پس زمینه گرادیان در هر زمان قابل مشاهده خواهد بود.

مرحله 2: تنظیم یک انیمیشن

در مرحله بعد، انیمیشنی را راه اندازی می کنیم که پس زمینه را جابجا می کند تا در طول زمان قسمت های مختلف آن را ببینیم.

ما می توانیم یک قانون انیمیشن ساده مانند این را تنظیم کنیم:

 h1 { animation : gradientAnimation 8 s linear infinite ; }

که هر 16 ثانیه یک بار پس‌زمینه را به جلو و عقب می‌برد.

در مرحله بعد، یک دستور @keyframes را تنظیم می کنیم:

 @keyframes gradientAnimation { 0% { background-position : 0 ; } to { background-position : 100 % ; } }

این عبارت ساده @keyframes پس‌زمینه ما را هر هشت ثانیه از بالا سمت چپ به سمت راست پایین منتقل می‌کند.

در قلم زیر، ما یک بار دیگر background-clip: text و color: transparent غیرفعال کرده‌ایم تا بتوانیم ببینیم در پس‌زمینه چه اتفاقی می‌افتد.

هنگامی که background-clip: text و color: transparent را دوباره فعال می‌کنیم، محصول نهایی را می‌بینیم.

خیلی باحال!

متحرک سازی تصویر پس زمینه

در مقاله ما در مورد گفت ن افکت ها و الگوهای گرادیان به متن، از تصویر پس زمینه گلدار نیز استفاده کردیم. (قلم را در اینجا ببینید.)

بیایید به انیمیشن سازی آن پس زمینه نیز بپردازیم. ما این کار را کمی متفاوت انجام می دهیم، زیرا نمی خواهیم تصویر پس زمینه را تحریف کنیم.

بیایید background-size: contain نسخه آزمایشی اصلی باشد و اصلاً اندازه پس‌زمینه تنظیم نکنیم. که ما را با این باقی می گذارد:

 h1 { color : transparent ; -webkit-background-clip : text ; background-clip : text ; background-image : url ( floral.jpg ) ; -webkit-text-stroke : 1 px #7512d7 ; text-stroke : 1 px #7512d7 ; animation : gradientAnimation 20 s linear infinite ; animation-direction : alternate ; } @keyframes gradientAnimation { 0% { background-position : 0 ; } to { background-position : 100 % ; } }

نتیجه در نسخه ی نمایشی CodePen در زیر نشان داده شده است.

اگر می‌خواهید ببینید در پس‌زمینه چه اتفاقی می‌افتد، برای یک لحظه background-clip: text و text-color: transparent را خاموش کنید.

تصویر پس زمینه ما به طور پیش فرض تکرار می شود، که برای این تصویر خاص خیلی بد به نظر نمی رسد. (فقط به دلیل علاقه، سعی کنید background-repeat: no-repeat را اضافه کنید تا ببینید بدون پس‌زمینه تکراری چه اتفاقی می‌افتد.) در موقعیت‌های دیگر، جایی که تصویر پس‌زمینه به خوبی کاشی نمی‌شود، ممکن است بخواهید از تکرار تصویر جلوگیری کنید. سپس background-size برای بزرگتر کردن تصویر استفاده کنید، همانطور که با پس زمینه گرادیان بالا انجام دادیم. مثلا:

 h1 { background-repeat : no-repeat ; background-size : 120 % ; }

در اینجا تأثیر انجام این کار بر روی نسخه نمایشی گل ما است.

نتیجه

ما می‌توانستیم انیمیشن‌های بسیار دیدنی‌تری نسبت به این بسازیم، اما هدف این بود که آن را در اینجا ساده نگه داریم. می‌توانید در نحوه شروع کار با انیمیشن CSS بیشتر به تحلیل فریم‌های کلیدی و انیمیشن‌های CSS بپردازید. همچنین می توانید با زمان بندی انیمیشن، زاویه شیب و غیره بازی کنید.

همانطور که در مقاله قبلی ذکر شد، با این کار لذت ببرید، اما زیاده روی نکنید، زیرا این نوع انیمیشن می تواند آزار دهنده باشد. یک پس‌زمینه متحرک ظریف روی یک عنوان ممکن است آن حس علاقه یا فتنه‌ای را که برای درگیر نگه‌داشتن مخاطبان خود به آن نیاز دارید، اضافه کند.

خبرکاو