ساخت افکت های جذاب برای سایت (آموزش کامل animate.css)

ساخت افکت های جذاب برای سایت (آموزش کامل animate.css)

افکت جذاب برای سایت – با کمک کتابخانه animate.css این امکان را خواهیم داشت

که کلی افکت برای زیبا تر شدن وب سایت مورد نظر مان داشته باشیم .

در پایین می توانید ویدیوی دموی این آموزش را مشاهده کنید .

ویدیوی دموی افکت ها


ساختار html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/animate.min.css">
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        
        <h1 id="rapidcode" class="">رپید کد</h1>

        <div class="wrapper animate-list">
            <button class="button" data-class="animate__bounce">bounce</button>
            <button class="button" data-class="animate__flash">flash</button>
            <button class="button" data-class="animate__pulse">pulse</button>
            <button class="button" data-class="animate__rubberBand">rubberBand</button>
            <button class="button" data-class="animate__shakeX">shakeX</button>
            <button class="button" data-class="animate__shakeY">shakeY</button>
            <button class="button" data-class="animate__headShake">headShake</button>
            <button class="button" data-class="animate__swing">swing</button>
            <button class="button" data-class="animate__tada">tada</button>
            <button class="button" data-class="animate__wobble">wobble</button>
            <button class="button" data-class="animate__jello">jello</button>
            <button class="button" data-class="animate__heartBeat">heartBeat</button>

            <br><br>

            <button class="button" data-class="animate__backInDown">backInDown</button>
            <button class="button" data-class="animate__backInLeft">backInLeft</button>
            <button class="button" data-class="animate__backInRight">backInRight</button>
            <button class="button" data-class="animate__backInUp">backInUp</button>

            <br><br>

            <button class="button" data-class="animate__backOutDown">backOutDown</button>
            <button class="button" data-class="animate__backOutLeft">backOutLeft</button>
            <button class="button" data-class="animate__backOutRight">backOutRight</button>
            <button class="button" data-class="animate__backOutUp">backOutUp</button>

            <br><br>

            <button class="button" data-class="animate__bounceIn">bounceIn</button>
            <button class="button" data-class="animate__bounceInDown">bounceInDown</button>
            <button class="button" data-class="animate__bounceInLeft">bounceInLeft</button>
            <button class="button" data-class="animate__bounceInRight">bounceInRight</button>
            <button class="button" data-class="animate__bounceInUp">bounceInUp</button>
            
            <br><br>

            <button class="button" data-class="animate__bounceOut">bounceOut</button>
            <button class="button" data-class="animate__bounceOutDown">bounceOutDown</button>
            <button class="button" data-class="animate__bounceOutLeft">bounceOutLeft</button>
            <button class="button" data-class="animate__bounceOutRight">bounceOutRight</button>
            <button class="button" data-class="animate__bounceOutUp">bounceOutUp</button>

            <br><br>

            <button class="button" data-class="animate__fadeIn">fadeIn</button>
            <button class="button" data-class="animate__fadeInDown">fadeInDown</button>
            <button class="button" data-class="animate__fadeInDownBig">fadeInDownBig</button>
            <button class="button" data-class="animate__fadeInLeft">fadeInLeft</button>
            <button class="button" data-class="animate__fadeInLeftBig">fadeInLeftBig</button>
            <button class="button" data-class="animate__fadeInRight">fadeInRight</button>
            <button class="button" data-class="animate__fadeInRightBig">fadeInRightBig</button>
            <button class="button" data-class="animate__fadeInUp">fadeInUp</button>
            <button class="button" data-class="animate__fadeInUpBig">fadeInUpBig</button>
            <button class="button" data-class="animate__fadeInTopLeft">fadeInTopLeft</button>
            <button class="button" data-class="animate__fadeInTopRight">fadeInTopRight</button>
            <button class="button" data-class="animate__fadeInBottomLeft">fadeInBottomLeft</button>
            <button class="button" data-class="animate__fadeInBottomRight">fadeInBottomRight</button>

            <br><br>

            <button class="button" data-class="animate__fadeOut">fadeOut</button>
            <button class="button" data-class="animate__fadeOutDown">fadeOutDown</button>
            <button class="button" data-class="animate__fadeOutDownBig">fadeOutDownBig</button>
            <button class="button" data-class="animate__fadeOutLeft">fadeOutLeft</button>
            <button class="button" data-class="animate__fadeOutLeftBig">fadeOutLeftBig</button>
            <button class="button" data-class="animate__fadeOutRight">fadeOutRight</button>
            <button class="button" data-class="animate__fadeOutRightBig">fadeOutRightBig</button>
            <button class="button" data-class="animate__fadeOutUp">fadeOutUp</button>
            <button class="button" data-class="animate__fadeOutUpBig">fadeOutUpBig</button>
            <button class="button" data-class="animate__fadeOutTopLeft">fadeOutTopLeft</button>
            <button class="button" data-class="animate__fadeOutTopRight">fadeOutTopRight</button>
            <button class="button" data-class="animate__fadeOutBottomRight">fadeOutBottomRight</button>
            <button class="button" data-class="animate__fadeOutBottomLeft">fadeOutBottomLeft</button>
            
            <br><br>

            <button class="button" data-class="animate__flip">flip</button>
            <button class="button" data-class="animate__flipInX">flipInX</button>
            <button class="button" data-class="animate__flipInY">flipInY</button>
            <button class="button" data-class="animate__flipOutX">flipOutX</button>
            <button class="button" data-class="animate__flipOutY">flipOutY</button>

            <br><br>

            <button class="button" data-class="animate__lightSpeedInRight">lightSpeedInRight</button>
            <button class="button" data-class="animate__lightSpeedInLeft">lightSpeedInLeft</button>
            <button class="button" data-class="animate__lightSpeedOutRight">lightSpeedOutRight</button>
            <button class="button" data-class="animate__lightSpeedOutLeft">lightSpeedOutLeft</button>

            <br><br>

            <button class="button" data-class="animate__rotateIn">rotateIn</button>
            <button class="button" data-class="animate__rotateInDownLeft">rotateInDownLeft</button>
            <button class="button" data-class="animate__rotateInDownRight">rotateInDownRight</button>
            <button class="button" data-class="animate__rotateInUpLeft">rotateInUpLeft</button>
            <button class="button" data-class="animate__rotateInUpRight">rotateInUpRight</button>

            <br><br>

            <button class="button" data-class="animate__rotateOut">rotateOut</button>
            <button class="button" data-class="animate__rotateOutDownLeft">rotateOutDownLeft</button>
            <button class="button" data-class="animate__rotateOutDownRight">rotateOutDownRight</button>
            <button class="button" data-class="animate__rotateOutUpLeft">rotateOutUpLeft</button>
            <button class="button" data-class="animate__rotateOutUpRight">rotateOutUpRight</button>

            <br><br>

            <button class="button" data-class="animate__hinge">hinge</button>
            <button class="button" data-class="animate__jackInTheBox">jackInTheBox</button>
            <button class="button" data-class="animate__rollIn">rollIn</button>
            <button class="button" data-class="animate__rollOut">rollOut</button>

            <br><br>

            <button class="button" data-class="animate__zoomIn">zoomIn</button>
            <button class="button" data-class="animate__zoomInDown">zoomInDown</button>
            <button class="button" data-class="animate__zoomInLeft">zoomInLeft</button>
            <button class="button" data-class="animate__zoomInRight">zoomInRight</button>
            <button class="button" data-class="animate__zoomInUp">zoomInUp</button>

            <br><br>

            <button class="button" data-class="animate__zoomOut">zoomOut</button>
            <button class="button" data-class="animate__zoomOutDown">zoomOutDown</button>
            <button class="button" data-class="animate__zoomOutLeft">zoomOutLeft</button>
            <button class="button" data-class="animate__zoomOutRight">zoomOutRight</button>
            <button class="button" data-class="animate__zoomOutUp">zoomOutUp</button>

            <br><br>

            <button class="button" data-class="animate__slideInDown">slideInDown</button>
            <button class="button" data-class="animate__slideInLeft">slideInLeft</button>
            <button class="button" data-class="animate__slideInRight">slideInRight</button>
            <button class="button" data-class="animate__slideInUp">slideInUp</button>

            <br><br>

            <button class="button" data-class="animate__slideOutDown">slideOutDown</button>
            <button class="button" data-class="animate__slideOutLeft">slideOutLeft</button>
            <button class="button" data-class="animate__slideOutRight">slideOutRight</button>
            <button class="button" data-class="animate__slideOutUp">slideOutUp</button>

        </div>
       
    </div>


    <script src="static/js/app.js"></script>
</body>
</html>


اسکریپت app.js

window.addEventListener("load" , function(){

    function animateIt(cssClass){
        const prefixClass = "animate__animated";
        rapidcode.setAttribute("class" , `${prefixClass} ${cssClass}`);
    }


    function animateHandler(){
        const thisElement = this;

        animateIt(this.getAttribute("data-class"));
    }

    const rapidcode = document.getElementById("rapidcode");
    const btnAnimateAction = document.querySelectorAll(".animate-list .button");

    btnAnimateAction.forEach(function(element){
        element.addEventListener("click" , animateHandler);
    });


});


استایل main.css

.wrapper{
    width: 80%;
    margin: auto 10%;
}

.button{
    background-color: rgb(2, 132, 245);
    color: white;
    font-size: large;
}

.button:active{
    background-color: red;
}

#rapidcode{
    color: green;
    text-align: center;
}


دانلود سورس افکت جذاب برای سایت

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us