Create Attractive Coming Soon Template with CSS 3D and Javascript

Create Attractive Coming Soon Template with CSS 3D and Javascript


Create Attractive Coming Soon Template with CSS 3D and Javascript

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

Create Attractive Coming Soon Template with CSS 3D and Javascript

Demo Download

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

5 comments

Murat Tekmen
Tue, 12th February 2013
It's awesome, thank you very much. I have a question, how to sync this form with mailchimp newsletter? Reply
Kevin Liew Admin
Sun, 17th February 2013
I haven't used mailchimp before. I'm not sure if you can integrate this. But if you collect the email and save it to your db, I believe you can import those list to mailchimp. Reply
JKunstwald
Mon, 29th July 2013
Awesome! But i just wanted to report a small bug: If you click subscribe repeatedly, the gif animates faster. Reply
Reza
Thu, 26th September 2013
it doesn't work on ie 10 can you help please ?:) Reply
Adnan
Mon, 8th September 2014
awesome work.
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?? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement