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

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

 

مقالات مرتبط

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

اشتباهات رایج طراحی سایت اشتباهات رایج طراحی سایت طراحی سایت اختصاصی

پدیده تجارت

10 دی 1398

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

پدیده تجارت

14 بهمن 1398

کلمات کلیدی متا ونقش آن در سئو کلمات کلیدی متا ونقش آن در سئو مقالات سئو

پدیده تجارت

21 فروردین 1401

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

پدیده تجارت

17 آبان 1395

آموزش سینما 4d دراصفهان آموزش سینما 4d دراصفهان مقالات

پدیده تجارت

12 تیر 1399

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

پدیده تجارت

18 دی 1396

SEO  کلاه سیاه چیست تکنیک و روش جلوگیری از آن SEO کلاه سیاه چیست تکنیک و روش جلوگیری از آن مقالات سئو

پدیده تجارت

14 فروردین 1401

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

پدیده تجارت

16 مرداد 1398

سئو وردپرس چیست؟ سئو وردپرس چیست؟ مقالات سئو

پدیده تجارت

17 فروردین 1401

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

پدیده تجارت

10 شهریور 1393

اهمیت کلمات کلیدی در سئو اهمیت کلمات کلیدی در سئو مقالات سئو

پدیده تجارت

20 فروردین 1401

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

0

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