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

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

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

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

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

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

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

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

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

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

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

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

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

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

دانلود فایل

تیم تحریریه کلیک اول - پروفایل نویسنده

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

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

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

2 دیدگاه ثبت شده است.

در بحث و گفتگوی مربوط به این مطلب شرکت کنید!

آکادمی کلیک اول

دریچه ای به سوی آموزش های رایگان در فضای دیجیتال مارکتینگ

آموزش پایه ای کار با ابزار گوگل سرچ کنسول

دوره آموزشی گوگل سرچ کنسول (Google Search Console)

سئو و بهینه سازی

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

02:21:00
آموزش پایه ای کار با گوگل آنالیتیکس

دوره آموزشی گوگل آنالیتیکس 4 (Google Analytics 4)

سئو و بهینه سازی

گوگل آنالیتیکس (Google Analytics) یکی از ابزارهای پرکاربرد گوگل بوده و وظیفه آن بررسی آمار سایت ها و تحلیل آن هاست.

02:43:00
آموزش کار با افزونه پرکاربرد یواست

آموزش کار با افزونه پرکاربرد یواست (Yoast)

دیجیتال مارکتینگ

یواست سئو (Yoast SEO) یک افزونه وردپرس است که به عملکرد بهتر سایت در موتورهای جستجو مانند گوگل کمک می کند. همچنین ابزارهایی را در اختیار شما قرار می دهد تا محتوای خود را به بهترین استانداردهای سئو و خوانایی برسانید.

00:22:06