javascript animasyon yaptırılacak

21-01-2024, 17:30:58

merhabalar,

javascript ile db den veri aktaracağım ama front tarafına ihtiyacım var.

bir kapalı bir sandık olacak, sandığı aç butonuna tıklanıldığında sandık açılıyor güzel ve animasyonlu bir şekilde, hediye 100 altın kazandınız tarzı bir metin yazacak ekranda. hazır şeyler aradım bulamadım, güzel görünümlü ve mobil uyumlu bir şey olması gerekiyor.

21-01-2024, 17:32:06

#2

Cankurtaran

Whatsapp üzerinden iletişime geçebilirsiniz hocam

21-01-2024, 18:17:31

#3

volkanyyilmaz

Whatsapp üzerinden iletişime geçebilirsiniz

25-01-2024, 06:49:22

#4

zeyrek34

Kimlik doğrulama veya yönetimden onay bekliyor.

Gain adlı üyeden alıntı: mesajı görüntüle

merhabalar,

javascript ile db den veri aktaracağım ama front tarafına ihtiyacım var.

bir kapalı bir sandık olacak, sandığı aç butonuna tıklanıldığında sandık açılıyor güzel ve animasyonlu bir şekilde, hediye 100 altın kazandınız tarzı bir metin yazacak ekranda. hazır şeyler aradım bulamadım, güzel görünümlü ve mobil uyumlu bir şey olması gerekiyor.

yardımcı olabiliriz.

25-01-2024, 10:03:12

#5

Pos3idon

hocam basit bir örnek yaptım senin için bunu geliştirebilirsin kendine göre

<html>
<head>
    <title>Sandık Açma Oyunu</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="chest-container">
        <div id="chest" class="closed"></div>
        <button id="open-button">Sandığı Aç</button>
        <div id="message"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

#chest-container {
    text-align: center;
    padding-top: 50px;
}

#chest {
    width: 100px;
    height: 100px;
    background: url('closed-chest.png');
    margin: 0 auto;
    transition: transform 0.3s;
}

#chest.open {
    background: url('open-chest.png');
    transform: scale(1.1);
}

#open-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
}

#message {
    margin-top: 20px;
    font-size: 24px;
    color: gold;
    display: none;
}

document.getElementById('open-button').addEventListener('click', function() {
    var chest = document.getElementById('chest');
    var message = document.getElementById('message');

    chest.classList.add('open');
    message.style.display = 'block'; 
    message.innerHTML = '100 Altın Kazandınız!';
});