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