Whenever you want to introduce something new, like your website, new logo or say product to your online users you can use this Impressive Curtain Raiser plugin created using only CSS3.
Impressive Curtain Raiser Using CSS3
You can use this simple lines of code to create beautiful splash page, coming soon or Under Construction page by doing some slight changes to the animation timings and number of frames. We will create an Impressive Curtain raiser page for Logo revealing.
So lets begin ! First of all we will create an foundational structure for the complete demo.
The CSS
style2.css
body {
background: #5b8083 url(https://www.dzyngiri.com/files/images/red_texture.jpg) repeat top left;
font-family: 'BebasNeueRegular';
}
h1.main,p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
Now we will write a code for each frame. We are using 5 frames to display the introductionary text. You can increase the frames as per your need.
And as you increase the frames, concentrate on the animation timing of each frame. So we will write a CSS to animate each frame.
.sp-container h2 {
text-transform:none;
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-3 {
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-4 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
font-size: 50px;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 11s backwards;
-moz-animation: blurFadeIn 1s ease-in 11s backwards;
-ms-animation: blurFadeIn 3s ease-in 11s backwards;
animation: blurFadeIn 3s ease-in 11s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-5 span:nth-child(3) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-logo {
position: absolute;
width: 293px;
height: 155px;
left: 51%;
top: 40%;
margin: -70px 0 0 -165px;
background: transparent url(https://www.dzyngiri.com/files/images/dzyngiri_logo.png) no-repeat top left;
-webkit-animation: blurFadeIn 3.6s ease-in 14s backwards;
-moz-animation: blurFadeIn 3.6s ease-in 14s backwards;
-ms-animation: blurFadeIn 3.6s ease-in 14s backwards;
animation: blurFadeIn 3.6s ease-in 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=00);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 80px;
width: 80px;
height: 80px;
background: #fff;
color: #5b8083;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 18s backwards;
-moz-animation: fadeInRotate 1s linear 18s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 18s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #5b8083;
color: #fff;
}
Now we will write a animation tags for each of the browser. These tags are very important with respect to browser compatibility.
Following are the prefix required for respective browser :
Firefox 4 requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-
@-webkit-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInBack{
0%{
opacity: 0;
-webkit-transform: scale(0);
}
50%{
opacity: 0.4;
-webkit-transform: scale(2);
}
100%{
opacity: 0.2;
-webkit-transform: scale(5);
}
}
@-webkit-keyframes fadeInRotate{
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInBack{
0%{
opacity: 0;
-moz-transform: scale(0);
}
50%{
opacity: 0.4;
-moz-transform: scale(2);
}
100%{
opacity: 0.2;
-moz-transform: scale(5);
}
}
@-moz-keyframes fadeInRotate{
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
@keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInBack{
0%{
opacity: 0;
transform: scale(0);
}
50%{
opacity: 0.4;
transform: scale(2);
}
100%{
opacity: 0.2;
transform: scale(5);
}
}
@keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Now lets integrate this with the lovely HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Impressive Curtain Raiser Using CSS3 | Dzyngiri</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/style2IE.css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<div class="clr"></div>
</div>
<div class="sp-container">
<div class="sp-content">
<div class="sp-logo"></div>
<h2 class="frame-1">To enhance your creativity</h2>
<h2 class="frame-2">We bring you</h2>
<h2 class="frame-3">Dzyngiri</h2>
<h2 class="frame-4">With a new look</h2>
<h2 class="frame-5"><span style="text-transform:none;">www.</span><span style="text-transform:none;">dzyngiri.com</span></h2>
<a class="sp-circle-link" href="http://www.facebook.com/dzyngiri">Follow</a>
</div>
</div>
</div>
</body>
</html>
Husshhh….
Now it is not possible for me to write a complete code in the single post. So I will give a summary of files supporting the complete demo.
Following is the supporting files :
- index.html
- css/style2.css
- css/demo.css
- css/style2IE.css
- css/reset.css
- css/fonts/fonts.css
You can have a look at the final result and download the demo file from below.
We will appreciate if you give your feedback by just posting your comment below !
Free License
Feel free to download and use this item for both personal and commercial projects with attribution back to Dzyngiri. Please note:
- Attribution is required for all the free downloadable items (plugin, template, psd, etc).
- Promotion is always appreciated, but please send people to this page (we you can do that at least)
Undeniably believe that that you said. Your favorite justification seemed to be at the web the simplest thing to consider of. I say to you, I definitely get irked whilst people think about worries that they plainly do not know about. You managed to hit the nail upon the highest and also defined out the entire thing with no need side-effects , people could take a signal. Will likely be again to get more. Thanks
Tremendous things here. I’m very happy to peer your article. Thank you a lot and I am taking a look ahead to touch you. Will you kindly drop me a e-mail?
That’s for sure, you just mail me at [email protected]
I didn’t get you exactly…