→ 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

171

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

Marquee Animation
On hover stop effect

Author:
Anonymous

2 months ago

345

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 weeks ago

439

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

Author:
Prajwal Hallale

2 months ago

264

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

2 months ago

289

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

2 months ago

447

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 weeks ago

66

v.5.3
Calender

Author:
Anonymous

2 months ago

132

v.4.6
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

6 months ago

169

v.5.3
Tabs example
Beautiful custom tabs example with Bootstrap 5

Author:
Omar Khaled

1 month ago

82

v.5.3
Outline button group

Author:
Mishti

5 months ago

150

v.5.3
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

3 weeks ago

63

v.4.6
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

2 months ago

141

v.5.3

Didn't find component you were looking for?

Search from 150+ componenent