Quote Blurry Animation With Fade Effect For Text

 

Quote blurry animation with fade effect. The background has an image with 50px blur. The loading % go from 0 to 100 as they fade from 1 opacity to 0 for 100%. The animation increases 1% every 25ms so it takes about 2.5s for the image to become from 50px blur to 0px. Of course the time can be decreased for faster animation. The design is responsive and below 800px the quote image changes to another image but with quote as well as the animation and fade remain the same. The design is made with:

• HTML
• CSS
• JavaScript

 Other images of the project: