یک پیکربندی صفحه وب سایت با CSS و جاوا اسکریپت بسازید
انتشار: آبان 18، 1403
بروزرسانی: 25 خرداد 1404

یک پیکربندی صفحه وب سایت با CSS و جاوا اسکریپت بسازید


برای ایجاد پیکربندی صفحه خود، تکنیک های قدیمی CSS را با ویژگی های CSS مدرن مانند ویژگی های سفارشی و جستجوهای کانتینر ترکیب می کنیم.

چیزی که ما می سازیم

بدون مقدمه، اجازه دهید نگاهی به پروژه نهایی بیندازیم. برای دسترسی به پنل کنترل، روی نماد تنظیمات در سمت چپ صفحه کلیک کنید:

1. با نشانه گذاری پانل شروع کنید

با تعریف دکمه جابجایی و پیکربندی پانل شروع کنید. در داخل پانل، ما پنج لفاف فرم قرار می دهیم - بعداً به هر یک از آنها خواهیم پرداخت.

در اینجا نشانه گذاری شروع است:

1
2
   class="fa-solid fa-screwdriver-wrench" aria-hidden="true">
3

4

5
 class="panel">
6
  
 class="control-wrapper">...

7
  
 class="control-wrapper">...

8
  
 class="control-wrapper">...

9
  
 class="control-wrapper">...

10
  
 class="control-wrapper">...

11

صرفاً به دلایل سبکی، کتابخانه نماد Font Awesome را در پروژه خود قرار خواهیم داد.

2. پانل را تغییر دهید

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

پیکربندی صفحه ماپیکربندی صفحه ماپیکربندی صفحه ما

در اینجا سبک های مرتبط آورده شده است:

1
/*CUSTOM VARIABLES HERE*/
2

3
.btn-toggle-panel,
4
.panel {
5
  position: fixed;
6
  left: 10px;
7
  z-index: 1;
8
  color: var(--vampire-black);
9
  background: var(--anti-flash-white);
10
}
11

12
.btn-toggle-panel {
13
  top: 10px;
14
  font-size: 18px;
15
  width: 54px;
16
  height: 54px;
17
  border-radius: 50%;
18
}
19

20
.panel {
21
  top: 70px;
22
  font-size: 16px;
23
  line-height: normal;
24
  padding: 30px 20px;
25
  border-radius: 30px;
26
  transform: translateX(calc(-100% - 10px));
27
  transition: transform 0.4s;
28
}
29

30
.panel.show {
31
  transform: none;
32
}

و کد جاوا اسکریپت مرتبط:

1
const togglePanelBtn = document.querySelector(".btn-toggle-panel");
2
const panel = document.querySelector(".panel");
3

4
togglePanelBtn.addEventListener("click", function () {
5
  panel.classList.toggle("show");
6
});

3. سفارشی سازی صفحه

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

برای سادگی، از بیشتر موارد CSS صرف نظر می کنیم و فقط بخش های اساسی را نشان می دهیم.

فونت-خانواده

به طور پیش فرض، پروژه از آریال خانواده فونت با این حال، ما می توانیم یکی از فونت های گوگل زیر را انتخاب کنیم:

  • فیرا سانس
  • اینتر
  • لاتو
  • مونتسرات
  • راه آهن
  • ربات
  • اوبونتو

توجه داشته باشید که ما همه فونت ها را با هم دانلود نمی کنیم، بلکه در صورت درخواست با دنبال کردن Google Fonts API. به همین دلیل است که اولین باری که یک فونت جدید را انتخاب می کنید، یک سوسو زدن فوری را مشاهده خواهید کرد. می توانید فایل های فونت دانلود شده را در مرورگر خود بررسی کنید شبکه برگه

بخش HTML:

1
 class="control-wrapper">
2
  
3
  
 class="inner">
4
    
5
      
6
      
7
      
8
      
9
      
10
      
11
      
12
      
13
    
14
  
15

بخش جاوا اسکریپت:

