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

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

 

مقالات مرتبط

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

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

پدیده تجارت

10 دی 1398

 مقایسه بین React.JS و Vue.JS  مقایسه بین React.JS و Vue.JS مقالات طراحی وب سایت

پدیده تجارت

23 اسفند 1400

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

پدیده تجارت

12 خرداد 1397

5 اشتباه رایج در بازاریابی محتوا 5 اشتباه رایج در بازاریابی محتوا مقالات برندینگ

پدیده تجارت

25 خرداد 1398

دلایل راه اندازی و معرفی شغل خود در دنیای مجازی دلایل راه اندازی و معرفی شغل خود در دنیای مجازی مقالات برندینگ

پدیده تجارت

20 تیر 1396

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

پدیده تجارت

12 اسفند 1398

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

پدیده تجارت

07 مهر 1398

3 نکته در مورد شرکت های طراحی سایت در اصفهان که باید بدانید! 3 نکته در مورد شرکت های طراحی سایت در اصفهان که باید بدانید! مقالات طراحی وب سایت

پدیده تجارت

04 تیر 1397

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

پدیده تجارت

30 خرداد 1398

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

پدیده تجارت

17 فروردین 1399

باشگاه مشتریان چیست؟ باشگاه مشتریان چیست؟ مقالات طراحی وب سایت

پدیده تجارت

20 فروردین 1393

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

0

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