Sitemdeki butonların sağdan sola kaymasını istiyorum! YARDIM +R10

04-01-2024, 16:39:08

Arkadaşlar web sitemin ana sayfasında İNDİRİM bölümü var bu bölümde eklediğim ürünlerin butonları çıkıyor bu butonlar olduğu yerde duruyor. Bunları sağdan sola doğru kaymasını istiyorum. O bölümün kodlarını bırakıyorum. Yardımcı olursanız çok sevinirim.

<script>
    try {
        var gosterimDurumu = <?=$sites["duygostergizle"]; ?>;
        var duyuruDiv = document.getElementById("duyuruDiv");

        if (gosterimDurumu === 0) {
            duyuruDiv.classList.add("duygizle");
        } else {
            duyuruDiv.classList.remove("duygizle");
        }
    } catch (error) {
        console.error(error);
    }
</script>
<img src="resim/duyuru.gif" width="50px" height="50px"> &nbsp; <strong>İNDİRİM: &nbsp;</strong>
<br>
<?php 
$duyurular = $vt->query("select * from duyurular Order By id DESC")->fetchAll(PDO::FETCH_ASSOC); 

foreach ($duyurular as $duyuru) {
    $duyuruFonks = 'fireSweetdetayduy' . $duyuru['id'];
?>

<button style="font-size:12px;" onclick="<?php echo $duyuruFonks; ?>()" class="btn btn-info btn-sm">
        <?php echo $duyuru["duybaslik"]; ?>
</button>

04-01-2024, 16:42:29

#2

Ribbon

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sağdan Sola Kayan Buton</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="kayan-buton">
<button>Kayan Buton</button>
</div>

</body>
</html>

Css:

body {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
overflow: hidden;
}

.kayan-buton {
overflow: hidden;
position: relative;
}

.kayan-buton button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
position: absolute;
right: -150px; /* Başlangıçta sağ dışarıda */
animation: kaydir 5s linear infinite;
}

@keyframes kaydir {
0% {
right: -150px; /* Başlangıç konumu */
}
100% {
right: calc(100% - 150px); /* Sola kaydırılan konum */
}
}

04-01-2024, 16:46:37

#3

murattunc

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sağdan Sola Kayan Buton</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="kayan-buton">
<button>Kayan Buton</button>
</div>

</body>
</html>

Css:

body {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
overflow: hidden;
}

.kayan-buton {
overflow: hidden;
position: relative;
}

.kayan-buton button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
position: absolute;
right: -150px; /* Başlangıçta sağ dışarıda */
animation: kaydir 5s linear infinite;
}

@keyframes kaydir {
0% {
right: -150px; /* Başlangıç konumu */
}
100% {
right: calc(100% - 150px); /* Sola kaydırılan konum */
}
}

Hocam alttakini css dosyasına, üstekini yukarıda verdiğim kodların neresine eklemeliyim?

04-01-2024, 16:49:48

#4

Ribbon

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

Hocam alttakini css dosyasına, üstekini yukarıda verdiğim kodların neresine eklemeliyim?

Şuan hali hazırda buton mevcutmu sayfanda?. Eğer var ise o kod ile değiştirebilirsin sayfanı göremeden ve butonu nereye koyacağını göremediğimden nokta atışı yardımcı olamıyorum

04-01-2024, 17:06:32

#5

murattunc

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

Şuan hali hazırda buton mevcutmu sayfanda?. Eğer var ise o kod ile değiştirebilirsin sayfanı göremeden ve butonu nereye koyacağını göremediğimden nokta atışı yardımcı olamıyorum

evet hocam suan buton var

04-01-2024, 17:15:43

#6

Ribbon

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

evet hocam suan buton var

Oldumu yani hocam anlamadım

04-01-2024, 18:11:12

#7

murattunc

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

Oldumu yani hocam anlamadım

Yok hocam olmadı yolladığın kodu, o bölümün kodları üzerine ekledim olmadı

04-01-2024, 22:49:54

#8

Sinyor_Ridak

Kimlik doğrulama veya yönetimden onay bekliyor.

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

Arkadaşlar web sitemin ana sayfasında İNDİRİM bölümü var bu bölümde eklediğim ürünlerin butonları çıkıyor bu butonlar olduğu yerde duruyor. Bunları sağdan sola doğru kaymasını istiyorum. O bölümün kodlarını bırakıyorum. Yardımcı olursanız çok sevinirim.

<script>
    try {
        var gosterimDurumu = <?=$sites["duygostergizle"]; ?>;
        var duyuruDiv = document.getElementById("duyuruDiv");

        if (gosterimDurumu === 0) {
            duyuruDiv.classList.add("duygizle");
        } else {
            duyuruDiv.classList.remove("duygizle");
        }
    } catch (error) {
        console.error(error);
    }
</script>
<img src="resim/duyuru.gif" width="50px" height="50px"> &nbsp; <strong>İNDİRİM: &nbsp;</strong>
<br>
<?php
$duyurular = $vt->query("select * from duyurular Order By id DESC")->fetchAll(PDO::FETCH_ASSOC);

foreach ($duyurular as $duyuru) {
    $duyuruFonks = 'fireSweetdetayduy' . $duyuru['id'];
?>

<button style="font-size:12px;" onclick="<?php echo $duyuruFonks; ?>()" class="btn btn-info btn-sm">
        <?php echo $duyuru["duybaslik"]; ?>
</button>

Selamlar.

<style>
  .duyuru {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: marquee 10s infinite linear;
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

<div class="duyuru">
  <img src="resim/duyuru.gif" width="50px" height="50px"> &nbsp; <strong>İNDİRİM: &nbsp;</strong>
  <br>
  <?php
  $duyurular = $vt->query("select * from duyurular Order By id DESC")->fetchAll(PDO::FETCH_ASSOC);

  foreach ($duyurular as $duyuru) {
    $duyuruFonks = 'fireSweetdetayduy' . $duyuru['id'];
  ?>

    <button style="font-size:12px;" onclick="<?php echo $duyuruFonks; ?>()" class="btn btn-info btn-sm">
      <?php echo $duyuru["duybaslik"]; ?>
    </button>

  <?php } ?>
</div>

Bu şekilde dener misiniz?

Teşekkürler.

05-01-2024, 00:09:17

#9

murattunc

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

Selamlar.

<style>
  .duyuru {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: marquee 10s infinite linear;
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

<div class="duyuru">
  <img src="resim/duyuru.gif" width="50px" height="50px"> &nbsp; <strong>İNDİRİM: &nbsp;</strong>
  <br>
  <?php
  $duyurular = $vt->query("select * from duyurular Order By id DESC")->fetchAll(PDO::FETCH_ASSOC);

  foreach ($duyurular as $duyuru) {
    $duyuruFonks = 'fireSweetdetayduy' . $duyuru['id'];
  ?>

    <button style="font-size:12px;" onclick="<?php echo $duyuruFonks; ?>()" class="btn btn-info btn-sm">
      <?php echo $duyuru["duybaslik"]; ?>
    </button>

  <?php } ?>
</div>

Bu şekilde dener misiniz?

Teşekkürler.

Hocam bu kodları yukarıda benim verdiğim kodların üstüne ekledim. olmadı