به عنوان یک طراح، می توانید تجربه کاربری یک وب سایت یا اپلیکیشن موبایل را با افزودن انیمیشن های ظریف به اجزای آن افزایش دهید. یکی از این مؤلفه‌ها کادر ورودی جستجو است. این آموزش نحوه ایجاد ورودی جستجوی گسترده را پوشش می دهد. زمانی که کاربر روی نماد جستجو کلیک می کند، گسترش می یابد.
اگر از Youtube در مرورگر استفاده کنید، این نوع جلوه ورودی جستجو را در حال گسترش خواهید یافت:
ساختار HTML
ساختار HTML فقط یک div ساده شامل یک عنصر ورودی و یک دکمه خواهد بود.
1 |
<div class="search-wrapper"> |
2 |
<input type="search" placeholder="Search" /> |
3 |
<button class="search-btn"> |
4 |
<i id="search-icon" class="fa-solid fa-magnifying-glass"></i> |
5 |
</button>
|
6 |
</div>
|
متوجه خواهید شد که این یک ورودی با یک نوع جستجو است، نه متن. هیچ تفاوت واقعی بین این دو وجود ندارد، اما جستجو در مورد ما از نظر معنایی صحیح است.
« عناصر جستجوی نوع، فیلدهای متنی هستند که برای کاربر طراحی شده اند تا عبارات جستجو را در آن وارد کند. اینها از نظر عملکردی با ورودی‌های متنی یکسان هستند، اما ممکن است توسط عامل کاربر سبک متفاوتی داشته باشند.” – mdn
یک ظاهر طراحی با CSS
اولین کاری که می خواهیم انجام دهیم این است که همه چیز را با استفاده از Flexbox در مرکز قرار دهیم. استایل های زیر را روی بدن اعمال کنید.
1 |
body { |
2 |
display: flex; |
3 |
align-items: center; |
4 |
justify-content: center; |
5 |
background-color: gray; |
6 |
min-height: 100vh; |
7 |
}
|
در مرحله بعد، ورودی جستجوی کامل را استایل می‌دهیم و بعداً روی ویژگی در حال گسترش کار خواهیم کرد. برای عنصر wrapper، ارتفاع، عرض، حاشیه، شعاع حاشیه و پس‌زمینه اضافه کنید.
1 |
.search-wrapper { |
2 |
width: 50px; |
3 |
height: 50px; |
4 |
display: flex; |
5 |
border-radius: 4rem; |
6 |
background: #fff; |
7 |
align-items: center; |
8 |
justify-content: center; |
9 |
outline: none; |
10 |
border: 2px solid #888; |
11 |
|
12 |
}
|
سبک را نیز اضافه کرده ایم display: flex به عنصر wrapper div به طوری که عناصر فرزند یعنی ورودی و دکمه نیز در مرکز قرار می گیرند. برای عنصر ورودی، تنظیم کنید border:none، و outline:none. ما همچنین می خواهیم که عرض و ارتفاع کامل داشته باشد. a را تنظیم کنید margin-left:20px به متن جایگیر و مقداری بالشتک.
1 |
.search-wrapper input { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
padding: 10px; |
5 |
margin-left: 20px; |
6 |
outline: none; |
7 |
border: none; |
8 |
font-size: 1.5rem; |
9 |
|
10 |
}
|
برای قابل مشاهده کردن نماد، رنگ پس زمینه را روی دکمه تنظیم کنید. دکمه را با border-radius:50%و با تنظیم آن را در سمت راست عنصر wrapper قرار دهید margin-left: auto . سبک ها به شکل زیر خواهند بود:
1 |
.search-btn { |
2 |
font-size: 2rem; |
3 |
border-radius: 50%; |
4 |
padding: 10px; |
5 |
border: 2px solid white; |
6 |
width: 60px; |
7 |
cursor: pointer; |
8 |
height: 60px; |
9 |
background: #e66610; |
10 |
margin-left: auto; |
11 |
}
|
در حال گسترش ویژگی
اکنون که کل ورودی جستجو کامل شده است، می‌توانیم روی ویژگی گسترش کار کنیم. اولین کاری که می خواهیم انجام دهیم این است که عرض عنصر wrapper را کاهش دهیم.
1 |
.search-wrapper { |
2 |
width: 60px; |
3 |
height: 60px; |
4 |
display: flex; |
5 |
border-radius: 4rem; |
6 |
background: white; |
7 |
align-items: center; |
8 |
justify-content: center; |
9 |
border-radius: 100px; |
10 |
outline: none; |
11 |
|
12 |
|
13 |
}
|
بعد، تنظیم کنید position:relative به عنصر div wrapper و position:absolute به عنصر ورودی؛ این اطمینان حاصل می کند که موقعیت ورودی به جای بدنه نسبت به عنصر والد است.
1 |
.search-wrapper {
|
2 |
/* the rest of the CSS */ |
3 |
position: relative; |
4 |
} |
5 |
|
6 |
|
7 |
.search-wrapper input {
|
8 |
position: absolute; |
9 |
top: 0; |
10 |
left: 0; |
11 |
/* the rest of the CSS */ |
12 |
} |
حالا ما چیزی شبیه به این داریم.
همانطور که می بینید، ما هنوز به CSS اضافی نیاز داریم.
اجازه دهید با تنظیم، دکمه را در بالای ورودی شناور کنیم z-index:1 به دکمه
1 |
.search-btn { |
2 |
font-size: 2rem; |
3 |
border-radius: 50%; |
4 |
padding: 10px; |
5 |
border: 1px solid #be0671; |
6 |
width: 60px; |
7 |
cursor: pointer; |
8 |
height: 60px; |
9 |
background: #be0671; |
10 |
margin-left: auto; |
11 |
z-index: 1; |
12 |
|
13 |
}
|
سبک نهایی این است که هر سرریزی را با تنظیم پنهان کنید overflow: hidden روی عنصر div wrapper.
1 |
.search-wrapper { |
2 |
/* rest of the CSS */
|
3 |
overflow: hidden; |
4 |
|
5 |
}
|
عملکرد جاوا اسکریپت
عملکرد جاوا اسکریپت وقتی ماوس را نگه می دارید، عنصر wrapper را به عرض کامل افزایش می دهد و اگر ماوس را بردارید، عرض را کاهش می دهد. اجازه دهید ابتدا کلاس CSS را برای افزایش عرض تعریف کنیم.
1 |
.active { |
2 |
width: 350px; |
3 |
}
|
عنصر wrapper div را انتخاب کنید
1 |
const search = document.querySelector(".search-wrapper"); |
بعد، دو شنونده رویداد اضافه کنید، mouseover و mouseout. بر mouseover، سبک CSS فعال را اضافه می کنیم. بر mouseout، سبک CSS را حذف می کنیم.
1 |
search.addEventListener("mouseover", () => { |
2 |
if (!search.classList.contains("active")) { |
3 |
search.classList.add("active"); |
4 |
}
|
5 |
});
|
6 |
|
7 |
search.addEventListener("mouseout", () => { |
8 |
if (search.classList.contains("active")) { |
9 |
search.classList.remove("active"); |
10 |
}
|
11 |
});
|
انیمیشن
مرحله آخر اضافه کردن یک افکت انتقال است تا جلوه انتقال صاف شود.
1 |
.search-wrapper { |
2 |
/* the rest of the CSS */
|
3 |
transition: 400ms ease-in-out; |
4 |
|
5 |
}
|
برای دستیابی به احساس دلخواه می توانید با مقادیر انتقال بازی کنید. برای این آموزش تمام شد. CodePen زیر را بررسی کنید.
نتیجه
این آموزش ایجاد یک نوار جستجوی در حال گسترش را پوشش می‌دهد که شامل انیمیشن‌هایی برای بهبود تعامل است. گنجاندن تغییرات در طراحی شما برای جذاب تر و لذت بخش تر کردن رابط کاربری ضروری است.