1
const html = document.documentElement;
2
const fontFamilySelect = document.querySelector(\'(name="family")\');
3
const fontSizeInput = document.querySelector(\'(type="number")\');
4

5
fontFamilySelect.addEventListener("input", function (e) {
6
  const value = e.target.value;
7
  if ("Arial" === value) {
8
    html.style.setProperty("--font-family", value);
9
    return;
10
  }
11
  const link = document.createElement("link");
12
  link.rel = "stylesheet";
13
  link.href = `https://fonts.googleapis.com/css2?family=${value.replaceAll(
14
    " ",
15
    "+"
16
  )}:wght@400;700&display=swap`;
17
  document.head.appendChild(link);
18
  html.style.setProperty("--font-family", value);
19
});

اندازه فونت

اندازه فونت پایه 18 پیکسل خواهد بود. می توانیم آن را از طریق دکمه ها یا تایپ کردن در ورودی هدف کاهش یا افزایش دهیم. در هر نقطه، اندازه فونت پایه نمی تواند کمتر از 18 پیکسل یا بیشتر از 36 پیکسل باشد.

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

بخش HTML:

بخش جاوا اسکریپت:

1
const html = document.documentElement;
2
const fontFamilySelect = document.querySelector(\'(name="family")\');
3
const fontSizeInput = document.querySelector(\'(type="number")\');
4
const fontSizeBtns = document.querySelectorAll(".btn-font-size");
5
let selectedFontSize = fontSizeInput.value;
6

7
fontSizeBtns.forEach(function (btn) {
8
  btn.addEventListener("click", function (e) {
9
    const inputValue = Number(fontSizeInput.value);
10
    if (
11
      e.target.classList.contains("btn-decrease") ||
12
      e.target.parentElement.classList.contains("btn-decrease")
13
    ) {
14
      if (fontSizeInput.value <= 10) return;
15
      fontSizeInput.value--;
16
    } else {
17
      if (fontSizeInput.value >= 20) return;
18
      fontSizeInput.value++;
19
    }
20
    selectedFontSize = fontSizeInput.value;
21
    html.style.setProperty("--font-size", `${selectedFontSize}px`);
22
  });
23
});
24

25
fontSizeInput.addEventListener("change", function () {
26
  const value = this.value;
27
  if (value < 10 || value > 20) {
28
    this.value = selectedFontSize;
29
  } else {
30
    selectedFontSize = value;
31
  }
32
  html.style.setProperty("--font-size", `${selectedFontSize}px`);
33
});

رنگ ها

رنگ پیش فرض پس زمینه صفحه سفید و رنگ متن سیاه خواهد بود. با تشکر از input عنصر نوع color، به راحتی می توانیم ظاهر جدیدی را به صفحه خود اعمال کنیم.

بخش HTML:

بخش جاوا اسکریپت:

1
const html = document.documentElement;
2
const colorInputs = document.querySelectorAll(\'(type="color")\');
3

4
colorInputs.forEach(function (input) {
5
  input.addEventListener("input", function () {
6
    html.style.setProperty(`--${this.id}`, this.value);
7
  });
8
});

جلوه های تصویری

به طور پیش فرض، همه تصاویر هیچ افکتی نخواهند داشت. با این حال، ما می توانیم یکی از موارد زیر را انتخاب کنیم:

به استفاده از پرس و جوهای سبک ظرف برای اعمال سبک درخواستی توجه کنید. این یک ویژگی بسیار جدید CSS با تقریباً 75٪ پشتیبانی کنید در طول این نگارش

البته، شما می توانید یک راه حل بازگشتی برای پشتیبانی گسترده تر مرورگر پیاده سازی کنید.

بخش HTML:

1
 class="control-wrapper">
2
      
3
  
 class="inner">
4
    
5
      
6
      
7
      
8
      
9
    
10
  
11

بخش CSS:

1
@container style(--type: grayscale) {
2
  img {
3
    filter: grayscale(1);
4
  }
5
}
6

7
@container style(--type: blur) {
8
  img {
9
    filter: blur(3px);
10
  }
11
}
12

13
@container style(--type: rounded) {
14
  img {
15
    border-radius: 50px;
16
  }
17
}

بخش جاوا اسکریپت:

1
const html = document.documentElement;
2
const imageStyleSelect = document.querySelector(\'(name="image-style")\');
3

4
imageStyleSelect.addEventListener("input", function (e) {
5
  html.style.setProperty("--type", e.target.value);
6
});

نتیجه گیری

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

اگر سؤالی دارید یا نیاز به چیز اضافی دارید، در قسمت آزمایشی نظر دهید.

بیایید دوباره به خلقت خود نگاه کنیم:

مثل همیشه، خیلی ممنون که خواندید!


منبع: https://webdesign.tutsplus.com/build-a-website-page-configurator-with-css-javascript--cms-109013t
نویسنده: تیم تحریریه روحانی نژاد