نحوه ایجاد افکت موج آب در سایت

تیم تحریریه کلیک اول | یکشنبه , ۲۴ تیر ۱۳۹۷ | مدت زمان مطالعه: 12 دقیقه

در این مقاله می خوانید:

یکی از مواردی که مدیران سایت ها و وبمستران می توانند از آن برای ایجاد تجربه کاربری مناسب یا همان UX استفاده نمایند، ایجاد افکت های جذاب در سایت می باشد. در این مطلب قصد داریم تا با یکی از جذاب ترین افکت های سایت، یعنی افکت موج آب را بررسی نماییم.

یکی از مواردی که می تواند باعث ماندگاری بیشتر کاربران بر روی سایت شده و تجربه کاربری بهتری را برای آن ها به ارمغان بیاورد، افزودن افکت های زیبا در هنگام طراحی سایت می باشد. این مسئله در دراز مدت باعث افزایش ترافیک سایت شده و از آن جایی که گوگل توجه فراوانی به بازدید و ترافیک دارد، می تواند در سئو و بهینه سازی سایت شما نیز موثر باشد. یکی از افکت های بسیار جذابی که می تواند در بخش های مختلفی از سایت نظیر Header قرار گیرد، افکت موج آب می باشد.

ایجاد افکت موج آب

برای دانلود کتابخانه افکت موج آب، می توانید با ورود به این آدرس، نحوه اعمال کدها را مشاهده نمایید. همچین برای دانلود این کتابخانه، می توانید وارد صفحه مربوطه در سایت گیت هاب شده و از طریق دکمه موجود، اقدام به دانلود و یا کپی فایل نمایید. پس از دانلود فایل زیپ شده، آن را اکسترکت نموده و وارد پوشه Demo شوید. در این پوشه یک فایل به نام index.html قرار دارد. با باز نمودن این فایل در یک نرم افزار IDE مانند sublime text، می توانید به کدهای آن دسترسی داشته باشید.

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

در پایین کدهای HTML نیز دو فایل با پسوند js. اضافه شده است:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../dist/jquery.ripples.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="../dist/jquery.ripples.js"></script>

خط اول، فایل jQuery می باشد که در اکثر سایت ها استفاده می شود. اگر این فایل را در سایت خود دارید، نیازی به افزودن آن به کدهای سایت وجود ندارد.

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

در پایان نیز یک قطعه کد اسکریپت حاوی تنظیمات مربوط به نحوه اعمال افکت موج آب قرار دارد:

<script>
$(document).ready(function() {
	try {
		$('body').ripples({
			resolution: 512,
			dropRadius: 20, //px
			perturbance: 0.04,
		});
		$('main').ripples({
			resolution: 128,
			dropRadius: 10, //px
			perturbance: 0.04,
			interactive: false
		});
	}
	catch (e) {
		$('.error').show().text(e);
	}

	$('.js-ripples-disable').on('click', function() {
		$('body, main').ripples('destroy');
		$(this).hide();
	});

	$('.js-ripples-play').on('click', function() {
		$('body, main').ripples('play');
	});

	$('.js-ripples-pause').on('click', function() {
		$('body, main').ripples('pause');
	});

	// Automatic drops
	setInterval(function() {
		var $el = $('main');
		var x = Math.random() * $el.outerWidth();
		var y = Math.random() * $el.outerHeight();
		var dropRadius = 20;
		var strength = 0.04 + Math.random() * 0.04;

		$el.ripples('drop', x, y, dropRadius, strength);
	}, 400);
});
</script>

$(document).ready(function() {

try {

$('body').ripples({

resolution: 512,

dropRadius: 20, //px

perturbance: 0.04,

});

$('main').ripples({

resolution: 128,

dropRadius: 10, //px

perturbance: 0.04,

interactive: false

});

}

catch (e) {

$('.error').show().text(e);

}

$('.js-ripples-disable').on('click', function() {

$('body, main').ripples('destroy');

$(this).hide();

});

$('.js-ripples-play').on('click', function() {

$('body, main').ripples('play');

});

$('.js-ripples-pause').on('click', function() {

$('body, main').ripples('pause');

});

// Automatic drops

setInterval(function() {

var $el = $('main');

var x = Math.random() * $el.outerWidth();

var y = Math.random() * $el.outerHeight();

var dropRadius = 20;

var strength = 0.04 + Math.random() * 0.04;

$el.ripples('drop', x, y, dropRadius, strength);

}, 400);

});

</script>

این قطعه کد را نیز می توانید برای استفاده از صفحات زیاد، وارد یک فایل خارجی با پسوند js. کرده و آدرس آن را در پایان <body> و پس از دو کتابخانه بالا قرار دهید. حال با تغییر مقادیر موجود در پارامترهای resolution ،dropRadius و perturbance حالت دلخواه خود را از افکت موج آب به دست آورید.

برای دانلود فایل نحوه ایجاد افکت موج آب، روی لینک زیر کلیک کنید.

دانلود فایل

به صفحه تلگرام کلیک اول بپیوندید.

به صفحه اینستاگرام کلیک اول بپیوندید.

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

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