با استفاده از این نکات و ترفندهای انیمیشن، وب سایت خود را شکوفا کنید.
انیمیشن ها و انتقال ها بخش مهمی از طراحی وب هستند. افزودن انیمیشن های ظریف به صفحه وب شما آن را جذاب تر می کند. انیمیشن های ساده مانند آیکون های متحرک، تایپوگرافی جنبشی و آرم های متحرک می توانند به بهبود تجربه کاربر کمک کنند. پنج ترفند انیمیشنی عالی را یاد بگیرید که می تواند به شما کمک کند تا وب سایت خود را زنده کنید.
1. تبدیل یک عنصر در شناور
یکی از روش‌های رایج طراحی، داشتن عنصری است که در صورت تعامل با آن، افزایش می‌یابد. به عنوان مثال، ممکن است بخواهید زمانی که شخصی ماوس خود را روی آن قرار می دهد، دکمه ها را کمی به سمت بالا ترجمه کنید. شما می توانید با استفاده از ویژگی تبدیل CSS به این هدف برسید.
با فرض اینکه یک دکمه دارید:
<button>
Click me
</button>
شما به بدنه سند و همچنین دکمه استایل دادید:
/* Aligns the button to the center of the page */
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: black;
}
/* Styles the button */
button {
padding: 1em 2em;
background: blue;
border: 0;
color: white;
border-radius: 0.25rem;
cursor: pointer;
font-size: 2rem;
transition: transform 500ms;
}
/* Hover states */
button:hover,
button:focus {
transform: translateY(0.75rem) 500ms;
}
با آخرین بلوک، حالت های شناور و فوکوس را روی دکمه تنظیم می کنید. در هر دو حالت، دکمه را در امتداد محور Y با 0.75rem ترجمه می کنید. دکمه به شکل زیر خواهد بود:
هنگامی که ماوس خود را روی دکمه قرار می دهید، در جهت بالا حرکت می کند. انتقال نیم ثانیه (500 میلی ثانیه) طول می کشد تا تکمیل شود. این الگویی است که می‌توانید نه تنها روی دکمه‌های خود، بلکه بر روی سایر عناصر (مانند تصاویر) نیز پیاده‌سازی کنید.
2. اعلام چند فریم کلیدی با یک اعلان
یکی دیگر از الگوهای رایج در انیمیشن های CSS تکرار چندین بار روی یک مقدار است. این می تواند یک رنگ، اندازه یا جهت خاص باشد. شما می توانید با استفاده از انیمیشن های فریم های کلیدی CSS با اعلام چندین فریم کلیدی با یک اعلان به این هدف دست یابید.
دکمه ای که در قسمت قبل ایجاد کردید را در نظر بگیرید. شاید بخواهید وقتی روی دکمه کلیک می کنید، روی چندین رنگ پس زمینه تکرار کنید. اما شما همچنین می خواهید در مراحل مختلف انیمیشن از همان رنگ عبور کنید. بیایید ببینیم چگونه در کد به آن دست یابیم.
ابتدا، شما می خواهید دکمه را فقط با کلیک کردن متحرک کنید. بنابراین یک فایل script.js ایجاد می‌کنید که در داخل آن به دکمه دسترسی پیدا می‌کنید و وقتی روی دکمه کلیک می‌شود کلاسی را روی آن تغییر می‌دهید:
const button = document.querySelector("button")
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
})
ما از querySelector برای دسترسی به دکمه از صفحه وب استفاده کردیم. برای کسب اطلاعات بیشتر در مورد پیمایش DOM، پست ما را در مورد نحوه عبور از DOM با استفاده از جاوا اسکریپت بخوانید.
کلاس مهمانی یک انیمیشن با عنوان مهمانی را فعال می کند:
.party-time {
animation: party 2000ms infinite;
}
برای انیمیشن، شما می خواهید با قرمز شروع کنید و با 25٪ به زرد تبدیل کنید. سپس با 50% به رنگ قرمز بازمی‌گردید و 75% به رنگ زرد باز می‌گردید. در نهایت، در 100٪، شما به رنگ آبی تیره رضایت خواهید داد:
@keyframes party {
0%, 50% {
background-color: red;
}
25%, 75% {
background-color: yellow;
}
100% {
background-color: hsl(200, 72%, 35%);
}
}
این رویکرد برای جایگزینی بین رنگ‌ها در پس‌زمینه مبتنی بر رنگ کاملاً مفید است. از آنجا که می توانید چندین فریم کلیدی را در یک متغیر تکرار کنید، استفاده از یک ویژگی در مراحل مختلف انیمیشن شما بسیار آسان می شود.
3. استفاده از @property برای متحرک سازی ویژگی های سفارشی
همانطور که قبلاً می دانید، همه ویژگی های CSS قابل انیمیشن نیستند. اسناد رسمی موزیلا یک رکورد به روز شده از تمام ویژگی های CSS متحرک نگه می دارد. اگر به دنبال متحرک سازی یک ویژگی غیرقابل انیمیشن هستید، بهترین راه حل شما استفاده از دستورالعمل @property است.
با تغییر رنگ پس زمینه دکمه خود به یک گرادیان خطی شروع کنید:
button {
// other CSS
background: linear-gradient(90deg, blue, green);
// other CSS
}
در اینجا خروجی است:
اغلب اوقات شما می خواهید شیب رنگ را روی دکمه متحرک کنید. در حالی که ترفندهایی وجود دارد که می توانید از آنها برای جابجایی گرادیان خود استفاده کنید، در واقع نمی توانید آن را متحرک کنید. این به این دلیل است که پس‌زمینه (و همچنین تصویر پس‌زمینه) یک ویژگی متحرک نیست. اینجاست که @property وارد می شود.
دستورالعمل @property به شما اجازه می دهد تا املاک سفارشی را ثبت کنید. هنگامی که از @property استفاده می کنید، باید سه مقدار به آن ارائه دهید، یعنی syntax، inherits، و مقدار اولیه:
@property --color-1 {
syntax: "<color>";
inherits: true;
initial-value: red;
}
@property --color-2 {
syntax: "<color>";
inherits: true;
initial-value: blue;
}
اولی ویژگی شروع و دومی ویژگی مقصد است. اکنون، به جای انتقال تصویر پس‌زمینه (که نمی‌توانید آن را انتقال دهید)، در یک ثانیه از –color-1 به –color-2 (ویژگی‌های سفارشی شما) منتقل می‌شوید:
button {
transition: --color-1 1000ms, --color-2 1000ms;
}
این تکنیک مفید است زیرا می توانید سفارشی سازی های دیگری را نیز اضافه کنید. برای مثال، یک تاخیر اضافه می‌کنید تا تجربه‌ای روان‌تر به آن بدهید. امکانات بی پایان هستند.
4. استفاده از تاخیرهای انیمیشن منفی
تاخیر در ساخت انیمیشن برای ایجاد انیمیشن های روان بسیار مهم است. بیایید نمونه ای از آن را در عمل ببینیم. در این قسمت یک عنصر div با 15 نقطه در بالای دکمه اضافه کنید:
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
در اینجا چند سبک اولیه برای تبدیل هر شیرجه کودک به یک نقطه آورده شده است:
.dots {
display: flex;
gap: .5rem;
margin-bottom: 20px;
}
.dot {
width: 10px;
aspect-ratio: 1;
background-color: red;
border-radius: 50%;
}
در اینجا از Flexbox برای قرار دادن نقاط در یک خط افقی استفاده می کنیم. برای فرو رفتن عمیق در Flexbox، می توانید آموزش CSS Flexbox ما را بررسی کنید.
در داخل script.js، کدی را اضافه کنید که انیمیشن نقاط را فعال می کند. شما کلاس رقص را روی نقاط تغییر می دهید:
button.addEventListener("click", (e) => {
button.classList.toggle('party-time')
// New code
dots.forEach((dot) => {
dot.classList.toggle('dance')
})
})
کلاس رقص انیمیشنی با عنوان افزایش فعال می کند:
.dot.dance {
animation: rise 2000ms infinite alternate;
}
در مورد انیمیشن، به سادگی نقاط -100 پیکسل را در امتداد محور Y ترجمه کنید:
@keyframes rise {
100% {
transform: translateY(-100px)
}
}
اکنون زمان انجام یک کار جالب است. به جای اینکه نقطه ها در همان زمان بالا بروند، می خواهید نقاط را متحرک کنید تا مانند یک موج در جریان باشند. برای رسیدن به این هدف، باید انیمیشن تاخیری را به نقاط اضافه کنید و هر نقطه را 100 میلی ثانیه افزایش دهید:
.dot:nth-child(1) {
animation-delay: 100ms;
}
.dot:nth-child(2) {
animation-delay: 200ms;
}
.dot:nth-child(3) {
animation-delay: 300ms;
}
.dot:nth-child(4) {
animation-delay: 400ms;
}
/* Keep doing till you reach the 15th dot */
این یک انیمیشن براق ایجاد می کند که در آن نقاط به صورت موج دار بالا و پایین می روند. تصویر زیر نقاط وسط انیمیشن را نشان می دهد:
به خاطر داشته باشید که این می تواند مشکل ساز باشد که ما را به نکته پنجم می رساند.
5. از prefers-reduced-motion برای Enable Preferences استفاده کنید
همیشه به خاطر داشته باشید که بسیاری از مردم انیمیشن های مبتنی بر حرکت را دوست ندارند. در واقع، اکثر کاربران ترجیحاتی در مرورگر دارند که می تواند حرکت را خاموش کند. حرکت می تواند حواس را پرت کند و در موارد شدید منجر به حالت تهوع شود.
خوشبختانه، شما به راحتی می توانید با قرار دادن انیمیشن خود در داخل یک پرس و جو رسانه ای بدون ترجیح مانند این، از این موضوع مراقبت کنید:
@media(prefers-reduced-motion: no-preference) {
.dot.dance {
animation: rise 2000ms infinite alternate;
}
}
حالا اگر بخواهید prefers-reduced-motion را در مرورگر خود فعال کنید، انیمیشن اجرا نمی شود.
نکات و ترفندهای CSS را بیشتر بیاموزید
CSS پر از هک های عالی است که فراتر از انیمیشن ها و انتقال ها هستند. به عنوان مثال، نکات و ترفندهایی برای شیک و پاسخگو بودن کل طرح شما وجود دارد. این روش ها می توانند به شما کمک کنند تا وب سایت خود را جذاب تر، در دسترس تر و لذت بخش تر کنید. اگر می‌خواهید یک درصد توسعه‌دهنده CSS باشید، داشتن چند ترفند در آستین شما کمک زیادی می‌کند.