js ile animasyonlu text banner yapımı

13-02-2024, 15:18:16

<style>
.word {
color: red;
font-size: 20px;
font-family:'tahoma';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var words = ['paylaşın', 'sabitleyin', 'puan verin', 'yorum yapın', 'Üyeleri takip edin'],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 15,
speed = 75;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= words[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
}
else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= len) {
i = 0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
}
else {
offset--;
}
}
$('.word').text(part);
},speed);
};
$(document).ready(function () {
wordflick();
});
</script>
<a href="https://pirepin.com" target="_blank" style="text-decoration: none;">
<div style=" border: 1px solid; height: 60px; width: 468px; background-color: #d9ffe3;">
<div style="float: left; text-align: center; color: rgb(0, 0, 0); font-size: 20px; font-family:'tahoma'; padding: 5px;"><img src="icon.png" style="width: 30px;"><br>Pirepin.com</div>
<div style="text-align: center;">
<div style="color: rgb(0, 0, 0); font-size: 20px; font-family:'tahoma'; padding: 3px;">Site Tanıtımı, Bookmark ve Dizin Sitesi</div>
<div class="word"></div>
</div>
</div>
</a>

örnek görünüm.

animasyonu farklı yerlerde de kullanabilirsiniz.

13-02-2024, 15:26:06

Pos3idon

çok başarılı paylaşım olmuş hocam eline sağlık şöyle olsa daha güzel durudu sanki

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Tanıtımı</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js" defer></script>
</head>
<body>
    <a href="https://pirepin.com" target="_blank" style="text-decoration: none;">
        <div class="advertisement">
            <div class="logo-container">
                <img src="icon.png" alt="Pirepin.com Logo" style="width: 30px;"><br>Pirepin.com
            </div>
            <div class="text-container">
                <div>Site Tanıtımı, Bookmark ve Dizin Sitesi</div>
                <div class="word"></div>
            </div>
        </div>
    </a>
</body>
</html>

.advertisement {
    border: 1px solid;
    height: 60px;
    width: 468px;
    background-color: #d9ffe3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.logo-container, .text-container {
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-family: 'Tahoma', sans-serif;
}

.word {
    color: red;
    font-size: 20px;
    font-family: 'Tahoma', sans-serif;
}

$(document).ready(function () {
    var words = ['paylaşın', 'sabitleyin', 'puan verin', 'yorum yapın', 'Üyeleri takip edin'],
    part,
    i = 0,
    offset = 0,
    len = words.length,
    forwards = true,
    skip_count = 0,
    skip_delay = 15,
    speed = 75;

    var wordflick = function () {
        setInterval(function () {
            if (forwards) {
                if (offset >= words[i].length) {
                    ++skip_count;
                    if (skip_count == skip_delay) {
                        forwards = false;
                        skip_count = 0;
                    }
                }
            } else {
                if (offset == 0) {
                    forwards = true;
                    i++;
                    offset = 0;
                    if (i >= len) {
                        i = 0;
                    }
                }
            }
            part = words[i].substr(0, offset);
            if (skip_count == 0) {
                if (forwards) {
                    offset++;
                } else {
                    offset--;
                }
            }
            $('.word').text(part);
        }, speed);
    };

    wordflick();
});