This is a typewriter title or tagline that you can add anywhere ...

Add a text element with the correct Tag (H1/H2/etc)

Add the following CSS to the custom CSS of the element, and adapt the Tag. The code is for H1.

Adapt the width to the size of your text and element. Because it won't wrap.

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Base */

body {

padding: 0;

margin: 0;

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

}

h1 {

position: relative;

color: hsl(0, 0%, 68%);

font-weight: bold;

letter-spacing: 7px;

overflow: hidden;

border-right: 2px solid hsl(0, 0%, 80%);

white-space: nowrap;

animation: typewriter 4s steps(66) 1s 1 normal both,

blinkTextCursor 500ms infinite;

}


@keyframes typewriter {

from {

width: 0;

}

to {

width: 10em;

}

}

@keyframes blinkTextCursor {

from {

border-right-color: hsl(0, 0%, 80%);

}

to {

border-right-color: transparent;

}

}

Typewriter effect

Other hacks that could interest you

Blog article image
Glass Morphism Menu
READ MORE
Blog article image
Price ribbon for Brizy
READ MORE
Blog article image
Slider cache
READ MORE
Blog article image
Moving CSS wave
READ MORE

Any ideas or Requests

Thanks

Feel free to contact us.

if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!

If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want

DONATE

Thanks a lot for your help, It's greatly appreciated !!

And feel free to ask for tutorials or tips that you would like to discover on the site

MONSIEUR CLICK