مطالب عمومی

آموزش افکت منو هنگام load صفحه با CSS3

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1727 نفر
4 دقیقه
بروزرسانی در: آبان 4, 1400

فهرست مطالب

به تازگی ایده های جدیدی در طراحی سایت ها دیده میشود که برای کاربران جذابیت خاصی دارد. افکت هایی که هنگام لود صفحه وب بر روی المان های صفحه اجرا میشود زیبای خاصی به ظاهر وب سایت شما میدهد. در واقع با استفاده از 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]

به این صفحه رتبه دهید
بدون دیدگاه
انتشار: آبان 7, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا