img

افکت‌های انیمیشنی بر روی منوها

/
/
/

از CSS برای ساخت انواع افکت و …   استفاده کنید ،بدون آن که پیچیدگی کد را زیاد کنید.

۱- سند صفحه
در ابتدای پروژه قالب صفحه HTML را تعریف کنید. این پروژه، بخش HEAD را در بر می گیرد، که آن نیز توصیف صفحه و لینک برگه سبک استایل  CSS   و همچنین  بخش بدنه و محتویات را شامل می شود. نگه داشتن بخش های به غیر از محتویات صفحه در بخش HEAD ( مانند CSS)، پایداری پروژه را افزایش می دهد. این کار برای ابزار SEO مفید است. از کد زیر استفاده نمایید:

<!DOCTYPE html>
<html>
<head>
<title>Hover Effect</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
*** STEP 2
</body>
</html>

۲- بخش مسیریابی
مسیریابی از یک ظرف  nav  تشکیل شده است که مجموعه ای از لینک ها را در بر می گیرد. از  HTML برای تعریف محتویات استفاده می شود ،اما اکنون برای نمایش آن کاربرد دارد. در نتیجه، تنها یک «a» (یک) تگ را در کنار متن ظاهر درون آن ها می نویسم و با HTML علامت گزاری می کنیم، زیرا این کار برای  SEO مناسب است. از کد زیر استفاده کنید:

<nav>
<a href=”#”>Alpha</a>
<a href=”#”>Bravo</a>
<a href=”#”>Charlie</a>
</nav>

۳- آغاز برگه سبک
در این زمان علامت گزاری  HTML تکمیل شده است، بنابراین یک فایل جدید به نام»style.css» بسازید و در آن قوانین سبک بندی بصری را بنویسید.( CSS این سند را با تعریف قانون برای  HTML  و ظروف بدنه آغاز می  کند ، به طوری که نمایش آن ها برای پوشش تمام صفحه بدون مرز  margin و  padding انجام شود. رنگ پیش زمینه و فونت را نیز تعیین می کنیم. به کد زیر توجه نمایید:

html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: rgb(21, 34, 47);
}

۴- ظرف مسیر یابی
ظرف مسیر یابی  با مرز مرئی و padding ظاهر می شود و آن را از لینک های داخلی جدا می کند. یک margin( حاشیه) صفر در نظر گرفته می شود ، به طوری که بدون هیچ فاصله در بالای صفحه وب ظاهر شود. برای تغییر اندازه در آینده ، مشخص می کنیم که این المان از یک نمایش بلوک استفاده می کند. مانند کد زیر :

nav{
display: block;
padding: 1em;
border: 3px solid #fff;
margin: 0;
}

۵- لینک های مسیریابی
لینک های مسیریابی مانند دکمه ها ظاهر می شوند ، بنابراین، باید با تنظیمات  padding  ، حاشیه، رنگ  و مرز مناسب تنظیم شوند. مهم تر آن که، برای اعمال افکت ها، لینک ها باید از موقعیت یابی مناسب نسبی استفاده کنند تا تصویر متحرک در نسبت با موقعیت لینک بر روی صفحه وب ظاهر شود. از کد زیر استفاده نمایید:

nav a{
position: relative;
display: inline-block;
padding: 1em;
margin-left: 1em;
font-size: 1.5em;
border: 3px solid #fff;
background: #333;
color: #fff;
}

۶-  بخش افکت
بخش مهم افکت، در::berfore selector (::قبل از گزینش گر) انجام می شود ، این یک ویژگی  CSS برای وارد کردن آیتم ها قبل از المان  HTML است. تعریف ویژگی محتوا  برای این کار ضروری است. این المان را برای حرکت آماده می کنیم.( ارتفاع کامل و نبود عرض آن را در ابتدا نامرئی می کند) از یک پیش زمینه قرمز شفاف برای این مثال استفاده می کنیم، اما تغییر آن برای یک تصویر پیش زمینه بار گزاری شده ممکن است. از کد زیر استفاده کنید:

nav a::before{
content: “”;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
opacity: 0.5;
background: red;
transition: width 1s;
}

۷- فعال سازی این افکت
در مرحله قبلی یعنی قبل از المان نیز از ویژگی عرض استفاده می شد ، و این یعنی فعال سازی  انیمیشن آسان است. تنها با استفاده از یک hover selector لینک را انتخاب و از این قوانین برای  :before استفاده می کنیم. در این حالت، عرض را به ۱۰۰ درصد تغییر می دهیم که :before node  را به صورت متحرک نشان می دهد.

nav a:hover::before{
width: 100%;
}

شاخص تعاملی
از نظر شما استفاده از rollover های متحرک متنی تا چه حد می تواند نوع تعامل لینک ارائه شده را توصیف کنند.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text