Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Various Dynamic Text Effects

Written by @kerixa 19 May 2020

Pages filled with texts are very boring. So why not to add some effects to the texts. For example you can create a Mexican wave, or twirling effect. Other effects provided here are floating, jogging, flipping and falling. It must be mentioned that with all of these effects, the texts remains texts, and therefore, the SEO of your website is not hurt.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
  max-height: 100vh;

}

.headline {
  -webkit-box-align: center;
          align-items: center;
  background-color: var(--color);
  display: -webkit-box;
  display: flex;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 700;
  font-size: calc(1rem + 1vmin);
  height: 15vh;
  -webkit-box-pack: center;
          justify-content: center;
  overflow: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  scroll-snap-align: start;
  width: 100vw;
}
.headline:nth-child(1) {
  --color: #f9ca24;
}
.headline:nth-child(2) {
  --color: #3498db;
}
.headline:nth-child(3) {
  --color: #ff7979;
}
.headline:nth-child(4) {
  --color: #1abc9c;
}
.headline:nth-child(5) {
  --color: #e74c3c;
}
.headline:nth-child(6) {
  --color: #f8c291;
}

.word,
.char {
  -webkit-animation-delay: var(--del);
          animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
          animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
          animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);
  -webkit-animation-name: var(--name);
          animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
          animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
          animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 1;
}

.headline--fall .char {
  --name: fall;
  --dur: 600ms;
  --del: calc(var(--char-index) * -0.05s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}
@keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}
.headline--flip .char {
  --name: flip;
  --dur: 4000ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: linear;
}
@-webkit-keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
@keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate;
}
.headline--float .char:nth-child(2n) {
  --name: float-alt;
}
@-webkit-keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@-webkit-keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
@keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
.headline--jog .char {
  --name: jog;
  --dur: 500ms;
  --del: calc(var(--char-index) * -0.025s);
  --tf: linear;
}
@-webkit-keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
@keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
.headline--jump .char {
  --name: jump;
  --dur: 800ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
@keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(-100%) scaleY(1.2);
            transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
.headline--twirl .char {
  --name: twirl;
  --dur: 6000ms;
  --del: calc(var(--char-index) * 0.025s);
  --tf: linear;
}
@-webkit-keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
@keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
</style>
<body translate="no">
<main class="container">
<h2 data-splitting class="headline headline--jump">jumping</h2>
<h2 data-splitting class="headline headline--float">floating</h2>
<h2 data-splitting class="headline headline--jog">jogging</h2>
<h2 data-splitting class="headline headline--flip">flipping</h2>
<h2 data-splitting class="headline headline--twirl">twirling</h2>
<h2 data-splitting class="headline headline--fall">falling</h2>
</main>
<script src='https://www.htmlbestcodes.com/files/splitting.min.js'></script>
<script>
Splitting();
</script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: TheDewalt, sahjahan, fk khan, Proper, Jenisha
advertisement 2