ورود با اکانت گوگل
یا
آقای متریال

برای جستجو کلمه مورد نظر خود را وارد کنید

آموزش ریپل افکت برای وب

alisaffari


اطلاعات نویسنده
alisaffari

alisaffari

  • Exclusive Author
  • sold_between_10_000_and_50_000_dollars
  • bought_between_1_and_9_items
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

شاید قبلا با ریپل افکت اشنا باشید و یا شاید در بعضی از قسمت های سایت ما دیده باشید که از این افکت استفاده کردیم

خیلی از دوستان از ما خواستند آموزش این افکت شیک و خاص رو براتون قرار بدم

در وب به waves effect , ripple effect هم میگن البته توی وب waves رسمی تره

نمونه افکت که در عکس های زیر مشاهده میکنید

 

waves

up15631457030953_Untitled-1

 

نمونه انلاین افکت ” تست کنید”

See the Pen ریپلی افکت by علی صفاری (@alisaffari) on CodePen.21951

اگه بخاید خودتون از پایه این افکت رو درست کنید واقعا دردسر سازه و کار هرکسی نیست

ما برای شما فایل و کد های مورد نیاز رو تهیه کردیم تا بدون دردسر بتونید ازش استفاده کنید و ما در این مطلب یاد میدیم که چطور این افکت رو استفاده کنید نه بسازید !! توضیح دادم

مرحله اول

در مرحله اول باید فایل js و css رو در قالب خودتون ایمپورت کنید. برای این کار کد های زیر رو در ابتدای کد های قالب قرار بدید

 

<!-- فایل جی کوئری -->
<script type="text/javascript" src="http://dl.mrmaterial.ir/uploads/alisaffari/jquery-2-1-4.js" ></script>

<!-- فایل جاوا اسکریپت افکت -->
<script type="text/javascript" src="http://dl.mrmaterial.ir/uploads/alisaffari/waves.js" ></script>

<!-- فایل سی اس اس افکت -->
<link rel="stylesheet" type="text/css" href="http://dl.mrmaterial.ir/uploads/alisaffari/waves.css">

 

مرحله دو

برای فعال کردن افکت رو المان باید کلاس waves-effect را به المان دلخواه اضافه کنیم که در مثال زیر برای div , a و دکمه این کارو انجام دادیم

 

<div class="waves-effect"></div>

<a class="waves-effect"></a>

<button class="waves-effect"></button>

بعضی اوقات از قبل المان یه کلاس داره و برای اضافه کردن کلاس مربوط به افکت بعد از اسم کلاس قبلی یه فاصله ایجاد میکنیم و کلاس مربوظه خودمون رو قرار میدیم

<div class="waves-effect btn"></div>

 

مرحله سه

 

تا اینجا ما فایل افکت رو اضافه کردیم و افکت رو فعال کردیم ولی اگه دقت کرده باشید رنگ خاکستری هست و شاید لازم باشه جایی از یه رنگ خاص استفاده کنیم .

برای این کار برای هر رنگ یه کلاس قرار دادیم که میتونید با اظافه کردن اون کد رنگ رو تغیر بدید . به همین سادگی 🙄

 

<!-- سفید -->
waves-light


<!-- قرمز -->
waves-red


<!-- زرد -->
waves-yellow


<!-- نارنجی -->
waves-orange


<!-- بنفش -->
waves-purple


<!-- سبز -->
waves-green


<!-- فیروزه ای -->
waves-teal

 

مثال :

مثلا ما برای div مورد نظر افکت با رنگ سبز در نظر گرفتیم

<div class="waves-effect waves-green"></div>

 

و این هم یک مثال کامل

See the Pen ریپلی افکت by علی صفاری (@alisaffari) on CodePen.21951

 

 

ممنون که با ما همراه بودید (خوشحال میشیم نظر بدید ۸-) )

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: محمد اردیبهشت ۲۳, ۱۳۹۵

    ممنون خیلی بدرد من خورد
    قالب جدید هم عالیه

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری اردیبهشت ۲۳, ۱۳۹۵

      نظر لطفتونه

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: سروش تیر ۱۴, ۱۳۹۵

    بدردبخور بود ممنونم:)

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp