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

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

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

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

 

مقالات مرتبط

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

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

پدیده تجارت

18 خرداد 1396

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

پدیده تجارت

19 اسفند 1396

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

پدیده تجارت

24 اسفند 1400

Google Blocklist چیست؟ و چگونه از آن خارج شویم؟ Google Blocklist چیست؟ و چگونه از آن خارج شویم؟ مقالات طراحی وب سایت

پدیده تجارت

16 فروردین 1401

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

پدیده تجارت

09 تیر 1397

راه اندازی پکیج توسعه و بهینه سازی وب سایت راه اندازی پکیج توسعه و بهینه سازی وب سایت مقالات سئو

پدیده تجارت

31 مرداد 1395

REST API چیست ؟ REST API چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

24 دی 1398

تاثیر سئو بر افزایش فروش تاثیر سئو بر افزایش فروش مقالات تجارت الکترونیک

پدیده تجارت

19 فروردین 1397

ساخت اپلیکیشن پیک موتوری و نکات مهم آن ساخت اپلیکیشن پیک موتوری و نکات مهم آن مقالات

پدیده تجارت

12 تیر 1397

خصوصیات طراحی یک بازی حرفه ای اندروید خصوصیات طراحی یک بازی حرفه ای اندروید مقالات موبایل

پدیده تجارت

01 بهمن 1396

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

0

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