Pure CSS Text Reveal From Smoke Animation Effect | CSS Animation Tutorial | Part 2/2

Please LIKE our Facebook page for daily updates...

Music Credit
Track: Tobu - Roots [NCS Release]
Music provided by NoCopyrightSounds.

[gsshaykot]

dude, if you also include these video's source code from next tutorial we will more helpful to you.please

[luisresto]

IE and Edge don't support the mix-blend-mode css style, so use the following to check and only use if the browser does support the style:

<style type="text/css">

html, body {

margin: 0;

padding: 0;

font-family: sans-serif;

}



section {

height: 100vh;

background: #000;

}



section:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}



@supports (mix-blend-mode: color) {

section:before {

background: linear-gradient(to right, #f00, #f00, #0f0, #0ff, #ff0, #0ff);

mix-blend-mode: color;

}

}



video {

object-fit: cover;

height: 100vh;

width: 100%;

}



h1 {

margin: 0;

padding: 0;

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

text-align: center;

color: #fff;

font-size: 5em;

letter-spacing: 0.2em;

}

h1 span {

display: inline-block;

animation: animate 1s linear forwards;

opacity: 0;

}



@keyframes animate {

0% {

opacity: 0;

transform: rotateY(90deg);

filter: blur(10px);

}

100% {

opacity: 1;

transform: rotateY(0deg);

filter: blur(0);

}

}



h1 span:nth-child(1) { animation-delay: 1.5s; }



h1 span:nth-child(2) { animation-delay: 2s; }



h1 span:nth-child(3) { animation-delay: 2.5s; }



h1 span:nth-child(4) { animation-delay: 2.75s; }



h1 span:nth-child(5) { animation-delay: 3s; }



h1 span:nth-child(6) { animation-delay: 3.5s; }



h1 span:nth-child(7) { animation-delay: 3.75s; }



h1 span:nth-child(8) { animation-delay: 4s }



h1 span:nth-child(9) { animation-delay: 4.5s; }



h1 span:nth-child(10) { animation-delay: 4.75s; }

</style>

[bini--christ]

I got it all down till blending the multicolor with the smoke. The color covers it all. You may correct it by changing -mix-blend-mode: color;- to _mix-blend-mode: color-burn;_ I suggest you also try mix-blend-mode: color-dodge; the effect will blow your mind. Thanks *Prof*, if you really are a Prof

[radheshkhanna]

Hello Sir
Amazing video
but didnt you miss to explain a slight shadow outline color effect on the different letters when they are animated on the screen as you had shown in the demo .. ?

[brauliogarcia]

Bro está todo bueno, y por q no subes tus códigos a Github seria buena idea esq yo hice lo mismo pero solo seme ve el humo nadamás, cuál es el error hay

[akshaymaher]

thank u, sir, for sharing amazing concept. How can we apply this effect on img., ?

[joyavila]

I was able to do it ! Thank you. Can you also do water drop effect then the text will reveal?

[MonarX-ByDM]

Hello Muhammad. How to make it to apear properly on phones and Tablets??

[pawe]

hi i can use your effect in my project?

[manishjoshi]

Why not use video with colourful smoke😂

[akshitshah]

I m unable to use mix-blend-mode in my bracket...what is other solution on behalf of this ?

[zhamshidkaliev]

I thought it was script, it just video!! xex

[Nitro_Foundry]

I can't get the smoke.mp4 to work. My path and everything is correct. Can you please share your source code???? If so, that's worth a subscription c :

[ChiemekaNwogu]

from the first video, my animation on the names did not work show transition

[Greatness-zk]

Mix-blend-mode I tried color-dodge and color-burn

Not working how did u did that!!!?
Help me..