ایجاد افکت موج در صفحات وب با CSS و JavaScript

یکی از ویژگی‌های زبان طراحی متریال گوگل این است که با تپ یا کلیک کردن روی عناصر، افکت جالب موج که به اطراف پخش شده و محو می‌شود را رویت می‌کنیم. به این ویژگی Ripple Effect گفته می‌شود و با روش‌های مختلف قابل‌پیاده‌سازی است. می‌توانید از CSS خالص استفاده کنید که مشکلات خاص خود را دارد و می‌توانید از ترکیب CSS و Javascript استفاده کنید.

در این مقاله می‌خواهیم افکت پخش شدن موج پس از کلیک کردن را با استفاده از جاوااسکریپت خالص و CSS در صفحات وب طراحی کنیم. با ما باشید.

همان‌طور که اشاره کردیم برای طراحی کردن افکت پخش شدن موج یا Ripple Effect روش‌های مختلفی وجود دارد اما بهترین و ساده‌ترین روش این است که از جاوااسکریپت به همراه CSS استفاده کنید. به کمک Javascript یک المان جدید در نقطه‌ای که کلیک شده ایجاد کنید که دارای انیمیشن بزرگ شدن یا Scale و محو شدن یا Opacity است و پس از زمان مشخصی، عنصری که به صفحه‌ی وب اضافه شده، به کمک جاوااسکریپت حذف می‌شود. در صورت نیاز می‌توانید رنگ موج را نیز با توجه به عنصری که روی آن کلیک شده، مشخص کنید.

و اما پیاده‌سازی عملی، ابتدا اضافه کردن المانی جدید با تگ div را بررسی می‌کنیم و سپس به div اضافه شده در HTML، استایل و انیمیشن دلخواه را از طریق CSS می‌دهیم.

اضافه کردن Span در محل کلیک روی صفحه وب

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

document.getElementsByClassName("myRipple")

اگر برخی المان‌ها دارای کلاس خاص و موردنظر شما هستند و برخی دیگر دارای id موردنظر شما هستند و برخی دیگر صرفاً یک تگ عمومی هستند، مثل Button، و می‌خواهید تمام این موارد را به صورت یک آرایه برای اضافه کردن افکت موج انتخاب کنید، از روش querySelectorAll استفاده کنید و با ویرگول، موارد را جدا کنید. توجه کنید که در این صورت باید قبل از نام کلاس‌ها نقطه گذاشت و قبل از آی‌دی‌ها نیز علامت # را اضافه کرد.

به عنوان مثال اگر کد HTML بخش‌هایی از صفحه‌ی شما به این صورت باشد:

<div class='myRipple' ripple-color='red'>Custom div</div>
<button class='button1' ripple-color='red'>Custom Button 1></button>
<button class='button2' ripple-color='blue'>Custom Button 2></button>
<button class='button3' ripple-color='red'>Custom Button 3></button>
<button class='button4' ripple-color='blue'>Custom Button 4></button>
<span id="idName" ripple-color='white'></span>

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

document.querySelectorAll(".classname,#id,button")

قدم بعدی ایجاد یک حلقه با for است که به تعداد عناصر آرایه، تکرار می‌شود. در هر بار اجرای حلقه، می‌بایست موقعیت موس نسبت به ضلع بالا و چپ محاسبه شود چرا که قرار است Span یا Div موردبحث، در این موقعیت ظاهر شود. برای مختصات X و Y از دستورات زیر استفاده می‌کنیم:

X = e.pageX - this.offsetLeft;

Y = e.pageY - this.offsetTop;

برای ایجاد المان جدید از دستور زیر استفاده می‌شود:

rippleDiv = document.createElement("div");

در ادامه به آن کلاس ripple اضافه می‌شود. در ادامه می‌توانیم با استفاده از CSS، انیمیشنی برای کلاس ripple تعریف کنیم:

rippleDiv.classList.add('ripple');

و در نهایت موقعیت آن روی صفحه از طریق setAttribute و style مشخص می‌شود. موقعیت نسبت به بالای صفحه به صورت top: Ypx و نسبت به ضلع چپ نیز left: Xpx است. بدیهی است که نوع position این المان جدید باید مطلق یا absolute باشد که در ادامه در بخش CSS تعریف می‌شود.

rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");

در صورت نیاز به استفاده از رنگ خاصی که در مشخصه‌ای به اسم ripple-color و در سورس صفحه یا HTML برای هر یک از دکمه‌ها، Divها و ... تعریف شده، می‌توانیم به style یک کمیت دیگر نیز اضافه کنیم. بنابراین ابتدا با دستور getAttribute مشخصه‌ی ripple-color را دریافت می‌کنیم:

customColor = this.getAttribute('ripple-color');

و سپس با دستور شرطی یعنی یک if‌ ساده، بررسی می‌کنیم که آیا متغیر customColor موجود است و عددی به جز صفر است، و در این صورت background: customColor خواهد بود:

if(customColor) rippleDiv.style.background = customColor;

و در نهایت می‌بایست تمام مراحل تابع اضافه کردن Div‌ به صورت موقتی انجام شود. بنابراین با استفاده از دستور setTimeout یک تابع دیگر برای حذف کردن المان اضافه شده را اجرا می‌کنیم. به عنوان مثال برای حذف کردن rippleDiv پس از ۱۰۰۰ میلی‌ثانیه، از دستور زیر استفاده می‌شود:

setTimeout(function(){rippleDiv.parentElement.removeChild(rippleDiv);},1000);

تمام مراحل فوق می‌بایست پس از بارگذاری کامل صفحه به عنوان یک تابع جاوااسکریپت اجرا شود. لذا از window.onload = function() {} استفاده می‌کنیم و کد نهایی به صورت زیر است:

window.onload = function() {
  let rippleElements = document.querySelectorAll(".classname,#id,button");
  for(var i = 0; i < rippleElements.length; i++) {
      rippleElements[i].onclick = function(e) {
        let X = e.pageX - this.offsetLeft;
        let Y = e.pageY - this.offsetTop;
        let rippleDiv = document.createElement("div");
        rippleDiv.classList.add('ripple');
        rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");
        let customColor = this.getAttribute('ripple-color');
        if(customColor) rippleDiv.style.background = customColor;
        this.appendChild(rippleDiv);
        setTimeout(function(){
          rippleDiv.parentElement.removeChild(rippleDiv);
        },1000);
  }
}
}

آنچه که باید به تناسب طراحی سایت و صفحه‌ی HTML در کد فوق تغییر کند، نام کلاس‌ها و آی‌دی و یا سلکتورها در خط دوم و همین‌طور مدت زمان باقی ماندن div موقت اضافه شده با تغییر عدد ۱۰۰۰ است.

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

انیمیش پخش موج یا Ripple Effect به صورت CSS

نام کلاس بلوکی که موقتاً برای مدت ۱ ثانیه روی صفحه آشکار می‌شد را ripple انتخاب کردیم. بنابراین ابتدا می‌بایست رنگ پس‌زمینه‌ی این بلوک جدید را سفید، موقعیت آن را از نوع مطلق و عرض و ارتفاع آن را کوچک در حد ۴ یا ۵ پیکسل و به همراه شعاع گوشه‌ها در حد گرد شدن کامل، تعریف کنیم و سپس انیمیشن و میزان شفافیت آن را مشخص کنیم.

نام انیمیشن را rippleEffect می‌گذاریم و مدت زمان آن را ۱ ثانیه در نظر می‌گیرد. این انیمیشن دو فریم کلیدی دارد:

فریم ۰ درصد یا شروع: شفافیت ابتدا 0.5 واحد یا ۵۰ درصد است و مقیاس نیز ۱ واحد است. به عبارت دیگر یک دایره‌ی به قطر ۵ پیکسل.
فریم ۱۰۰ درصد یا پایانی: شفافیت ۰ درصد است و مقیاس ۱۰۰ واحد است. به عبارت دیگر یک دایره به قطر ۵۰۰ پیکسل و کاملاً شفاف.

کلاس CSS و انیمیشن نهایی اینگونه خواهد بود:

.ripple {
  position: absolute;
  background: #fff;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  animation: rippleEffect 1s 1;
  opacity: 0;
}

@keyframes rippleEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

به این ترتیب کد تکمیل می‌شود.

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

سیاره‌ی ‌آی‌تی