→ Anonymous
→ Typewriter Effect

Typewriter Effect

This bootstrap css example is contributed by Anonymous, on 18-Jul-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Widget

Author Anonymous

259

v.4.6

Fork Fullscreen

.typewriter {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
    }

.cursor {
        display: inline-block;
        width: 3px;
        background-color: #333;
        animation: blink 0.7s infinite;
        margin-left: 5px;
    }

@keyframes blink {
        0% {
            opacity: 1;
        }

50% {
            opacity: 0;
        }

100% {
            opacity: 1;
        }
    }
</style>

function typeWriter() {
            if (i < text.length) {
                document.getElementById("text").innerHTML += text.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
            }
        }

window.onload = typeWriter;
</script>

More Examples

Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

3 months ago

582

v.5.3
Calender

Author:
Anonymous

3 months ago

219

v.4.6
Countdown timer
Countdown timer with js

Author:
Moana silva

3 months ago

1.2k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

2 months ago

217

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

3 months ago

687

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

3 months ago

487

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

v.5.3
Collapsible Nested list
Tree structure design for nested list

Author:
Moana silva

3 months ago

355

v.5.3
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

5 months ago

1.8k

v.5.3
Pricing cards

Author:
Prajwal Hallale

7 months ago

240

v.5.3
Progress bars

Author:
Tane Mahuta

3 months ago

204

v.5.3
Newsletter section

Author:
Anonymous

3 months ago

963

v.4.6

Didn't find component you were looking for?

Search from 200+ componenent