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

شـمـــاره تــمــاس
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 سال سابقه درخشان و نموته کارهای موفق در این زمینه، با طراحی حرفه ای گرافیک سایت و سپس تبدیل به کدزنی آن، تمام مراحل با حساسیت زیاد انجام شده تا بهترین و باکیفیت ترین سایت در اختیار مشتری قرارگیرد.

 

مقالات مرتبط

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

بازاریابی موتورهای جستجو(SEM) چیست؟ بازاریابی موتورهای جستجو(SEM) چیست؟ مقالات سئو

پدیده تجارت

03 بهمن 1396

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

پدیده تجارت

04 بهمن 1396

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

پدیده تجارت

13 آبان 1396

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

پدیده تجارت

07 آذر 1396

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

پدیده تجارت

23 فروردین 1401

طرح کسب و کار (طرح تجاری) چیست ؟ طرح کسب و کار (طرح تجاری) چیست ؟ مقالات برندینگ

پدیده تجارت

24 اسفند 1400

چگونه یک کسب کار آنلاین راه اندازی کنم؟ چگونه یک کسب کار آنلاین راه اندازی کنم؟ مقالات

پدیده تجارت

07 بهمن 1396

معرفی پیشخوان وردپرس معرفی پیشخوان وردپرس مقالات طراحی وب سایت

پدیده تجارت

12 دی 1398

تفاوت اندروید Studio با اندروید eclipse تفاوت اندروید Studio با اندروید eclipse مقالات موبایل

پدیده تجارت

03 مرداد 1394

چگونه یک محتوای خوب تولید کنیم؟ چگونه یک محتوای خوب تولید کنیم؟ مقالات تجارت الکترونیک

پدیده تجارت

24 اسفند 1400

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

0

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
پشتیبانی آنلاین است
ارسال در واتساپ