ایموجی ها یکی از متداول ترین نمادهایی هستند که امروزه در اپلیکیشن های اجتماعی مورد استفاده قرار می گیرند. چه بخواهید احساسات را منتقل کنید یا ارتباطات را تقویت کنید، یک ایموجی یا ترکیبی از شکلک ها برای انجام کار وجود دارد. در این آموزش، ما یک جزء اموجی رتبه بندی می سازیم که به کاربر امکان می دهد با استفاده از یک نوار لغزنده میزان رضایت خود را ارزیابی کند.

ساختار HTML

ساختار HTML از یک عنصر div ظرف با عناصر فرزند زیر تشکیل شده است:

  • یک عنوان و یک زیرنویس

  • عنصر تصویر برای نمایش ایموجی فعلی

  • یک div برای نشان دادن محتوای رتبه‌بندی.

  • یک عنصر ورودی محدوده

یک ظاهر طراحی با CSS

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

گروتسک بریکلاژ فونتی است که از فونت های گوگل در دسترس است. و رنگی که من انتخاب کرده‌ام از شفافیت جزئی استفاده می‌کند به طوری که وقتی پس‌زمینه تغییر می‌کند، رنگ متن نیز تغییر می‌کند.

در نهایت، یک ویژگی انتقال را در پس‌زمینه می‌بینید، به طوری که وقتی رنگ را تغییر می‌دهیم، به خوبی از یکی به دیگری محو می‌شود.

1
 
body {

2
 
  font-family: 'Bricolage Grotesque', sans-serif;

3
 
  display: flex;

4
 
  justify-content: center;

5
 
  align-items: center;

6
 
  flex-direction: column;

7
 
  min-height: 100vh;

8
 
  background: #fff;

9
 
  color: rgba(0,0,0,0.7);

10
 
  transition: background .5s ease-in-out;

11
 
}

برای عنصر ظرف، استایل های زیر را اعمال کنید تا عناصر فرزند در مرکز و به صورت عمودی روی هم قرار گیرند. 

1
 
.container {

2
 
  width: 300px;

3
 
  padding: 0 10px;

4
 
  background: #B4BED9;

5
 
  border-radius: 20px;

6
 
  padding: 40px 5px;

7
 
  display: flex;

8
 
  flex-direction: column;

9
 
  align-items: center;  

10
 
  text-align: center;

11
 
  justify-content: space-around;

12
 
  position: relative;

13
 


14
 
}

عنوان و عنوان فرعی در بالای عنصر ظرف با سبک های زیر قرار می گیرند.

1
 
.title {

2
 
  font-size: 3rem;

3
 
  font-weight: 800;

4
 
  margin: 0 0 1rem 0;

5
 
  line-height: .9;

6
 
}

7
 
.subtitle {

8
 
  font-size: 1rem;

9
 
  margin: 0;

10
 
}

لغزنده سفارشی

ورودی محدوده به طور پیش فرض از یک نوار و یک عنصر کنترل لغزنده تشکیل شده است. عنصر کنترل لغزنده (شست) در امتداد نوار افقی حرکت می کند و به کاربران امکان می دهد مقدار خاصی را انتخاب کنند. محدوده ورودی نیز بسته به مرورگری که در آن نمایش داده می شود متفاوت به نظر می رسد. این ورودی محدوده پیش‌فرض در کروم است.

ورودی محدودهورودی محدودهورودی محدوده

به جای استفاده از نوار لغزنده پیش‌فرض بالا، آن را سفارشی می‌کنیم تا بسیار بهتر به نظر برسد. تنظیم -webkit-appearance: none; و appearance: none; در ورودی محدوده 

1
 
input[type="range"] {

2
 
  -webkit-appearance: none;

3
 
  appearance: none;

4
 
}

تاثیر این سبک ها حذف ظاهر پیش فرض است تا بتوانیم استایل دلخواه خود را ارائه دهیم. استایل های اضافی زیر را روی نوار لغزنده تنظیم کنید.

1
 
input[type="range"] {

2
 
  position: absolute;

3
 
  top: 85%;

4
 
  -webkit-appearance: none;

5
 
  appearance: none;

6
 
  width: 80%;

7
 
  background: #e5e5e5;

8
 
  height: 2px;

9
 
  border-radius: 5px;

10
 
  outline: none;

11
 
  box-shadow: #F2D2BD;

12
 
}

