طراحی دکمه منوی سه‌خطی متحرک در صفحات وب با CSS و JavaScript

نقش انیمیشن‌ها در طراحی وب صرفاً زیباتر کردن صفحات نیست بلکه موجب جلب توجه بازدیدکنندگان می‌شود و محتوای صفحات را مرتب‌تر و قابل‌فهم‌تر و سرگرم‌کننده‌تر می‌کند. برای متحرک کردن المان‌ها در صفحات وب، می‌توانید از Transition و همین‌طور تعریف کردن Keyframe استفاده کنید و حتی بدون جاوااسکریپت، عناصری را در صفحه متحرک کنید.

زمانی که موس را روی دکمه یا لینکی قرار می‌دهید و زمانی که با موس روی دکمه‌ای کلیک می‌کنید، با استفاده از ترنزیشن یا روش تعریف کردن فریم‌های کلیدی، می‌توانید خواص زیادی را پویا و متحرک کنید. مثل تغییر رنگ، سایه، ابعاد و موقعیت و غیره.

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

انیمیشن‌های CSS با استفاده از Keyframe یا فریم کلیدی و ترنزیشن یا حالت گذار

با استفاده از HTML و CSS و بدون استفاده از JavaScript می‌توانید انیمیشن و المان‌های متحرک ایجاد کنید. این کار از دو روش ساده انجام می‌شود:

• CSS Transition یا ترنزیشن‌های CSS که گذار از حالتی به حالت دیگر را امکان‌پذیر می‌کنند
• انیمیشن‌های CSS که با تعریف کردن فریم‌های کلیدی یا Keyframe ساخته می‌شوند.

هر دو روش از نظر سرعت اجرای انیمیشن در مرورگرها بسیار عالی است چرا که مرورگرها به خوبی برای ایجاد چنین انیمیشن‌هایی بهینه شده‌اند، به خصوص اگر از Opacity‌ یا شفافیت و Transform یا تبدیل استفاده کنید.

متحرک کردن عناصر با Transition

ترنزیشن که در لغت به معنی گذار از حالتی به حالت دیگر است، به معنی تغییر کردن خواص المان در اثر رویدادی مثل کلیک کردن روی المان، نگه داشتن موس یا Hover کردن روی المان و همین‌طور خروج موس از روی عناصر و غیره است. زمانی که انیمیشن موردنیاز شما فقط دو حالت داشته باشد، بهترین کار این است که از ترنزیشن‌ها استفاده کنید. به عنوان مثال وقتی موس روی المانی می‌ایستد، المان بزرگ شود و با کنار رفتن موس به ابعاد اصلی برگردد و مثال دیگر اینکه یک اسلایدر با قرار گرفتن موس روی آن، جابجا شود.

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

استفاده از فریم‌های کلیدی برای متحرک‌سازی

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

با استفاده از انیمیشن‌هایی از نوع کی‌فریم می‌توانید برخی عناصر صفحه را درست پس از بارگذاری صفحه، به حالت متحرک درآورید و کاری کنید که انیمیشن تا ابد اجرا شود. به عنوان مثال آیکونی برای دانلود ایجاد کنید که مرتباً بالا و پایین می‌رود و آیکونی طراحی کنید که همیشه در حال چرخش است.

تعریف کردن ترنزیشن‌ها در CSS

برای تغییر دادن خواص عنصری با کلاس یا آی‌دی خاص، از کدی به صورت زیر استفاده می‌شود که در آن نام خاصیت یا Property و زمان تغییر یا Duration و تأخیر و تایمینگ ترنزیشن می‌بایست تغییر کند:

.selector {
  transition: property duration transition-timing-function delay;
}

کد فوق را می‌توانید به صورت چهار خاصیتی نیز استفاده کنید. به عنوان مثال اگر قرار است رنگ عنصری با کلاس selector در مدت زمان نیم ثانیه و با تأخیر ۰.۳ ثانیه و با تابع زمانی ease-in به آرامی تغییر کند، می‌بایست از این کد استفاده شود: 

.selector {
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in;
  transition-delay: 0.3s;
}

و در ادامه توضیحات بیشتری در مورد هر یک از ۴ فاکتور می‌دهیم.

transition-property یا خاصیت در حال تغییر

منظور از transition-property همان چیزی است که باید تغییر کند. می‌توانید رنگ یک دکمه، عرض یا ارتفاع دکمه، سایه‌ی متن یا سایه‌ی خود دکمه و مواردی دیگر را با ترنزیشن‌ها تغییر دهید و به عنوان مثال کاری کنید که زمانی که موس روی عنصری قرار می‌گیرد، این اتفاقات رخ بدهد.

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

