merhaba kendim için geliştirdigim animasoylnu satın al butonun sizinlede paylaşmak istedim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerçekçi Satın Al Butonu Animasyonu</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"> <!-- Font ekleme -->
<style>
body {
background-color: #f4f4f4; /* Arka plan rengi */
font-family: 'Roboto', sans-serif; /* Font ayarı */
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
#buyButton {
position: relative;
padding: 12px 25px;
font-size: 20px; /* Yazı boyutu */
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 70px;
background: linear-gradient(135deg, #4CAF50, #3B8C29); /* Göz alıcı bir arka plan */
color: #fff;
border: none;
border-radius: 30px; /* Yuvarlak köşeler */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Gölgelendirme */
transition: transform 0.2s ease, background-color 0.3s; /* Arka plan rengi değişimi için geçiş eklendi */
}
#buyButton:hover {
transform: translateY(-2px); /* Hover efekti */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Hover sırasında daha belirgin gölge */
background-color: #3e8724; /* Hover sırasında arka plan rengi değişimi */
}
.icon-group {
display: flex;
align-items: center;
gap: 5px; /* Satın Al ve sepet ikonunu yakınlaştırır */
}
.icon {
font-size: 24px; /* Alışveriş sepeti ikonunun boyutu */
}
.truck {
position: absolute;
font-size: 36px; /* Kamyonun boyutu */
right: -60px; /* Kamyon butonun sağ dışından başlar */
transform: scaleX(-1); /* Kamyon sola bakacak */
transition: transform 0.5s ease, opacity 0.5s;
}
.truck.moveToCart {
animation: moveToCart 1s forwards;
}
.icon-group .icon.loadToTruck {
animation: loadToTruck 0.5s forwards;
}
.truck.driveAway {
animation: driveAway 2s forwards; /* Uzaklaşma süresi */
}
@keyframes moveToCart {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100px); /* Sepet ikonunun hemen önünde durur */
}
}
@keyframes loadToTruck {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(20px) scale(0.3); /* Kamyona yüklendiğinde küçülür */
opacity: 0;
}
}
@keyframes driveAway {
0% {
transform: translateX(-100px); /* Kamyon sepetle yan yana */
}
100% {
transform: translateX(-350px); /* Uzaklaşma mesafesi arttırıldı */
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<button id="buyButton">
<span class="icon-group">
Satın Al
<span id="cartIcon" class="icon">🛒</span> <!-- Alışveriş sepeti ikonu -->
</span>
<span id="truck" class="truck">🚚</span> <!-- Kargo aracı -->
</button>
</div>
<script>
const buyButton = document.getElementById("buyButton");
const truck = document.getElementById("truck");
const cartIcon = document.getElementById("cartIcon");
buyButton.addEventListener("click", () => {
// Kamyon sepet ikonuna doğru hareket eder
truck.classList.add("moveToCart");
// Kamyon durunca sepet kamyona yüklenir
setTimeout(() => {
cartIcon.classList.add("loadToTruck");
}, 1000);
// Kamyon sola doğru hareket edip ekran dışına çıkar
setTimeout(() => {
truck.classList.add("driveAway");
}, 1500);
// Butonun içeriği "Satın Alındı" olacak şekilde ayarlandı
setTimeout(() => {
buyButton.innerHTML = "Satın Alındı"; // Butonun içeriği değişir
}, 3500); // İçeriğin değiştirilme süresi uzatıldı
});
</script>
</body>
</html> 
