با یکی دیگر از جلسات پروژه محور آموزش روولوشن اسلایدر در خدمت شما همراهان عزیز آکادمی وبکیما هستیم، در این جلسه میخواهیم نحوه طراحی و ساخت یک باکس جستجو در اسلایدر روولوشن را به صورت کامل آموزش دهیم، پس اگر میخواهید یاد بگیرید که چگونه یک باکس جستجو داخل یک اسلایدر طراحی کنید به صورتی که بخش جستجو به صورت کامل کار کند، این جلسه را با دقت دنبال کنید.
کدهای HTML برای ساخت باکس جستجو
<form role="search" method="get" id="searchform" class="webkima-searchform" action="https://webkima.com">
<input type="text" value="" name="s" id="s" placeholder="دنبال چی میگردی؟" />
<input type="submit" id="searchsubmit" value="جستجو" />
</form>
کدهای CSS برای ساخت باکس جستجو
.webkima-searchform input#s {
font-family: 'dana';
font-size: 14px;
background-color: #ffffff85;
line-height: 45px !important;
padding: 0 20px;
cursor: text;
border: 0;
width: 400px;
margin-bottom: 0px;
transition: background-color 0.5s;
border-radius: 0px;
text-align: right !important;
}
.webkima-searchform input#s::placeholder {
color: #fff !important;
}
.webkima-searchform input#s[type="text"]:focus {
background-color: #f5f5f5;
}
.webkima-searchform input#searchsubmit, .webkima-searchform input#searchsubmit:focus {
font-family: 'dana';
line-height: 45px !important;
text-transform: uppercase;
font-size: 15px;
font-weight: 300 !important;
padding: 0 20px;
border: 0;
background: #0028eea6;
color: #fff;
border-radius: 0px;
margin-right: -11px;
}
.webkima-searchform input#searchsubmit:hover {
background: #0028ee;
}
دیگر جلسات دوره روولوشن اسلایدر
- اسلایدر رولوشن چیست؟ افزونه Revolution Slider
- دانلود رایگان روولوشن اسلایدر (به همراه اددانها) + نصب و پیکربندی
- آموزش کار با قسمت پسزمینهها در اسلایدر روولوشن
- افزودن فونت فارسی در اسلایدر رولوشن
- آموزش طراحی یک اسلایدر ساده با روولوشن اسلایدر
- تنظیم سایز اسلایدر در دیوایسهای مختلف در روولوشن اسلایدر
- آموزش طراحی اسلایدرهای ریسپانسیو با روولوشن اسلایدر
- کار با انیمیشنها در طراحی اسلایدر با روولوشن اسلایدر
- آموزش کار با لایههای عمومی (لایه استاتیک) در رولوشن اسلایدر
- آموزش تکرار یک انیمیشن روی یک لایه در روولوشن اسلایدر
- آموزش افزودن دکمه و لینک دادن به آن در اسلایدر رولوشن
- آموزش کار با بگراندهای گرادینت در رولوشن اسلایدر
- طراحی پروژه محور اسلایدر شماره یک با روولوشن اسلایدر
- طراحی پروژه محور اسلایدر شماره دو با روولوشن اسلایدر
- طراحی پروژه محور اسلایدر شماره 3 با رولوشن اسلایدر
- آموزش طراحی یک اسلایدر برای نمایش اعضای تیم
- آموزش قراردادن ویدیو برای پسزمینه اسلایدر
به طور مثال این برگه طراحی کردم لطفا برگه مشاهده کنید ***
اما بعد از 10 ثانیه تمام جزئیات داده شده میره و برمیگرده چطور میتونم متن و سرچ ثابت بذارم و بکگراندی ک فیلم نره و بیاد و دائم در حال پخش باشه.
این مورد که داخل همین جلسه به صورت کامل آموزش داده شده است، همه این موارد از داخل تایم لاین قابل تنظیم است.
چطور میتونیم یک متن بگراند و…ثابت یک بذارم و بعد از چند ثانیه نره این کارو با استفاده از لوپ انجام دادم اما بگراند و دکمه هام میره و میاد
این موارد را باید از تایم لاین مدیریت کنید، در جلسات انیمیشنها این موارد آموزش داده شده است.
جناب عبدی من اگر 0 تا 100 افزونه اسلایدر رولوشن یاد بگیرم باز هم صفحه به این صورت نمیتونم درست کنم . ***
آیا دوره آموزش جوا اسکریپت هم در راه است یا نه؟
صفحهای که ارسال کردهاید به صورت کامل با روولوشن اسلایدر قابل طراحی است، البته باید به این افزونه تسلط کافی داشته باشید، دوره آموزش جاوا اسکریپت هم خواهیم داشت اما احتمالا مدتی طول خواهد کشید.
استاد پایین هر اسلایدی که طراحی میکنم این کد میوفته چجوری میشه پاکش کرد
[html_block id=”258″]
یک اسکرین شات بگیرید و در سایتهای اشتراکگذاری تصویر آپلود کنید و لینک آن را در همین بخش ارسال کنید تا بهتر بتوانیم کمکتان کنیم.