ظاهر انگشت شست در مرورگرهای مختلف متفاوت است. از این رو، ما سبک‌های فردی را بر اساس مرورگر اعمال می‌کنیم تا انگشت شست در مرورگرهای مختلف سازگار باشد. سبک  -webkit-appearance: none;  سبک شست پیش فرض ارائه شده توسط مرورگر را حذف می کند. بیایید ارتفاع، عرض، بالشتک و رنگ پس‌زمینه سفارشی را نیز اعمال کنیم. 

1
 
input[type="range"]::-webkit-slider-thumb {

2
 
  -webkit-appearance: none;

3
 
  padding: 5px;

4
 
  height: 5px;

5
 
  width: 5px;

6
 
  border:5px solid #fff;

7
 
  border-radius: 50%;

8
 
  cursor: pointer;

9
 
  background: #4c4c4c;

10
 
}

11
 


12
 
/* FIREFOX */

13
 
input[type="range"]::-moz-range-thumb {

14
 
  padding: 5px;

15
 
  height: 5px;

16
 
  width: 5px;

17
 
  border:5px solid #fff;

18
 
  border-radius: 50%;

19
 
  cursor: pointer;

20
 
  background: #4c4c4c;

21
 


22
 
}

ابعاد تصویر را تنظیم کنید و یک انیمیشن افکت پرش اضافه کنید.

1
 
@keyframes bounce {

2
 
  0%, 100% {

3
 
    transform: translateY(0);

4
 
  }

5
 
  50% {

6
 
    transform: translateY(-10px);

7
 
  }

8
 
}

9
 


10
 
img {

11
 
  height: 150px;

12
 
  width: 150px;

13
 
  outline: none;

14
 
  animation: dance 1s infinite;

15
 
}

در نهایت به تقسیم محتوای رتبه بندی استایل دهید.

1
 
.rating {

2
 
  font-size: 20px;

3
 
  font-weight: 100;

4
 
  width: 150px;

5
 
}

عملکرد جاوا اسکریپت

با تغییر مقدار ورودی محدوده، از جاوا اسکریپت برای به‌روزرسانی نوع ایموجی، رنگ ظرف و پیام رتبه‌بندی استفاده می‌کنیم.

a دانلود کردم مجموعه ای درخشان از 100 ایموجی SVG از Envato Elements، ایده آل برای این پروژه.

100 ایموجی svg100 ایموجی svg100 ایموجی svg

بنابراین، با انتخاب و آپلود نمادهای SVG من، اجازه دهید عناصر خود را دریافت کرده و داده های خود را تعریف کنیم.

1
 
const container = document.querySelector('.container')

2
 
const slider = document.getElementById("slider");

3
 
const emoji = document.querySelector(".emoji");

4
 
const rate = document.getElementById("message");

5
 
const colors = ["#d35e65", "#d3965c", "#cad48a", "#6ed494", "#18c574"];

6
 
پایان ایموجی ها = [

7
 
  {

8
 
    text: "Awful",

9
 
    url: "Disappointed.svg"

10
 
  },

11
 
  {

12
 
    text: "Bad",

13
 
    url: "Sad.svg"

14
 
  },

15
 
  {

16
 
    text: "Okay",

17
 
    url: "Expressionless.svg"

18
 
  },

19
 
  {

20
 
    text: "Good",

21
 
    url: "Smile.svg"

22
 
  },

23
 
  {

24
 
    text: "Great",

25
 
    url: "Love.svg"

26
 
  }

27
 
];

آرایه ایموجی اشیا را تعریف می کند. هر شی شامل یک تصویر ایموجی و متنی است که احساس ایموجی را توصیف می کند. ما از این داده ها برای نمایش پویا ایموجی ها بر اساس تعامل کاربر با مؤلفه رتبه بندی استفاده خواهیم کرد.

سپس یک تابع به نام ایجاد کنید UpdateRating(). درون UpdateRating() تابع، مقدار روی نوار لغزنده متحرک را دریافت کنید.

1
 
function UpdateRating() {

2
 
   const value =slider.value;

3
 
  }

در مرحله بعد، عبارات if را ایجاد می کنیم که مقدار روی نوار لغزنده را بررسی می کند و سبک شکلک، رنگ پس زمینه و پیام را بسته به مقدار روی نوار لغزنده به روز می کند. مقادیر پایین امتیاز پایین، شکلک‌های غمگین و پیام‌های منفی را جذب می‌کنند، در حالی که مقادیر بالا امتیاز بالا، پیام‌های مثبت و شکلک‌های مثبت را جذب می‌کنند.

