یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36628509

نحوه گذاشتن انیمیشن در صفحات وب

انتشار 01 مرداد 1397
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

تا به  حال صفحات وب سایتهایی را دیده اید که با اسکرول صفحه به سمت پایین المان های آن به صورت انیمیشنی و با افکت های مختلف لود میشود.با استفاده از css و پلاگین های jquery مختلف میتوان افکت های زیبایی را به المان های مختلف داد.

امروز در این مقاله با آموزش کتابخانه AOS (Animation On Scroll) به متحرک سازی المانها میپردازیم.

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

در ابتدا کتابخانه زیر را به کدهای خود اضافه میکنیم.

 

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

 

اسکریپت زیر را هم به پایین کدها قبل از اینکه تگ body بسته شود، اضافه میکنیم.

<script>
AOS.init({
    duration: 1200,
  })
</script>

 

 

حال باید سراغ المانی برویم که میخواهیم به حالت انیمیشنی لود شود.

از این لینک نام انیمیشنی که موردنظرتان است را انتخاب کرده و کپی کنید و این نام را به همان المان در داخل کدهای html بدهید. مانند زیر

<h3 class="item" data-aos="fade-up">fade-up</h3>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 class="item" data-aos="fade-up-left">fade-up-left</h3>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 class="item" data-aos="flip-left">flip-left</h3>
<br>
<br>

 

 

در این کد افکت fade-up و fade-up-left و flip-leftبه المان های مورد نظر داده شده است.

 

برای بهتر نشان دادن افکت ها، فایل style زیر را هم به کدها اضافه کنید.

 

<style>
  * {
  box-sizing: border-box;
}
.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
}
  </style>

 

 

برای دیدن دمو به این لینک مراجعه کنید.

 

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

پس همیشه به یاد داشته باشید که از این نوع افکت های جاوا اسکریپت، همیشه در جا و مکان مناسب خودش استفاده بکنید و این استفاده های بجا هستند که باعث لذت بخش شدن استفاده از سایت شما میشوند.

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

 

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

متد اسکرام چیست؟ متد اسکرام چیست؟ مقالات طراحی وب سایت

پدیده تجارت

22 فروردین 1395

چگونه ادمین یک پیج اینستاگرام بشویم ؟ چگونه ادمین یک پیج اینستاگرام بشویم ؟ مقالات شبکه های اجتماعی

پدیده تجارت

14 تیر 1399

مزایای طراحی اپلیکیشن موبایل برای کسب و کار مزایای طراحی اپلیکیشن موبایل برای کسب و کار مقالات تجارت الکترونیک

پدیده تجارت

20 آذر 1396

طراحی سایت بصورت فول ریسپانسیو(responsive) چیست ؟ طراحی سایت بصورت فول ریسپانسیو(responsive) چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

11 اسفند 1394

آموزش بازاریابی شبکه های اجتماعی آموزش بازاریابی شبکه های اجتماعی مقالات تجارت الکترونیک

پدیده تجارت

25 خرداد 1399

طراحی سایت از دروغ تا واقعیت! طراحی سایت از دروغ تا واقعیت! مقالات طراحی وب سایت

پدیده تجارت

09 اردیبهشت 1398

وبینار آموزش طراحی سایت اصفهان وبینار آموزش طراحی سایت اصفهان مقالات طراحی وب سایت

پدیده تجارت

30 فروردین 1399

9 روش افزایش فروش به صورت آنلاین چیست؟ 9 روش افزایش فروش به صورت آنلاین چیست؟ مقالات تجارت الکترونیک

پدیده تجارت

16 فروردین 1401

ویژگیهای جوملا ویژگیهای جوملا مقالات طراحی وب سایت

پدیده تجارت

24 شهریور 1392

برنامه نویسی جاوا در اصفهان برنامه نویسی جاوا در اصفهان مقالات

پدیده تجارت

08 بهمن 1396

ساخت ViewPager در اندروید ساخت ViewPager در اندروید مقالات موبایل

پدیده تجارت

15 دی 1397

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها