ساخت افکت های جذاب برای سایت (آموزش کامل 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; }
ارسال نظر