اگر قرار است چند خاصیت یک عنصر مثل رنگ و سایه و ... هم‌زمان تغییر کند، از all در تعریف ترنزیشن استفاده کنید. اگر نام هیچ خاصیتی را ذکر کنید هم حالت پیش‌فرض all است و ترنزیشن روی تمام خواص متغیر، اعمال می‌شود.

transition-duration یا مدت زمان تغییر خاصیت‌ها

پارامتر transition-duration مشخص‌کننده‌ی مدت زمان تغییر خاصیت  از مقدار اولیه تا مقدار نهایی است. می‌توانید زمان را بر حسب ثانیه با حرف s و بر حسب میلی‌ثانیه با ms که یک هزارم ثانیه است، تعریف کنید. به عبارت دیگر  transition-duration: 0.5s معادل  transition-duration: 500ms است.

transition-timing-function یا روند و منحنی تغییر خواص

برای اینکه تغییرات خواص CSS به صورت تدریجی و روان صورت بگیرد، می‌توانید به جای منحنی تغییرات خطی یا linear از ease استفاده کنید. در این صورت زمانی که انیمیشن آغاز می‌شود، ابتدا آهسته است و سرعت می‌گیرد و در نهایت مجدداً آهسته می‌شود.

در تصاویر زیر چهار نوع روند تغییرات خواص را مقایسه کنید تا موضوع روشن شود.

ease: ابتدا آهسته و آرام شروع می‌شود و سرعت می‌گیرد و در نهایت آهسته و آرام خاتمه پیدا می‌کند.

linear: ترنزیشن linear یا خطی با سرعت یکنواخت و ثابت پیش می‌رود.

ease-in: ترنزیشنی که ابتدا آهسته شروع می‌شود و سرعت آن زیاد می‌شود و با سرعت زیاد خاتمه پیدا می‌کند.

ease-out: ترنزیشنی که ابتدا سریع شروع می‌شود و سرعت آن کاهش پیدا کرده و آهسته خاتمه پیدا می‌کند.

ease-in-out: ترنزیشنی در ابتدا آرام و آهسته شروع می‌شود و سریع‌تر شده و در پایان نیز آهسته می‌شود اما نه به آهستگی ترنزیشن پیش‌فرض که ease است.

نوع دیگر تایمینگ ترنزیشن، cubic bezier است که می‌توانید با سرویس‌های آنلاین مثل سایت cubic-bezier.com آن را سفارشی کرده و استفاده کنید.

transition-delay یا تأخیر در ترنزیشن

با استفاده از این خاصیت در CSS، می‌توانید شروع ترنزیشن را با تأخیر آغاز کنید. به عنوان مثال کاری کنید که پس از نیم ثانیه مکث کردن موس روی یک عنصر، ترنزیشنی مثل تغییر رنگ یا جابجایی عنصر شروع شود. تأخیر در ترنزیشن هم مثل زمان ترنزیشن بر حسب ثانیه یا میلی‌ثانیه تعریف می‌شود. حالت پیش‌فرض این ویژگی ترنزیشن‌ها، ۰ ثانیه است و در واقع بدون تأخیر، گذار از حالتی به حالت دیگر رخ می‌دهد.

در پایان یادآوری می‌کنیم که در میان چهار ویژگی یک ترنزیشن، تنها مورد الزامی، زمان ترنزیشن است. تأخیر صفر ثانیه، خاصیت‌ها روی حالت all یا همه‌ی خواص تنظیم شده و تایمینگ نیز ease است.

تبدیل منوی سه‌خطی یا همبرگری به علامت ضربدر

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

و سراغ کدنویسی می‌رویم. در کد HTML صفحه، یک button با کلاسی به اسم hamburger__button ایجاد کنید که متن آن کلمه‌ی Menu است. درون دکمه یک span‌ با کلاس hamburger__icon قرار دهید.

کد HTML برای ایجاد دکمه‌ی منو

<button class="hamburger__button">
  Menu <span class="hamburger__icon"></span>
</button>

تعریف ظاهر و استایل دکمه و منوی سه‌خط

برای تعریف کردن ظاهر span داخل دکمه، از شبه‌کلاس‌ها یعنی after و before استفاده کنید و در واقع به جز کلاس اصلی که hamburger__icon است، دو شبه کلاس برای ایجاد دو خط بالا و پایین استفاده کنید که محتویات هر دو، تهی و خالی است. ضخامت را ۴ پیکسل و عرض خطوط را ۴۴ پیکسل در نظر بگیرید. برای گرد کردن گوشه‌ها، از شعاع ۴ پیکسلی استفاده کنید.

