در این مقاله مقدماتی در رابطه با وب انیمیشن‌ها، ما قصد داریم چندین ویژگی پایه‌ای CSS را مانند pseudo-classها، transitionها و transformationها را به شما معرفی کنیم.
اگر قصد یادگیری طراحی وب را نیز دارید به شما پیشنهاد می‌کنم که این لینک را مشاهده کنید.
همچنین برای این مطلب مثال‌هایی وجود دارد که میتوانید آن‌ها را از طریق CodePen مشاهده کنید:
قبل از اینکه وارد بحث انیمیشن‌ها شویم، بیایید در رابطه با شیوه فعال‌سازی آن‌ها حرف بزنیم. بیشتر انیمیشن‌های ما دقیقا بعد از بارگذاری صفحات اجرا نمی‌شوند. اغلب آن‌ها با اشاره شدن از طریق یک المان دیگر اجرا می‌شوند. این کار توسط جاوااسکریپت و یا Pseudo-Classها انجام می‌شود.
Pseudo Class (شبه کلاس)
در اینجا میتوانید چندین نمونه از Pseudo Classهای مرسومی که در اکثر طراحی‌ها استفاده می‌شود را مشاهده کنید.
:hover
از شبه کلاس hover زمانی استفاده می‌شود که شما قصد فعال کردن یک سری از CSS را در حالتی که ماوس کاربر روی یک المنت در صفحه وب قرار گرفته است، داشته باشید. در این مثال ما المنت p را به عنوان المنتی برای پیاده‌سازی خاصیت hover روی آن تعیین کرده‌ایم. وقتی که ماوس روی آن قرار می‌گیرد رنگ آن آبی می‌شود و نشانه‌گر ماوس نیز تغییر می‌کند. اما وقتی که ماوس از روی آن خارج شد همه چیز به حالت اصلی خود برمی‌گردد.
<style>
#hover-example:hover {
color: blue;
cursor: pointer;
}
</style>
<p id=”hover-example”>Hover example</p>
:focus
در حالت پایه و اصیل از focus برای المان‌های ورودی و دکمه‌ها استفاده می‌شود. برای مثال زمانی که یکی از این موارد را انتخاب/فعال می‌کنید. -وقتی روی یک ورودی کلیک می‌کنید و یا با استفاده از تب روی آن قرار می‌گیرد. – در این مثال با کلیک و یا تب کردن روی ورودی رنگ پس زمینه آن را تغییر داده و همزمان عرض آن نیز تغییر می‌کند. وقتی که خارج از فرم در هر جای دیگری کلیک کنید فرم به حالت عادی خود باز می‌گردد.
<style>
input:focus {
background-color: #f4f4f4;
width: 50vw;
}
</style>
<input type=”text”>
:active
Active تقریبا حالتی مشابه با focus است با این تفاوت که وقتی شما المنتی را فعال می‌کنید CSSای که برای آن نوشته‌اید تنها به مدت زمان تقریبا یک ثانیه اعمال می‌شود و دوباره برمی‌گردد. در حقیقت زمانی سی‌اس‌اس اعمال می‌شود که شما یک کلیک را روی المان مورد نظر اجرا می‌کنید. در بیشتر مواقع از این استایل برای لینک‌های a استفاده می‌شود.
<style>
.activate:active {
background-color: orange;
}
</style>
<p class=”activate”>Click me!</p>
<div class=”activate”>Activate me!</div>
<button class=”activate”>Hold me!</button>
Transformer (تبدیل)
Transformerها خاصیتی از CSS هستند که به شما قابلیت rotate, scale و... را می‌دهند. در حقیقت Transformerها به شما این قابلیت را می‌دهند که انیمیشن‌های دنیای وب را به سطح جدیدی ببرید. در این مطلب به چند مورد از آن‌ها به همراه مثال‌هایی اشاره خواهیم کرد.
Translate (x,y)
منظور از Translate کردن در واقع انتقال چیزی به جایی یا چیز دیگری‌ست. در مثال زیر ما المنت‌مان را –در هر موقعیتی که باشد- از محور x ۱۰rem و از محور y ۵rem انتقال می‌دهیم. اگر با واحد rem آشنایی ندارید میتوانید از واحدهای دیگری مانند px استفاده کنید.
در پایین میتوانید یک میانبر ساده برای ترکیب محورهای x و y را مشاهده کنید اما میتوانید بجای این موارد از translateX یا translateY نیز استفاده کنید.
<style>
.translate {
transform: translate(10rem, 5rem)
}
</style>
Scale ( x, y )
مشابه با translate این خاصیت نیز می‌تواند دو مقدار scaleX و scaleY را دریافت کند، اما یک کلید میانبر نیز مانند حالت قبل برای این خاصیت وجود دارد. با استفاده از scale میتوانید اندازه یک المان در صفحه را تغییر دهید. در مثال زیر المان به اندازه یک دوم خود تبدیل می‌شود:
<style>
.scale {
transform: scale(0.5);
}
</style>
Transform-origin ( x, y, z )
در هنگام کار روی انیمیشن‌ها استفاده از Transform-origin بسیار مهم است، مخصوصا برای حالت rotation این موضوع بیشتر صدق می‌کند. Transform-origin در واقع یک نقطه را تعریف می‌کند که در اطراف آن نقطه فرایند Transformation اجرا می‌شود. برای بیانی ساده‌تر یک چرخ و فلک مانند زیر را در نظربگیرید:
وقتی که چرخ‌ها حرکت می‌کنند همه چیز در اطراف نقطه مرکزی به چرخش و حرکت در می‌آیند. اما حال تصور کنید که نقطه مرکزی به سمت بالا-چپ حرکت کرده است با این حالت همه چیز مکان خودش را از نو تعریف می‌کند و المان‌ها در اطراف نقطه جدید به چرخش در می‌آیند. برای مشاهده یک حالت تعاملی این لینک را مشاهده کنید.
Rotate (angle)
Rotate دقیقا همان کاری را انجام می‌دهد که خود می‌گوید: چرخش! با استفاده از این خاصیت میتوانید هر نوع چرخشی که دوست داشته باشید را ایجاد کنید. مقادیر و شیوه تعریف آن‌ها کمی متفاوت است. برای اطلاعات بیشتر و درک بهتر قضیه به شما پیشنهاد می‌کنم که این لینک از MDN را مطالعه کنید.
روان‌تر کنید
با استفاده از transitionها می‌توانیم همه چیز را روان‌تر کنیم و کنترل کامل‌تری روی جریان انیمیشن‌ها داشته باشیم. در واقع transitionها شبیه به ابزارهای برای کنترل سرعت هستند. این دستور خود ۴ آرگومان ورودی می‌گیرد که هر کدام را در اینجا توضیح داده‌ایم:
Transition property چیزی‌ست که شما را متحرک می‌سازید. این المان می‌تواند رنگ، اندازه، یک Transform و یا چیزهای دیگری باشد. همچنین میتوانید از کلمه all استفاده کنید تا همه چیز را متحرک سازید، اما به شما پیشنهاد می‌کنم بیشتر حواس‌تان باشد و چنین کاری را نکنید.
در این لینک لیست بزرگی از خاصیت‌هایی را که میتوانید متحرک سازید به نمایش گذاشته شده‌اند. باید از متحرک‌سازی هرچیزی که در لیست وجود ندارد خودداری کنید.
transition-property: all;
مدت زمانی که متحرک سازی اتفاق می‌افتد را میتوانید با استفاده از این خاصیت تعیین کنید. هم میتوانید از میلی‌ثانیه و هم از ثانیه استفاده کنید.
transition-duration: 2s;
این خاصیت کمی دستور اصلی را پیچیده می‌کند. transition timing function یک منحنی شتاب است که شیوه جریانی متحرک‌سازی را توصیف می‌کند. نگاهی به این لینک بیاندازید تا در عمل منحنی شتاب را مشاهده کنید.
میتوانید تمام جنبه‌های مربوط به سرعت المان‌ها را از طریق این دستورات بررسی کنید. راه‌های بسیار زیادی برای جریان انیمیشن‌ها وجود دارد. جدای از مقادیر عددی، تعدادی از مقادیر از پیش تعیین شده وجود دارد که میتوانید از آن‌ها استفاده کنید:
ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
برای درک بهتر آن‌ها به نظر می‌رسد که بهتر است به صورت جداگانه آن‌ها را امتحان کنید.
این مورد ساده‌ترین مقدار در بین این خاصیت‌ها را دریافت می‌کند. Transition-delay زمانی است که قبل از اعمال افکت‌های قبلی باید صبر کنیم. میتوانید از ثانیه و میلی‌ثانیه استفاده کنید.
transition-delay: 500ms;
Transition (property, duration, timing, delay)
مطمئنم این دستور را حدس زده بودید، این مورد یک میانبر برای ترکیب تمام این ۴ خاصیت با همدیگر است. در زیر میتوانید یک مثال ساده را مشاهده کنید:
transition: background 1s ease-in-out 0.5s;
برای چندگانه کردن این حالت میتوانید با استفاده از کاما آن‌ها را از همدیگر جدا کنید:
transition: background 1s ease-in-out 0.5s,
width 2s ease-in,
height 1.5s;
در پایان
تمام چیزهایی که برای ساخت یک وبسایت تعاملی نیاز دارید را میتوانید در اینجا به صورت لیست شده مشاهده کنید. چیزهایی که یاد گرفتید را تمرین کنید و به دنبال منابع بیشتری برای یادگیری این موارد باشید. میتوانید با استفاده از این خاصیت‌ها، انیمیشن‌های بسیار پیچیده‌تری را خلق کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید