با استفاده از html، CSS و جاوا اسکریپت، دو خط نشانگر RGB ایجاد کنید

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

ما چیزی شبیه به آن خواهیم ساخت:

HTML:
در HTML که می خواهیم به آن اضافه کنیم divهر div دارای 2 کلاس است که کلاس اول است .line و کلاس دوم و کلاس دوم برای هر یک کلاس منحصر به فرد است div مانند آن:

<div class="line line-x"></div>
<div class="line line-y"></div>

CSS:
بیایید CSS را با حذف سبک های اصلی شروع کنیم و به بدنه یک رنگ پس زمینه سیاه بدهیم:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

اکنون می خواهیم یک متغیر برای ذخیره عمق خط به صورت زیر ایجاد کنیم:

:root {
  --depth: 10px;
}

ما می خواهیم خط را سبک کنیم. آن را خواهیم داد position: absolute به آن آزادی حرکت داده و به آن الف transition: 0.1s برای به دست آوردن یک حرکت نرم و اضافه کردن سبک های بیشتری مانند آن:

.line {
  position: absolute;
  background-color: #41f941;
  box-shadow: 0 0 50px #41f94180;
  transition: 0.1s;
  opacity: 0.8;
}

حالا باید استایل کنیم line-x و line-y. بیا شروع کنیم با line-x. یادت میاد --depth? ما الان آن را می خواهیم

.line-x {
  width: 100%;
  height: var(--depth);
  top: -15px;
}

و برعکس را وارد کنید line-y.

.line-y {
  width: var(--depth);
  height: 100%;
  left: -15px;
}

جاوا اسکریپت:
بیایید شروع به دریافت عناصر مانند آن کنیم:

// get elements
const lineX = document.querySelector(".line-x");
const lineY = document.querySelector(".line-y");

خوب، ما می خواهیم وقتی مکان نما حرکت می کند ما تنظیم می کنیم line-x‘s top به مکان نما X با استفاده از clientX و همین کار را در line-y مانند آن:

document.addEventListener("mousemove", function (event) {
  lineX.style.top = event.clientY + "px";
  lineY.style.left = event.clientX + "px";
});

خیلی خوب، ما این کار را انجام دادیم اما می خواهیم انیمیشن RGB بسازیم. برای این کار باید از CSS استفاده کنیم. در کد CSS این کار را انجام می دهیم:

@keyframes color-change {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

و انیمیشن را روی آن اعمال کنید line. مانند آن:

.line {
  animation-name: color-change;
  animation-duration: 3s;
  animation: color-change 5s infinite;
}

در حال حاضر، ما یک اثر زیبا داریم