دقت کنید که موقعیت‌ها به صورت مطلق یا absolute تعریف می‌شود. خط بالا و پایین به اندازه‌ی ۱۲ پیکسل از بالا و پایین فاصله دارند. بنابراین سه خط منوی همبرگری با CSS زیر تعریف می‌شود.

/* give the span element and related pseudo-elements the appearance of white lines */
.hamburger__icon,
.hamburger__icon::before,
.hamburger__icon::after {
  position: absolute;
  width: 44px; 
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
}
/* set the span element in the middle of its containing div */
.hamburger__icon {
  top: calc(50% - 2px);
  left: calc(50% - 22px);
}
/* set the content property and left position of the two pseudo-elements*/
.hamburger__icon::before,
.hamburger__icon::after {
  content: "";
  left: 0;
}
/* set the bottom property of the before pseudo-element */
.hamburger__icon::before {
  bottom: 12px;
}
/* set the top property of the after pseudo-element */
.hamburger__icon::after {
  top: 12px;
}

و در ادامه به حالت مکث کردن موس روی دکمه یا Hover کردن می‌رسیم که با استفاده از hamburger__button:hover تعریف می‌شود. در ادامه می‌توانید ظاهر آیکون در حالتی که موس روی دکمه است را تعریف کنید.

در مثال ما از transform یا تبدیل استفاده می‌شود که مقدار آن را rotate یا چرخش به اندازه‌ی منفی ۴۵ درجه در نظر می‌گیریم. علاوه بر این فاصله‌ی خط میانی از بالا، معادل ۵۰ درصد ارتفاع منهای ۴ پیکسل خواهد بود.

/* HOVER STYLES ON THE BUTTON */
/* increase width and height of span element, */
/* recalculate top and left position, rotate it and change background-color */
.hamburger__button:hover .hamburger__icon {
  height: 10px;
  width: 110px;
  left: 5px;
  top: calc(50% - 4px);
  transform: rotate(-45deg);
  background-color: #e20650;
}
/* adjust properties on the after pseudo element */
.hamburger__button:hover .hamburger__icon::after {
  width: 110px;
  height: 10px;
  top: -1px;
  transform: rotate(-270deg);
  background-color: #e20650;
}
/* hide the before pseudo-element by scaling it to 0 */
.hamburger__button:hover .hamburger__icon::before {
  transform: scale(0);
}

اضافه کردن ترنزیشن برای تغییر شکل آرام منو

در نهایت در تعریف ترنزیشن، از زمان 0.3s استفاده می‌کنیم و تایمینگ را روی حالت خطی یا linear تنظیم می‌کنیم.

/* this is one of the lines of the close icon */
.hamburger__icon {
  /* preceding code stays the same */
  transition: all 0.3s linear;
}
/* this is the other line of the close icon */
  .hamburger__icon::after {
  /* preceding code stays the same */
  transition: all 0.3s linear;
}

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

.hamburger__button:hover .hamburger__icon {
  /* preceding code stays the same */
  transition: height 0.3s linear,
              width 0.3s linear,
              left 0.3s linear,
              top 0.3s linear,
              transform 0.3s linear,
              background-color 0.3s linear;
}

نتیجه را بررسی کنید:

متحرک‌سازی صفحات وب با ترنزیشن‌ها و جاوااسکریپت

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

روش کلی این است که با استفاده از JavaScript و رویدادها، کلاس یا کلاس‌هایی را به المان اضافه کنید. ظاهر و استایل کلاس‌ها در CSS تعریف می‌شود و به این ترتیب می‌توانید با رویدادی مثل کلیک کردن روی یک دکمه، کلاس CSS جدیدی به آن اضافه کنید و ظاهر آن را متحول کنید.

به مثال منوی همبرگری بر‌می‌گردیم و این بار کاری می‌کنیم که با کلیک کردن روی المان، کلاسی به اسم toggled به آن افزوده شود و تغییرات ظاهری از این روش اتفاق بیافتد. بنابراین ابتدا خواص کلاس toggled که هم‌زمان با کلاس hamburger__button به یک عنصر از صفحه یعنی دکمه‌ی منو اضافه شده، را اینگونه تعریف می‌کنیم:

.toggled.hamburger__button .hamburger__icon {
  height: 10px;
  width: 110px;
  left: 5px;
  top: calc(50% - 4px);
  transform: rotate(-45deg);
  background-color: #e20650;
}
.toggled.hamburger__button .hamburger__icon::after {
  width: 110px;
  height: 10px;
  top: -1px;
  transform: rotate(-270deg);
  background-color: #e20650;
}
.toggled.hamburger__button .hamburger__icon::before {
  transform: scale(0);
}

