Refreshing Characters Animation with JS

JavaScript
1

Hello all,

I want to create an effect like on this pages’ “Trending now” section when i hover over a text. → https://tureng.com/tr/turkce-ingilizce

My current codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="turengTrendingNow.css">
    <title>Tureng Trending Now Clone</title>
</head>
<body>
    <div id="container">
        <div id="trending-now-container">
            <span id="trending">TRENDING</span>
            <span id="now">now</span>
            <div id="first-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word1" class="words" onmouseenter="writeTextAgain()" onmouseleave="leaveMouse()">Advocate</span>
            </div>
            <div id="second-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word2"class="words" onmouseenter="writeTextAgain()" onmouseleave="leaveMouse()">Intelligent</span>
            </div>
            <div id="third-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word3"        class="words">Circumstance</span>
            </div>
            <div id="fourth-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word4" class="words" onmouseover="writeTextAgain()">Genocide</span>
            </div>
            <div id="fifth-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word5" class="words">Think</span>
            </div>
        </div>
    </div>
    <script src="turengTrendingNow.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="turengTrendingNow.css">
    <title>Tureng Trending Now Clone</title>
</head>
<body>
    <div id="container">
        <div id="trending-now-container">
            <span id="trending">TRENDING</span>
            <span id="now">now</span>
            <div id="first-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word1" class="words" onmouseenter="writeTextAgain()" onmouseleave="leaveMouse()">Advocate</span>
            </div>
            <div id="second-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word2"class="words" onmouseenter="writeTextAgain()" onmouseleave="leaveMouse()">Intelligent</span>
            </div>
            <div id="third-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word3"        class="words">Circumstance</span>
            </div>
            <div id="fourth-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word4" class="words" onmouseover="writeTextAgain()">Genocide</span>
            </div>
            <div id="fifth-word" class="word-divs">
                <img class ="search-icons"src="TurengTrendingNow-images/icons8-search.svg" alt="">
                <span id="word5" class="words">Think</span>
            </div>
        </div>
    </div>
    <script src="turengTrendingNow.js"></script>
</body>
</html>


* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 600px;
    height: 100vh;
    margin: auto;
    background-color: #303030;
    padding-top: 100px;
}

#trending-now-container {
    width: 100%;
    height: 300px;
    /* background-color: aliceblue; */
    position: relative;
    padding: 20px 20px;
    
}

#trending {
 position: absolute;
 left: 35%;
 top: -10%;
 color: red;
 font-size: 40px;
}

#now {
    position: absolute;
    left: 45%;
    top: -3%;
    color: darkblue;
    font-size: 30px;
}

.words {
    box-sizing: border-box;
    padding-bottom: 5px;
}



#first-word {
    margin-top: 50px;
}

.word-divs {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 200px;
    height: 30px;
    background-color: #fff;
    margin-top: 10px;
    box-sizing: border-box;
    padding-left: 5px;
    border-radius: 10px;
}

.word-divs:hover {
    background-color: rgba(180,180,180,1);
    transition: 0.3s;
}

#first-word {
    width: 300px;
}

#second-word {
    width: 275px;
}

#third-word {
    width: 250px;
}

#fourth-word {
    width: 225px;
}

#fifth-word {
    width: 200px;
}

.search-icons {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}

let words = document.getElementsByClassName("words");
let word1 = document.getElementById("word1");

let count = 0;
let i = 0;
var text;
let intervalCount = 0;

function writeTextAgain () {
     if(count == 0) {
        text = word1.innerHTML;
        word1.innerHTML = "";
        count++;
} else if(i < text.length) {
        word1.innerHTML += text[i];
        i++;
    } 
    setInterval(writeTextAgain,1000);
    intervalCount++;

    if(intervalCount > text.length) {
        clearInterval(writeTextAgain);
        count = 0;
        intervalCount = 0;
        i = 0;
    }
 }

Eventhough i managed to do it somehow. It’s not looking the same and i want to animation to repeat as long as onmouseenter event.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.