Reputation: 55

Create typewriter effect animation inside a fixed speech bubble using CSS only

I'm trying to create a typewriter effect animation inside a "container"/speech bubble. For demo purposes, I've hardcoded in the text but in my final code, it's assigned to an ID that is populated via Javascript sourced from a SQL table. As you can see I have a couple of problems 1. I'm losing my speech/quote effect on the left-hand side, 2. using the wrap in the CSS allows all my text to be displayed but is an absolute eyesore and if I use nowrap it will not display the full text. I've researched this a lot and tried to use span and nth-child and while this would work it's not viable for my ID value as it will change dynamically based on data in SQL table.

<!DOCTYPE html>
<head>
<meta http-equiv="refresh" content="20">
</head>
<html>
    <body>
    <div>
        <h1 class="h1">Arrears Support Unit</h1>
        <h2 class="h2">This is just a test</h2>
    </div>
    <div id="slide">
        <img src="Want_You.png" align="middle" style="max-width:100%;max-height:75%;">
    </div>
    <div class="comments">
        <p class="comment bubble typewriter-text">Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est...</p>
    </div>
    <div class="comments">
        <p class="comment bubble typewriter-text">Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est...</p>
    </div>
    </body>
</html>


<style>

    #Heading {  
        margin-bottom:0vh;
        margin-top:0vh;
    }
    #slide {
        position: relative;
        margin: 1vh;
        float: right;
        border: solid 1px black;
    }
    .h1 {
        font-family: calibri;
        font-style: normal; 
        margin-top:0vh;     
        margin-bottom:0vh;  
        font-size: 7vh;
    }
    .h2 {
        font-family: calibri;
        font-style: normal;
        font-size: 4vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
    }
    .p {
        font-family: calibri;
        font-style: normal;
        font-size: 4vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
    }
    .comments {
        font-family: calibri;
        margin-top: 1vh;    
        font-size: 4vh;
        width: 400px;
    }
    .comments .comment {
        font-family: calibri;
        margin-top:0vh;
        margin-left: 1.5vw;
        margin-bottom: 20px;
        font-size: 5vh;
    }
    .comments .comment p {
        margin: 0 0 10px 10px;  
    }
    .bubble {
        position: relative;
        background: rgb(27,29,81);
        padding: 20px;
        color: white;
        border-radius: 2px;
        margin-left: 20px;
        width: 1175px;
    }
    .bubble::after {
        content: "";
        display: block;
        position: absolute;
        left: -15px;
        top: 15px;
        width:0;
        height:0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 15px solid rgb(27,29,81);
    }
    .typewriter-text {
        display: inline-block;
        overflow: hidden;
        letter-spacing: 2px;
        white-space: wrap;
        border-right: 4px solid orange;
        box-sizing: border-box;
        -webkit-animation: type 5s steps(50, end), blink .75s step-end infinite;
        animation: type 5s steps(50, end);
    }
    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }
    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: orange; 
        }
    }
    @-webkit-keyframes type {
        from { width: 0; }
    }
</style>

Upvotes: 1

Create typewriter effect animation inside a fixed speech bubble using CSS only

Answers (0)

Related Questions