به تازگی ایده های جدیدی در طراحی سایت ها دیده میشود که برای کاربران جذابیت خاصی دارد. افکت هایی که هنگام لود صفحه وب بر روی المان های صفحه اجرا میشود زیبای خاصی به ظاهر وب سایت شما میدهد. در واقع با استفاده از css3 یک انیمیشن بر روی عناصر صفحه ایجاد میکنیم.
در این آموزش CSS به شما یاد خواهیم داد که چگونه با استفاده از css3 و بدون استفاده از jquery، یک افکت زیبا بر روی منوی سایت خود هنگام load صفحه وب، ایجاد کنید. دموی این افکت را از این قسمت میتوانید مشاهده کنید.
در ابتدا کدهای html منو را به صورت زیر مینویسیم :
[free_vip]
[html]
<ul id=”menu-load”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
<li><a href=”#”>6</a></li>
<li><a href=”#”>7</a></li>
</ul>
[/html]
سپس کدهای css را اضافه میکنیم :
[css]
/*navMotion*/
@-webkit-keyframes navMotion {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
}
50% {
opacity: 0;
-webkit-transform: translateY(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes navMotion {
0% {
opacity: 0;
-moz-transform: translateY(-100px);
}
50% {
opacity: 0;
-moz-transform: translateY(-100px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes navMotion {
0% {
opacity: 0;
-o-transform: translateY(-100px);
}
50% {
opacity: 0;
-o-transform: translateY(-100px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes navMotion {
0% {
opacity: 0;
transform: translateY(-100px);
}
50% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*
==============================================
MAIN CSS
==============================================
*/
#menu-load {
width: 100%;
padding:0;
}
#menu-load > li {
display: inline-block;
margin-right: 1%;
width: 11.4%;
}
#menu-load > li:nth-child(7) {
margin-right: 0 !important;
}
#menu-load a {
display: inline-block;
height: 50px;
width: 100%;
line-height: 50px;
border: 1px solid #c2c2c2;
font-size: 18px;
text-align:center;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
text-decoration:none;
}
#menu-load > li:nth-child(1) {
-webkit-animation: navMotion 1.5s;
-moz-animation: navMotion 1.5s;
-o-animation: navMotion 1.5s;
animation: navMotion 1.5s;
}
#menu-load > li:nth-child(2) {
-webkit-animation: navMotion 1.7s;
-moz-animation: navMotion 1.7s;
-o-animation: navMotion 1.7s;
animation: navMotion 1.7s;
}
#menu-load > li:nth-child(3) {
-webkit-animation: navMotion 1.9s;
-moz-animation: navMotion 1.9s;
-o-animation: navMotion 1.9s;
animation: navMotion 1.9s;
}
#menu-load > li:nth-child(4) {
-webkit-animation: navMotion 2.1s;
-moz-animation: navMotion 2.1s;
-o-animation: navMotion 2.1s;
animation: navMotion 2.1s;
}
#menu-load > li:nth-child(5) {
-webkit-animation: navMotion 2.3s;
-moz-animation: navMotion 2.3s;
-o-animation: navMotion 2.3s;
animation: navMotion 2.3s;
}
#menu-load > li:nth-child(6) {
-webkit-animation: navMotion 2.5s;
-moz-animation: navMotion 2.5s;
-o-animation: navMotion 2.5s;
animation: navMotion 2.5s;
}
#menu-load > li:nth-child(7) {
-webkit-animation: navMotion 2.7s;
-moz-animation: navMotion 2.7s;
-o-animation: navMotion 2.7s;
animation: navMotion 2.7s;
}
[/css]
در کدهای css3 با استفاده از keyframe و مشخصه transform، یک انیمیشن برای منو ایجاد کردیم. با استفاده از مشخصه transform مکان عنصر را مشخص میکنیم و با استفاده از keyframe در سه حالت به عناصر منو حرکت میدهیم و برای هر عنصر زمان متفاوت در نظر میگیریم تا افکت حرکتی مورد نظر را اعمال کنیم.
شما میتوانید فایل کامل این اسکریپت را از لینک پایین دانلود کنید :
[/free_vip]
