→ 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

767

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

Countdown timer
Countdown timer with js

Author:
Moana silva

8 months ago

5.6k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

4 months ago

632

v.5.3
Audio player with bootstrap

Author:
Arturo

3 months ago

1k

v.5.3
Timer with bootstrap

Author:
Anonymous

3 months ago

720

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

8 months ago

2.1k

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

Author:
Prajwal Hallale

8 months ago

3.5k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

6 months ago

3.4k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

4 months ago

527

v.5.3
Calender

Author:
Anonymous

8 months ago

508

v.4.6
Marquee Animation
On hover stop effect

Author:
Anonymous

8 months ago

4.8k

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

6 months ago

2.9k

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

3 months ago

709

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent