آموزش ساخت آیکون منو با انیمیشن برای وبسایت
- آموزش • آموزش html
- ۱۷ اسفند ۱۴۰۱
- 1,770 بازدید
امروزه آیکون منو اکثر وبسایت ها در قالب های مختلف مانند تلفن همراه ، تبلت ، دستکتاب و …. به صورت ریسپانسیو در می آیند تا خدمات و محصولات سایت برای همه کاربران (منظور کاربران مختلفی است که با دستگاه های متفاوتی از اینترنت استفاده میکنند) قابل بهره برداری باشد . خیلی از کارشناسان وب به موضوع اهمیت ریسپانسیو سازی سایت در طراحی وبسایت اشاره نموده اند. حتی واکنشگرایی وبسایت میتواند نقش بسیاری در وفاداری کاربران داشته باشد . اگر وبمستر باشید و سایت ریسپانسیو شده ایی را مدیریت کرده باشید ، حتما میدانید که برای طراحی سایت در اندازه های تلفن باید استایل و شکل منوی سایت رو به کلی تغییر بدهید .
ظاهرا میدونید که منوی اکثر وبسایت ها در اندازه موبایل به چه شکل است و میدانید که چطوری ظاهر میشود . منو وبسایت در موبایل به شکل و شمایل زیر شباهت زیادی دارد که در وبیت قراره آیکون منو رو باهم به صورت حرفه ایی به همراه یک انیمیشن زیبا طراحی کنیم . پیاده سازی این آیکون کار سختی نیست و اگر دچار سردرگمی در طراحی این آیکون شدید در قسمت نظرات سوالات خود را بپرسید ، چرا که وبمستران وبیت در اصرع وقت به سوالات شما پاسخ خواهند داد .
آنچه در این پست می‌خوانید
آموزش ساخت آیکون منوی سایت + انیمیشن
برای طراحی چنین آیکون هایی نیاز به ابزارهای پیچیده و سختی ندارید . فقط نیاز به دانش اولیه در html , css دارید . اگر هم دانشی در این موارد ندارید وبیت توضیحات جامعی رو در این مقاله قرار میدهد که میتوانید از آن کمک بگیرید . در براکت زیر کد های html این آیکون رو قرار داده ایم و در براکت بعد از آن هم توضیحات استایل را گذاشته ایم . برای طراحی همچین آیکونی با یک انیمیشن زیبا کمی هم به نوشتن اسکریپت نیاز داریم . این اسکریپت به زبان جاوااسکریپت میباشد که این رو به همراه توضیحاتش به شما ارائه میدهیم. بعد از هر براکت هم به صورت جامع برای شما وبمستران عزیز توضیحاتی ارائه داده ایم که امیدواریم مفید واقع شوند .
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> برای دیدن انیمیشن این آیکون ، بروی آن کلیک کنید </p>
<div class="container" onclick="myFunction(this)">
<div class="vebeet1"></div>
<div class="vebeet2"></div>
<div class="vebeet3"></div>
</div>
</body>
</html>
توضیحات کد html :
برای ساخت چنین آیکونی کافیه که سه بخش با کلاس های vebeet1 , vebeet2 , vebeet3 در html بسازیم . در نهایت با استفاده از این کلاس ها و کلاس مشترکی به همه آنها با استفاده از جاوااسکریپت میدهیم استایل و انیمیشن خاصی میگیرد . این سه بخش هر یک به صورت خط صافی هستند که بروی هم قرار گرفته اند . این سه خط در مجموع آیکونی را شکل میدهد که مانند آیکون منوهای موبایل است . چهارچوب کدهای html ما هم بسیار ساده است ، به گونه ایی که در تگ html ما یک تگ p و div داریم که سه بخش اصلی ما در این تگ div اصلی قرار دارند .
.container {
display: inline-block;
cursor: pointer;
}
.vebeet1, .vebeet2, .vebeet3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .vebeet1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .vebeet2 {opacity: 0;}
.change .vebeet3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
توضیحات کد css :
اگر به کدهای سی اس اس بالا دقت کنید میبینید که یک به هر یک از کلاس های Vebeet1 , Vebeet2 , Vebeet3 استایل های مشترکی مانند طول و عرض و رنگ داده ایم . همچنین به هر سه این بخش ها یک transition با مقدار 0.4 داده ایم که باعث زیبایی در انیمیشن ما میشود . به کلاس container هم که مربوط به تگ div اصلی میشود یک display با مقادیر inline-block داده ایم که به وجه نمایش آیکون در صفحه اشاره دارد . در نهایت هم به هریک از کلاس های vebeet که مربوط به یک خط مستقیم از این آیکون میباشد استایل جداگانه ایی را تحت کلاس change داده ایم . این استایل های آخری مربوط به انیمیشن آیکون ما میشود . این انیمیشن به اینگونه است که با کلیک بروی آن به شکل یک ضربدر در می آید و با کلیک مجدد به حالت خود برمیگردد .
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
توضیحات کد javascript :
با استفاده از کد های اچ تی ام ال و سی اس اس که در بالا ذکر کردیم توانستیم یک آیکون زیبا برای منوی وبسایت خود در اندازه موبایل دربیاوریم . حالا برای اینکه ماشین انیمیشن خود را روشن کنیم نیاز به اسکریپت بالا داریم که در صورت کلیک بروی تگ دایو اصلی ، یک کلاس به نام change رو به استایل هر کدام از خطوط اضاف میکند . در نهایت ویژگی هایی را با استفاده از این کلاس به آیکون میدهیم که به زیبایی خاصی حرکت میکند .
