Fly In Text Animation || HTML, CSS, jQuery #1
jQuery Kütüphanesi linki:
https://code.jquery.com/jquery-3.2.1.min.js
HTML Sayfası İçeriği:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="fly-in-text hidden">
<li>M</li>
<li>E</li>
<li>R</li>
<li>H</li>
<li>A</li>
<li>B</li>
<li>A</li>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$('.fly-in-text').removeClass('hidden');
}, 500);
})();
</script>
</body>
</html>
CSS Sayfası İçeriği:
* {
margin: 0;
padding: 0;
}
body{
background-color: darkgreen;
}
.fly-in-text{
list-style: none;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.fly-in-text li{
display: inline-block;
margin-right: 50px;
font-family: Open Sans, Arial;
font-size: 4em;
color: white;
opacity: 1;
transition: all 2.5s ease;
}
.fly-in-text li:last-child{
margin-right: 0;
}
.fly-in-text.hidden li{
opacity: 0;
}
.fly-in-text.hidden li:nth-child(1) {transform: translateX(-200px)translateY(-200px);}
.fly-in-text.hidden li:nth-child(2) {transform: translateX(20px)translateY(100px);}
.fly-in-text.hidden li:nth-child(3) {transform: translateX(-150px)translateY(-80px);}
.fly-in-text.hidden li:nth-child(4) {transform: translateX(10px)translateY(-200px);}
.fly-in-text.hidden li:nth-child(5) {transform: translateX(-300px)translateY(200px);}
.fly-in-text.hidden li:nth-child(6) {transform: translateX(20px)translateY(-20px);}
.fly-in-text.hidden li:nth-child(7) {transform: translateX(30px)translateY(200px);}
Yorumlar
Yorum Gönder