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