Introduction
We are going to make an attractive coming soon html template with CSS3, CSS 3D transform and jQuery. Let's go a little wild with CSS3 even though some old browsers won't support it. However, for CSS 3D transform part, we will make it degrades gracefully. Instead of the awesome 3D flipping effect, we will be substituted with just a simple hide and show effect.
You will need to following ingredients:
- modernizr: to detect CSS 3D transform support
- jQuery Framework: The core engine for the whole animation and ajax call.
- Browsers that support CSS3 & CSS 3D well
HTML
HTML DOM structure and CSS3 Effect, we reuse most of the code from my previous tutorial - Create CSS 3D Transorm Card Flip Gallery. It has a pretty detail illustration about the HTML structure and CSS, so if you want to know more about it, please visit that link.
<div class="subscribe"> <div class="subscribe-wrapper"> <div class="subscribe-form"> <div class="stripes top"></div> <div class="subscribe-space"> <h4>Coming Soon</h4> <p>......</p> <hr /> <form action="" method="post"> <label for="email">Your Email Address</label> <input type="text" placeholder="" id="email"/> <button class="submit">Subscribe</button> </form> </div> <div class="stripes bottom"></div> </div> <div class="subscribe-success"> <div class="subscribe-space"> <h4>Thanks!</h4> <p>......</p> </div> </div> </div> </div>
CSS
We are going to use a lot of CSS3 properties this time, for example box-sizing, box-shadow, border-radius, gradient and also CSS3 transform properties. Below are pretty straight forward styling. I have excluded CSS3 3D transform in a separate section.
.container {
width:360px;
position:absolute;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-220px;
}
.subscribe {
display:block;
width:100%;
height:259px;
position:relative;
margin:0 auto;
float:left;
color:#333;
}
.subscribe-wrapper {
display:block;
width:100%;
height:100%;
}
.subscribe-form,
.subscribe-success {
width:100%;
height:100%;
position:absolute;
display:block;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f4f4f4));
background: -webkit-linear-gradient(top, #f4f4f4, #fff);
background: -moz-linear-gradient(top, #f4f4f4, #fff);
background: -ms-linear-gradient(top, #f4f4f4, #fff);
background: -o-linear-gradient(top, #f4f4f4, #fff);
-webkit-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5);
-ms-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5);
-o-box-shadow: : 0 0 10px 3px rgba(100, 100, 100, 0.5);
box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5);
border-radius:10px;
overflow:hidden;
}
.subscribe-success {
display:none;
}
.stripes {
width:100%;
height:8px;
background: #fff url(../images/stripes.gif);
}
.stripes.top {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.stripes.bottom {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.subscribe-space {
height:244px;
background:#fff;
padding:20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.subscribe h4 {
margin:0 0 15px 0;
padding:0;
font-size:22px;
font-family: 'Racing Sans One', cursive;
letter-spacing:-1px;
line-height:10px;
}
.subscribe p {
color:#aaa;
padding:0;
margin:0 0 10px 0;
line-height:16px;
}
.subscribe hr {
margin: 0 0 10px 0;
border: 0;
border-top: 1px dotted #ccc;
}
.subscribe label {
font-weight:bold;
display:block;
margin-bottom:10px;
}
.subscribe input[type=text] {
display:block;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
border-radius:5px;
padding:10px;
border:1px solid #ddd;
margin-bottom:20px;
outline:0;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#fff));
background: -webkit-linear-gradient(top, #fff, #f9f9f9);
background: -moz-linear-gradient(top, #fff, #f9f9f9);
background: -ms-linear-gradient(top, #fff, #f9f9f9);
background: -o-linear-gradient(top, #fff, #f9f9f9);
box-shadow:inset 0 0 2px 1px rgba(150, 150, 150, 0.1);
}
.subscribe input[type=text].error {
border:1px solid #d86e6d;
}
.subscribe button {
display:block;
width:100%;
border-radius:5px;
padding:10px;
border: 1px solid #0e61a7;
border-top: 1px solid #489ac0;
color:#fff;
font-weight:bold;
font-size:14px;
text-shadow:0 2px 0 rgba(100, 100, 100, 0.5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61b7e6), to(#3e8ed7));
background: -webkit-linear-gradient(top, #61b7e6, #3e8ed7);
background: -moz-linear-gradient(top, ,#61b7e6 #3e8ed7);
background: -ms-linear-gradient(top, #61b7e6, #3e8ed7);
background: -o-linear-gradient(top, #61b7e6, #3e8ed7);
cursor: pointer;
}
Alright, here is the 3D flipping effect. You can see this effect when the form is submitted successfully. The form will flip vertically and a thank you message will be displayed. If you aren't familiar with CSS 3D transform, you can read my previous tutorial - Create CSS 3D transform card flip gallery. We are going to reuse most of the CSS code from there and it has a pretty detailed explanations with illustrations.
/*
* CSS3 Vertical Flip
*/
.subscribe.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}
.subscribe.flip .subscribe-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.subscribe.flip .subscribe-success {
display:block;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.subscribe.flip .subscribe-form,
.subscribe.flip .subscribe-success {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.subscribe.flip .flipIt {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
Javascript
Alright, here we have the section which make the form alive. What it does, onload, the run init() function and bind click event to the submit button. On form submission, it runs a simple form validation (so simple that it's dangerous. Make sure you amend this part). If it found an error, the form won't submit; if no error was found, the form will be submitted via AJAX call. You will see red & blue stripes on top and bottom start animating, and once it's done, it will do the awesome page flip to display the appreciation message.
Here is the code with inline comment:
$(function () {
var custom = {
stripesScrollSpeed: 20,
init: function () {
//hook up click event to submit button
$('.subscribe button.submit').click(function () {
//clear all errors
$('.subscribe input[type=text]').removeClass('error');
//Just a simple validate just to make sure fields are all filled
//It basically loop through all textfield, if it's empty, add error class
$('.subscribe input[type=text]').each(function () {
if ($(this).val() == '') {
$(this).addClass('error');
//just to validate the email
} else if ($(this).data('type') == 'email' && !custom.validateEmail($(this).val())) {
$(this).addClass('error');
}
});
//if no error classes were found
if ($('.subscribe .error').length == 0) {
//call submit function
custom.submit();
}
return false;
});
},
//ajax call for form submission
submit: function () {
//format form data into a long string
var formData = $('.subscribe form').serialize();
//submit it to backend
$.ajax({
type: "post",
url: "submit.php", /* you will need to change this*/
data: formData,
beforeSend: function () {
custom.scrollStripes();
},
success: function(data){
if (data == 1) {
//if browser support CSS3, use CSS3, otherwise just hide and show
//check for csstransforms36 generated by modernizr
if ($('html').hasClass('csstransforms3d')) {
$('.subscribe').addClass('flip');
$('.subscribe .subscribe-wrapper').addClass('flipIt');
} else {
$('.subscribe-form').fadeOut();
$('.subscribe-success').fadeIn();
}
}
}
});
},
//function to animate the stripes
scrollStripes: function () {
var current = 0;
//Calls the scrolling function repeatedly
var init = setInterval(function () {
// 1 pixel row at a time
current -= 1;
// move the background with backgrond-position css properties
$('.subscribe .stripes').css("backgroundPosition", current+"px 0");
}, custom.stripesScrollSpeed);
},
//simplest email validation, need to revalidate it via backend
validateEmail: function (email) {
var re = /S+@S+.S+/;
return re.test(email);
}
}
//run the script!
custom.init();
});
Conclusion
This is it, simple but yet elegant coming soon page with a touch of the magical CSS3 and jQuery. I hope you enjoy this tutorial, let me know if you have any questions. Have fun!
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.But i would love to see it in action with Feebdurner.
as you know that when we click on 'subscribe' button, a new window opens up and we have to fill captcha in order to complete the subscribe process. how can we do that??