و اما اضافه کردن کلاس حین کلیک کردن روی دکمه‌ی منو که با استفاده از addEventListener و رویداد یا Event کلیک انجام می‌شود:

hamburgerButton.addEventListener( "click", () => hamburgerButton.classList.toggle("toggled") );

نتیجه به این صورت خواهد بود:

همان‌طور که مشاهده می‌کنید اصول کار یکسان است و تنها تفاوت در این است که با کلیک کردن، کلاسی خاص اضافه می‌شود و استایل دکمه‌ی منو را تغییر می‌دهد.

اضافه کردن انیمیشن به عنصری که با جاوااسکریپت در صفحه وب اضافه شده است

در مثال‌های قبلی، با توجه به اینکه دکمه در کد HTML صفحه از همان ابتدا موجود بوده و سپس با هاور کردن موس یا با کلیک روی دکمه‌ی منو، اتفاقاتی افتاده، ترنزیشن یا حالت گذار را به خوبی مشاهده می‌کنیم اما اگر از جاوااسکریپت برای اضافه کردن یک المان به صفحه‌ی وب استفاده کنید، به محض اینکه صفحه‌ی وب بارگذاری شود یا روی دکمه‌ای کلیک کنید تا عنصری به صفحه اضافه شود، به نقطه‌ی انتهایی ترنزیشن می‌رسید و انیمیشنی دیده نمی‌شود!

با یک مثال ساده همه‌چیز روشن می‌شود. فرض کنید که قرار است جعبه‌ای با کلاس box در صفحه وارد شود، آن هم به محض کلیک روی دکمه‌ی نمایش جعبه. ترنزیشن را ۱ ثانیه در نظر می‌گیریم که نسبتاً طولانی است و قطعاً باید انیمیشن ورود جعبه به صفحه را ببینیم:

.box {
  /* more code above, transition below */
  transition: 1s;
}

برای افزودن یک div‌ با کلاس box‌ به صفحه و بخش body، از appendChild و classList.add استفاده می‌کنیم. این تغییرات زمانی اتفاق می‌افتد که روی دکمه کلیک شود. بنابراین کد JavaScript به این صورت است:

// add event listener to the button element
button.addEventListener('click', () => {
  // create the box element with a class of .box
  const box = document.createElement("div");
  box.classList.add("box");
  // append the new element box to the DOM
  document.querySelector("body").appendChild(box);
  // add the class that triggers the transition to the box element
  document.querySelector(".box").classList.add("slide-in");
}

و نتیجه‌ی کار اینگونه خواهد شد، با کلیک روی دکمه‌ی Show Box ناگهان جعبه را در موقعیت نهایی و بدون هیچ انیمیشنی می‌بینیم:

برای حل مشکل متحرک نبودن جعبه حین ورود به صفحه، چه باید کرد؟

یک راهکار ساده این است که اضافه کردن کلاسی که موجب متحرک شدن جعبه می‌شود را کمی پس از اضافه شدن div‌ با کلاس box انجام دهید و به عبارت دیگر از setTimeout() استفاده کنید. این تابع جاوااسکریپت می‌تواند پس از زمان دلخواهی که مشخص می‌کنید، توابع و دستوراتی را اجرا کند. در این صورت می‌توانید کلاس موردنظر برای متحرک‌سازی را با تأخیر اضافه کنید.

روش بهتر این است که از تابع requestAnimationFrame() استفاده کنید. این تابع ویژه‌ی انیمیشن‌ها در طراحی وب است. بنابراین از کد زیر استفاده کنید تا تابع doTransition که کلاس slide-in را به عنصر دارای کلاس box اضافه می‌کند، به همراه ترنزیشن‌های مربوطه، اجرا شود:

const doTransition = () => {
  // add the class that triggers the transition to the box element
  document.querySelector('.box').classList.add("slide-in");
  // call requestAnimationFrame passing this same function as argument
  window.requestAnimationFrame(doTransition);
};

به این ترتیب نتیجه‌ی نهایی اینگونه خواهد شد:

همان‌طور که مشاهده می‌کنید با کلیک کردن روی دکمه، تابعی برای اضافه کردن یک عنصر جدید به صفحه اجرا می‌شود و عنصر اضافه شده به همراه ترنزیشن ۱ ثانیه‌ای نمایان می‌شود.

logrocketسیاره‌ی آی‌تی