نوار لغزنده از 0 تا 100 باز می شود. بنابراین ما به هر پیام یک بازه 20 واحدی اختصاص می دهیم.

را به روز کنید UpdateRating مطابق شکل زیر عمل کنید.

1
 
function UpdateRating() {

2
 
  const value =slider.value;

3
 
  

4
 
  if (value >= 0 && value < 20) {

5
 
    emoji.src = emojis[0].url

6
 
    rate.textContent =  emojis[0].text;

7
 
    container.style.backgroundColor =colors[0];

8
 


9
 
  } else if (value >= 20 && value < 40) {

10
 
    emoji.src = emojis[1].url

11
 
    rate.textContent =  emojis[1].text;

12
 
    container.style.backgroundColor =colors[1];

13
 
    

14
 
  } else if (value >= 40 && value < 60) {

15
 
    emoji.src = emojis[2].url

16
 
    rate.textContent =  emojis[2].text;

17
 
    container.style.backgroundColor =colors[2];

18
 
    

19
 
  } else if (value >= 60 && value < 80) {

20
 
    emoji.src = emojis[3].url

21
 
    rate.textContent =  emojis[3].text;

22
 
    container.style.backgroundColor = colors[3];

23
 
    

24
 
  } else if (value >= 80 && value <= 100) {

25
 
    emoji.src = emojis[4].url

26
 
    rate.textContent =  emojis[4].text;

27
 
    container.style.backgroundColor = colors[4];   

28
 
  }}

بیایید منطق شرطی خود را اصلاح کنیم تا مطمئن شویم کد تکراری نیست. یک تابع به نام ایجاد کنید setProperties()، که شاخص را به عنوان آرگومان می گیرد. داخل setProperties()، منطق تکراری را اضافه کنید.

1
 
function setProperties(index){

2
 
  emoji.src = emojis[index].url

3
 
  rate.textContent =  emojis[index].text;

4
 
  container.style.backgroundColor =colors[index];

5
 
  }

برای هر شرایط، با شماره تماس بگیرید setProperties() عملکرد مانند این:

1
 
function UpdateRating() {

2
 
  const value =slider.value;

3
 
 

4
 
  if (value >= 0 && value < 20) {

5
 
    setProperties(0)

6
 
    

7
 
  } else if (value >= 20 && value < 40) {

8
 
    setProperties(1)

9
 
    

10
 
  } else if (value >= 40 && value < 60) {

11
 
    setProperties(2)

12
 
    

13
 
  } else if (value >= 60 && value < 80) {

14
 
    setProperties(3)

15
 
    

16
 
  } else if (value >= 80 && value <= 100) {

17
 
    setProperties(4) 

18
 
  }}

در نهایت باید یک رویداد شنونده به محدوده ورودی اضافه کنیم. شنونده رویداد به آن گوش خواهد داد oninput رویداد و سپس تماس بگیرید UpdateRating() تابع. یک oninput رویداد زمانی رخ می دهد که مقدار یک عنصر ورودی تغییر می کند. با توجه به محدوده ورودی، oninput رویداد زمانی که کاربر با آن در تعامل است، بازخورد (مقدار) در زمان واقعی را ارائه می دهد. 

1
 
slider.addEventListener("input", UpdateRating);

این UpdateRating() هر بار که کاربر نوار لغزنده را جابجا می کند، تابع فراخوانی می شود.

نتیجه

این آموزش نحوه ساخت مولفه رتبه بندی ایموجی کاربردی را پوشش می دهد. ما همچنین یاد گرفتیم که چگونه عنصر محدوده ورودی در مرورگرهای مختلف استایل بندی می شود. برای بهبود عملکرد، می‌توانید بازخورد بیشتری از کاربران درخواست کنید.

بیایید آنچه را که ساخته ایم به خود یادآوری کنیم – و امیدوارم از این تجربه لذت برده باشید!

Related posts:

نحوه ایجاد برف متحرک در وب سایت (با CSS و جاوا اسکریپت)
بهترین آموزش های منوی پاسخگو در Tuts+
گرایش طراحی وب Neubrutalism چیست؟

Related posts:

  1. شماره 455
  2. شماره 476 – هفته نامه CSS
  3. 10 بهترین قالب ایمیل خلاق (جذاب و سرگرم کننده)
  4. 5 تفاوت مهم در سال 2022