صفحات وب سایت خود را متحرک کنید

22 امتیاز

Loading…

بسم الله الرحمن الرحیم.

قبل تر ها در استفاده از تکنولوژی های به روز در حوزه وب شاید حساسیت خاصی وجود داشت،از دردسرهای مرورگر IE گرفته تا عدم پیشتیبانی همسان مرورگرها،آن هم به این دلیل که طراحی ما به اصطلاح Cross Browser بود و در تمام مرورگرها یک چهره داشته باشد.این روز ها اما کماکان این حساسیت و دغدغه وجود دارد اما نه به اندازه قبل.از طرفی برای زیبایی کار گاها شاید حیف باشد که حلال خدا را حرام کنیم!

یکی از این به روزرسانی ها مربوط به دستورات انیمیشنی در CSS می باشد که به کاربر اجازه اجرا و متحرک سازی های زیبایی را می دهد.

از آنجایی که پرچم کدبازها همیشه بالاست ، هستند و بودند افرادی که برای این امکان CSS کتابخانه هایی نوشته باشند ، من جمله کتابخانه معروف aniamte.css که امروز برای برنامه نویسان front-end نام آشنایی ست.

اینکه انیمیشن ها در کدام مرورگرها جوابگو هستند می توانید نگاهی به این : مطلبی درمورد انیمیشن در CSS بیاندازید.

متحرک سازی با استفاده از animate.css

کار بسیار ساده است ، ابتدا کتابخانه را به کدخودتان پیوست کنید:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

سپس از این لینک انیمیشن مورد نظرتون رو مشاهده کنید و اسمش رو به خاطر بسپارین:

مشاهده نمونه انیمیشن های این کتابخانه

و حالا به کدتون کلاس بدین:

<div class="animated bounce">یک متن متحرک</div>

کلاس  animated به این معناست که این المنت برای متحرک سازی آماده است و فقط باید افکت مورد نظر به عنوان کلاس قید شود ، که در اینجا افکت bounce تنظیم شده است.

لیست تمام افکت ها را می توانید در لینکهای مذکور بیابید.

متحرک سازی به هنگام رسیدن به یک المنت خاص

اگر متوجه شده باشید به محض لود سایت تمامی المنتهایی که کلاس های انیمیشنی را به همراه افکتشان داشته باشند اجرا می شوند.اما چگونه می توان اجرای انیمیشن را به محض این که کاربر به آن المنت رسید اجرا کنیم؟ کافیست کلاس افکت را در همان هنگام به المنت بدهیم.پس با این کار افکت ما در موقعی که المنت در معرض دید کاربر قرار گرفته باشد نمایش داده می شود.

گره این مرحله از کاربه دست JavaScript باز می گردد.جاوااسکریپت برای این مساله کتابخانه ها و کدهایی دارد که معروفترین آنها در این زمینه هم اکنون کتابخانه Waypoints می باشد که علاوه بر کد مستقل دارای پلاگین جی کوئری نیز می باشد.خب دست به کار می شویم.

فایل انیمیشنی CSS را که از قبل پیوست کرده ایم ، حال  این پلاگین را به همراه جی کوئری به صفحه پیوست می کنیم:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="waypoints.min.js"></script>

خب اکنون فرض می کنیم این کد HTML ماست که منتظر است کمی تکان بخورد:

<div class="animated elem">یک متن متحرک</div>

خب اکنون با کد جاوااسکریپت زیر به مرورگر می گوییم وقتی به این کد رسیدی  کلاس مد نظر ما که افکت ها را اعمال می کند به آن اضافه کن:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.elem').waypoint(function() {
            $(this).addClass('bounce');
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

کد بالا کلاس ها را وقتی کاربر از بالا به پایین در حال اسکرول است اعمال می کند ، برای حالت عکس به این صورت می توانید اقدام کنید:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.elem').waypoint(function() {
            $(this).addClass('bounce');
    });

});
</script>

اکنون می توایند صفحه را اسکرول کرده و متوجه تغییرات شوید.

متحرک سازی با خودکارسازی اعمال کلاس های انیمیشنی

مثال های بالا برای یک المنت بود ، فرض کنید مقدار زیادی المنت در صفحه وجود دارد که قرار است متحرک شوند و تکرار تک تک کدها برای تمام المنتها کاری غیرحرفه ایست،لذا راهکار بهتری در این بخش ارائه خواهیم داد.

ابتدا فایل animate.css / jquery.js / waypoints.js را به صفحه پیوست کنید.

حالا این کد جاوااسکریت را هم به صفحه خودتان اضافه کنید:

<script type="text/javascript">
jQuery(document).ready(function($) {

    $('.animated').waypoint(function() {
            $(this).addClass($(this).data('animated'));
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

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

<div class="animated" data-animated="bounce">یک متن متحرک</div>
<div class="animated" data-animated="zoomInRight">یک متن متحرک دیگر</div>

یعنی کافیست کلاس animated را به المنت های دلخواه داده و بعد data-animated آن المنت را بر روی افکت مدنظر خود تنظیم کنید.آن کد جاوااسکریپت به محض رسیدن به این المنت کلاس را از این قسمت خوانده و به المنت اضافه می کند که منجر به متحرک شدن آن در همان لحظه می گردد.

نمونه کد کامل انیمیشن به هنگام مشاهده صفحه

برای مشاهده دمو کلیک کنید.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Animate Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
    <style type="text/css">
    div.wrapper {
        width: 50%;
        margin: auto;
        text-align: center;
        direction: rtl;
        font-family: byekan, "b yekan", Vazir, tahoma;
        font-size: 3em;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <p class="animated" data-animated="bounce">یک متن متحرک / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p class="animated" data-animated="zoomInRight">یک متن متحرک دیگر / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p class="animated" data-animated="flip">یک متن متحرک دیگر / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

    </div>
</body>
<script type="text/javascript">
jQuery(document).ready(function($) {

    $('.animated').waypoint(function() {
        $(this).toggleClass($(this).data('animated'));
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

</html>