Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="loader"></div>
	<!-- Parallax Container -->
	<div id="container" class="parallax-container snow">
		<ul id="christmas_scene" class="christmas-scene" >
			<li class="layer" data-depth="0.80"><div class="layer-5 layer-photo photo-zoom"></div></li>
			<li class="layer" data-depth="0.60"><div class="layer-4 layer-photo photo-zoom"></div></li>
			<li class="layer" data-depth="0.40"><div class="layer-3 layer-photo photo-zoom"></div></li>
			<li class="layer" data-depth="0.20"><div class="layer-2 layer-photo photo-zoom"></div></li>
			<li class="layer" data-depth="0.00"><div class="layer-1 layer-photo"></div></li>
		</ul>
		<!-- Countdown Container -->
		<div id="countdown_container"></div>

		<!-- Merry Christmas Text -> You can replace with anything you like! -->
		<div class="merry-christmas-text">Merry Christmas</div>

		<!-- Happy new year 2017 photo -->
		<div class="happy-new-year"></div>

		<!-- Contact Pole Image -> From here the E-mail modal is triggered -->
		<div id="mail_pole">
			<img src="http://awesome-coding.com/theme/images/pole.png" class="img-responsive" alt="mail-pole" data-toggle="modal" data-target="#contact_modal">
		</div>
		<!-- Christmas Tree -->
		<img src="http://awesome-coding.com/theme/images/christmas-tree.png" alt="christmas-tree" id="christmas_tree"/>

		<!-- Social Media Icons Container -->
		<div class="icons-container">
			<a href="#" title="Facebook"><img src="http://awesome-coding.com/theme/images/icons/facebook.png" alt="facebook-social-icon"></a>
			<a href="#" title="Google Plus"><img src="http://awesome-coding.com/theme/images/icons/google.png" alt="google-plus-social-icon"></a>
			<a href="#" title="Twitter"><img src="http://awesome-coding.com/theme/images/icons/twitter.png" alt="twitter-social-icon"></a>
			<a href="#" title="Instagram"><img src="http://awesome-coding.com/theme/images/icons/instagram.png" alt="instagram-social-icon"></a>
			<a href="#" title="Linkedin"><img src="http://awesome-coding.com/theme/images/icons/linkedin.png" alt="linkedin-social-icon"></a>
			<a href="#" title="Pinterest"><img src="http://awesome-coding.com/theme/images/icons/pinterest.png" alt="pinterest-social-icon"></a>
		</div>
	</div>

	<!-- Send E-mail Modal -->
	<div class="modal fade" id="contact_modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-body">
					<div class="col-md-12 mail-container">
						<div class="col-md-12 padding-none bg-color">
							<div class="col-md-12 text-center">It's Christmas!</div>
							<div class="col-md-12 text-center">Don't be shy, Send us a message!</div>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<form class="col-md-12 padding-none">
								<div class="col-md-6 col-xs-12">
									<div class="col-md-12 padding-none">
										<input type="text" class="mail-first-name" id="form_first_name" placeholder="First Name" />
									</div>
									<div class="col-md-12 padding-none">
										<input type="text" class="mail-last-name" id="form_last_name" placeholder="Last Name" />
									</div>
									<div class="col-md-12 padding-none">
										<input type="text" class="mail-email" id="form_valid_email" placeholder="E-mail" />
									</div>
									<div class="col-md-12 padding-none">
										<textarea class="mail-message" id="form_message" placeholder="Message"></textarea>
									</div>
								</div>
								<div class="col-md-6 col-xs-12 text-right">
									<img src="http://awesome-coding.com/theme/images/form-image.png" alt="form-pattern-image">
									<button class="btn form-submit-button" type="submit" id="submit_form_btn">Send</button>
								</div>
							</form>
						</div>
					</div>
					<div class="col-md-12 padding-none mail-container hidden">
						<div class="col-md-12 padding-none bg-color thank-you-msg text-large" id="form_success_msg"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
              
            
!

CSS

              
                /* 1. GENERAL CLASSES */
body {
	padding: 0;
	margin: 0;
	font-family: 'Lobster', cursive;
	font-size:30px;
	color:#fff;
}
.padding-none{
	padding-left:0;
	padding-right:0;
}
.padding-half{
	padding-left:7px;
	padding-right:7px;
}
.text-small{
	font-size:20px;
}
.text-large{
	font-size:60px;
}
.left{
	float: left;
}
.right{
	float:right;
}
div[class*='col-']{
	position: relative;
}
form input{
	border-left:0;
	border-right: 0;
	border-top:0;
	border-bottom:2px solid #EF5241;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	min-width:150px;
}
form textarea{
	border-left:0;
	border-right: 0;
	border-top:0;
	border-bottom:2px solid #EF5241;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	min-width:350px;
}
form input::-webkit-input-placeholder, 
form textarea::-webkit-input-placeholder{
	color: #EF5241;
}
form input:-moz-placeholder, 
form textarea:-moz-placeholder {
	color: #EF5241;  
}
form input::-moz-placeholder, 
form textarea::-moz-placeholder {
	color: #EF5241;  
}
form input:-ms-input-placeholder, 
form textarea:-ms-input-placeholder {  
	color: #EF5241;  
}
/* END GENERAL CLASSES */

/* 2. LOADER */
#loader{
	background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	position:fixed;
	overflow:hidden;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 99;
}
#loader::after{
	content:'';
	background:url('http://awesome-coding.com/theme/images/intro.png');
	background-repeat: no-repeat;
	background-size:contain;
	width:70px;
	height: 70px;
	position: absolute;
	margin-left:-35px;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-animation: snowflake-rotate 2s linear infinite;
	-moz-animation:    snowflake-rotate 2s linear infinite;
	-o-animation:      snowflake-rotate 2s linear infinite;
	animation:         snowflake-rotate 2s linear infinite;
}
@-webkit-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@-moz-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@-o-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
/* END LOADER */

/* 3. PARALLAX CONTAINER */
#container.parallax-container {
	position: relative;
	max-width: 2560px;
	margin: 0 auto;
	overflow: hidden;
	background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
}
#container .christmas-scene{
	padding: 0;
	margin: 0;
}
#container .christmas-scene::before {
	content:'';
	background:url("http://awesome-coding.com/theme/images/top-snow-pattern.png");
	background-repeat: repeat-x;
	width: 100%;
	height:35px;
	position: absolute;
	z-index: 10;
	left:0;
	top:0;
}
/* END PARALLAX CONTAINER */

/* 4. PARALLAX PHOTOS */
#christmas_scene .layer{
	width: 100%;
}
#christmas_scene .layer-photo {
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 900px;
}
#christmas_scene .layer-photo.photo-zoom{
	transform: scale(1.05);
}
#christmas_scene .layer-1 {
	background-image: url("http://awesome-coding.com/theme/images/parallax/layer1.png");
	background-position: 40% bottom;
}
#christmas_scene .layer-2 {
	background-image: url("http://awesome-coding.com/theme/images/parallax/layer2.png");
	background-position: center bottom;
}
#christmas_scene .layer-3 {
	background-image: url("http://awesome-coding.com/theme/images/parallax/layer3.png");
	background-position: center bottom;
}
#christmas_scene .layer-4 {
	background-image: url("http://awesome-coding.com/theme/images/parallax/layer4.png");
	background-position: center bottom;
}
#christmas_scene .layer-5 {
	background-image: url("http://awesome-coding.com/theme/images/parallax/layer5.png");
	background-position: center bottom;
}
/* END PARALLAX PHOTOS */

/* 5. CHRISTMAS TREE */
#container #christmas_tree{
	position: absolute;
	bottom: 35px;
	left: 50%;
}
/* END CHRISTMAS TREE */

/* 6. E-MAIL POLE */
#container #mail_pole{
	position: absolute;
	margin-left:-250px;
	left:50%;
	bottom:50px;
	z-index: 10;
	cursor: pointer;
}
#container #mail_pole img{
	width: 100px;
}
/* END E-MAIL POLE */

/* 7. COUNTDOWN CONTAINER */
#container #countdown_container{
	width:600px;
	position: absolute;
	margin-left:-300px;
	left:50%;
	top:0;
	text-align: center;
	font-size:40px;
	color:#fff;
}
#container #countdown_container .countdown-globe{
	height: 200px;
	text-align: center;
	padding-top:65px;
	line-height: 1.3;
	z-index: 2;
}
#container #countdown_container .countdown-globe div{
	font-size:20px;
}
#container #countdown_container .countdown-globe::after{
	content:'';
	background: url('http://awesome-coding.com/theme/images/countdown-globe.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	left:50%;
	margin-left:-55px;
	top:-40px;
	z-index: -1;
}
/* END COUNTDOWN CONTAINER */

/* 8. MERRY CHRISTMAS TEXT */
#container .merry-christmas-text{
	font-family: 'Parisienne', cursive;
	position: absolute;
	top: 150px;
	width: 100%;
	text-align: center;
	font-size:80px;
	color:#fff;
}
/* END MERRY CHRISTMAS TEXT */

/* 9. HAPPY NEW YEAR PHOTO */
#container .happy-new-year{
	background:url('http://awesome-coding.com/theme/images/happy-new-year.png');
	background-repeat: no-repeat;
	background-size:contain;
	width: 400px;
	height: 112px;
	position: absolute;
	margin-left:-200px;
	top: 265px;
	left: 50%;
}
/* END HAPPY NEW YEAR PHOTO */

/* 10. E-MAIL FORM */
#contact_modal .mail-container{
	width: 900px;
	position: relative;
	padding-bottom:0;
	z-index: 3;
}
#contact_modal .mail-container::after{
	content:'';
	position: absolute;
	left:0;
	right: 0;
	z-index: -1;
	background:url('http://awesome-coding.com/theme/images/form-message-pattern.png');
	background-size: contain;
	background-repeat: repeat-x;
	width: 100%;
	height:380px;
}
#contact_modal .mail-container .form-submit-button{
	background:#EF5241;
	color:#fff;
	font-size:20px;
	padding:4px 25px 5px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	position: absolute;
	bottom:5px;
	width: 60%;
	right:45px;
}
#contact_modal .bg-color{
	background:#fffaee;
	color:#EF5241;
	height:350px;
	margin-top:15px;
	padding-top:10px;
	line-height: 1;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#contact_modal .mail-container input{
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: #fffaee;
	font-size:16px;
	margin-top:25px;
	height:32px;
}
#contact_modal .mail-container textarea{
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: #fffaee;
	margin-top:20px;
	font-size:16px;
	min-height: 65px;
}
#contact_modal .mail-container img{
	padding-top:35px;
	padding-bottom:50px;
	width: 320px;
}
#contact_modal .modal-dialog{
	width: 900px;
}
#contact_modal .modal-body{
	padding:0;
}
#contact_modal .modal-content{
	display: table;
	height: 382px;
}
#contact_modal button.close{
	position: absolute;
	right: 0;
	top: -15px;
	font-size: 50px;
}
#contact_modal .modal-content .thank-you-msg{
	text-align: center;
	padding-top:100px;
}
/* END E-MAIL FORM */

/* 11. SOCIAL ICONS */
.icons-container{
	width:260px;
	position: absolute;
	z-index: 10;
	right:100px;
	bottom:15px;
}
.icons-container img{ 
	width:36px;
}
/* END SOCIAL ICONS */



/* MEDIA QUERIES */
@media ( max-width: 1024px) {
	#christmas_scene .layer-1 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer1.png");
		background-position: 36% bottom;
	}
	#christmas_scene .layer-2 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer2.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-3 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer3.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-4 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer4.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-5 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer5.png");
		background-position: center bottom;
	}
}

@media ( max-height: 768px ) {
	#christmas_scene .layer-1 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer1.png");
		background-position: 36% bottom;
	}
	#christmas_scene .layer-2 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer2.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-3 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer3.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-4 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer4.png");
		background-position: center bottom;
	}
	#christmas_scene .layer-5 {
		background-image: url("http://awesome-coding.com/theme/images/parallax-mobile/layer5.png");
		background-position: center bottom;
	}
}

@media (max-width: 1024px) and (orientation:portrait){
	#container .happy-new-year{
		display: none;
	}
	#container #mail_pole{
		margin-left:-190px;
	}
}
@media (max-width: 995px){
	#contact_modal .modal-dialog, 
	#contact_modal .mail-container{
		width: 100%;
	}
	#contact_modal .modal-content{
		display: block;
		margin-right:20px;
		height:422px;
	}
	#contact_modal form{
		width: 420px;
		margin:0 auto;
	}
	#contact_modal .mail-container img{
		display: none;
	}
	#contact_modal .mail-container .form-submit-button{
		position: relative;
		right: 50%;
		width: 100px;
		margin-right: -50px;
		margin-top: 15px;
		bottom:0;
	}
	#contact_modal .mail-container::after{
		top:-15px;
		height:420px;
	}
	#contact_modal .mail-container .bg-color{
		height:392px;
		font-size:20px;
	}
	#container .icons-container{
		bottom:5px;
	}
}
@media (max-width:565px) and (orientation: portrait){
	#container #countdown_container{
		width: 100%;
		margin-left:0;
		left:unset;
		font-size:30px;
		text-align: center;
	}
	#container #countdown_container .countdown-globe::after{
		display: none;
	}
	#container #countdown_container .countdown-globe{
		padding-top:45px;
		padding-left:0;
		padding-right:0;
	}
	#container .merry-christmas-text{
		top:100px;
		font-size:55px;
	}
	#container .happy-new-year{
		top:180px;
		width: 300px;
		margin-left:-150px;
	}
	#container #christmas_tree{
		bottom:55px;
	}
	#container .icons-container {
		right:50%;
		margin-right:-130px;
	}
	form textarea{
		min-width: unset;
	}
}

@media (max-width: 420px) and (orientation:portrait){
	#contact_modal form{
		width: 100%;
	}
	#container #countdown_container .countdown-globe{
		padding-top:30px;
	}
	#container .merry-christmas-text{
		font-size:40px;
	}
	#container #mail_pole {
		margin-left: -160px;
	}
	#container .happy-new-year{
		display: none;
	}
}
@media (max-height:768px) and (orientation:landscape){
	#container #countdown_container{
		font-size:30px;
	}
	#container #countdown_container .countdown-globe{
		height:180px;
		padding-top:55px;
	}
	#container #countdown_container .countdown-globe::after{
		margin-left:-50px;
	}
	#container .merry-christmas-text{
		top:130px;
		font-size:65px;
	}
	#container .happy-new-year{
		width: 300px;
		top:225px;
		margin-left:-150px;
	}
}
@media(max-height: 600px) and (orientation:landscape){
	#container #countdown_container{
		font-size:20px;
	}
	#container #countdown_container .countdown-globe{
		height:165px;
		padding-top:55px;
	}
	#container #countdown_container .countdown-globe::after{
		margin-left:-46px;
	}
	#container .merry-christmas-text{
		top:115px;
		font-size:55px;
	}
	#container .happy-new-year{
		width: 200px;
		top: 195px;
		margin-left: -100px;
	}
}
@media (max-height:400px) and (orientation:landscape){
	#container #countdown_container{
		width: 300px;
		margin-left:0;
		left:unset;
		font-size:30px;
		text-align: center;
	}
	#container #countdown_container .countdown-globe::after{
		display: none;
	}
	#container #countdown_container .countdown-globe{
		padding-top:25px;
		padding-left:0;
		padding-right:0;
	}
	#container #christmas_tree{
		bottom:10px;
	}
	#container #mail_pole{
		bottom:10px;
	}
	#container .icons-container{
		width: 220px;
		right:10px;
	}
	#container .icons-container img {
		width: 30px;
	}
	#container .merry-christmas-text{
		font-size: 35px;
		padding-right: 10px;
		text-align: right;
		top: 25px;
	}
	#container .happy-new-year{
		display: none;
		top:25%;
		width: 300px;
		margin-left:-150px;
	}
}
/* END MEDIA QUERIES */
              
            
!

JS

              
                // snow fall
(function () {

// SnowVolume will change the density of the snowflakes
var SnowVolume = 800;
var elem = document.querySelector('.snow');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = elem.clientWidth;
var height = elem.clientHeight;
var i = 0;
var active = false;

function onResize() {
	width = elem.clientWidth;
	height = elem.clientHeight;
	canvas.width = width;
	canvas.height = height;
	ctx.fillStyle = '#FFF';

	var wasActive = active;
	active = width > 700;

	if (!wasActive && active)
		requestAnimFrame(update);
}

var Snowflake = function () {
	this.x = 0;
	this.y = 0;
	this.vy = 0;
	this.vx = 0;
	this.r = 0;

	this.reset();
}

Snowflake.prototype.reset = function() {
	this.x = Math.random() * width;
	this.y = Math.random() * -height;
	this.vy = 1 + Math.random() * 3;
	this.vx = 0.5 - Math.random();
	this.r = 1 + Math.random() * 2;
	this.o = 0.5 + Math.random() * 0.5;
}

canvas.style.position = 'absolute';
canvas.style.left = canvas.style.top = '0';

var snowflakes = [], snowflake;
for (i = 0; i < SnowVolume; i++) {
	snowflake = new Snowflake();
	snowflake.reset();
	snowflakes.push(snowflake);
}

function update() {

	ctx.clearRect(0, 0, width, height);

	if (!active)
		return;

	for (i = 0; i < SnowVolume; i++) {
		snowflake = snowflakes[i];
		snowflake.y += snowflake.vy;
		snowflake.x += snowflake.vx;

		ctx.globalAlpha = snowflake.o;
		ctx.beginPath();
		ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
		ctx.closePath();
		ctx.fill();

		if (snowflake.y > height) {
			snowflake.reset();
		}
	}

	requestAnimFrame(update);
}

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
	return  window.requestAnimationFrame       ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame    ||
	function( callback ){
		window.setTimeout(callback, 5000 / 60);
	};
})();

onResize();
window.addEventListener('resize', onResize, false);

elem.appendChild(canvas);
})();




$(window).on('load', function(){
	Main.init();
	Main.setParallaxHeight(); 
	$('#loader').fadeOut();
});
$(window).on('resize', function(){
	Main.setParallaxHeight();
	Main.setElementsHeight();
});
var Main = (function($){
	return {
		//inits
		init: function(){
			Main.events();
			Main.setElementsHeight();
			Main.setParallaxHeight();
			Main.countdownInit();
		},
		//events
		events: function(){
			$(document).on('click','#submit_form_btn',function(e){
				e.preventDefault();
				var v			= true,
				firstName 	= $("#form_first_name").val()
				lastName 	= $("#form_last_name").val()
				email 		= $("#form_valid_email").val()
				message 	= $("#form_message").val();
				if(firstName == ''){
					v = false;
					$("#form_first_name").attr('style','border:1px solid #FF0000');
				}
				if(lastName == ''){
					v = false;
					$("#form_last_name").attr('style','border:1px solid #FF0000');
				}
				if(Main.isEmail(email) === false){
					v = false;
					$("#form_valid_email").attr('style','border:1px solid #FF0000');
				}
				if(message == ''){
					v = false;
					$("#form_message").attr('style','border:1px solid #FF0000');
				}

				if(v){
					Main.sendEmail(firstName, lastName, email, message);
				}
			});
		},
		//functions
		setParallaxHeight: function(){
			var height = $(window).height();
			$('#christmas_scene .layer-photo').css('height', height);
		},
		sendEmail:function(firstName, lastName, email, message){
			$.ajax({
				url: 'sendmail.php',
				type: 'post',
				data: { "firstName": firstName, "lastName": lastName, "email": email, "message":message },
				success: function(response){
					$(".mail-container").addClass('hidden');
					$("#form_success_msg").parent().removeClass('hidden');
					$("#form_success_msg").html(response);
				},
				error: function( jqXhr, textStatus, errorThrown ){
					console.log( errorThrown );
				}
			});
		},
		isEmail: function(email) {
			var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			return regex.test(email);
		},
		setElementsHeight: function(){
			var height = $(window).height();

			if( height <= 400){
				var width = $(window).height() / 2;
			}else if( height <= 500 ){
				var width = $(window).height() / 3.5;
			}else if( height <= 700 ){
				var width = $(window).height() / 3;
			}else if( height <= 800 )
			var width = $(window).height() / 2.8;
			else{
				var width = $(window).height() / 2.5;
			}
			$('#christmas_tree').css({ 'width' : width,
				'margin-left' : -(width/2)
			});
			$('#mail_pole').css('margin-left', -(width/1.2));
			$('#mail_pole img').css('width', width/3);
		},
		countdownInit: function(){
			$('#countdown_container').countdown('2019/12/25', function(event) {
				$(this).html(event.strftime('<div class="col-md-3 col-xs-3 countdown-globe">%D<div class="col-md-12 padding-none">Days</div></div>\
					<div class="col-md-3 col-xs-3 countdown-globe">%H<div class="col-md-12 padding-none">Hours</div></div>\
					<div class="col-md-3 col-xs-3 countdown-globe">%M<div class="col-md-12 padding-none">Minutes</div></div>\
					<div class="col-md-3 col-xs-3 countdown-globe">%S<div class="col-md-12 padding-none">Seconds</div></div>'));
			});
		}
	}
})($);




/**
 * jQuery || Zepto Parallax Plugin
 * @author Matthew Wagerfield - @wagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
 ;(function($, window, document, undefined) {

// Strict Mode
'use strict';

// Constants
var NAME = 'parallax';
var MAGIC_NUMBER = 30;
var DEFAULTS = {
	relativeInput: false,
	clipRelativeInput: false,
	calibrationThreshold: 100,
	calibrationDelay: 500,
	supportDelay: 500,
	calibrateX: false,
	calibrateY: true,
	invertX: true,
	invertY: true,
	limitX: false,
	limitY: false,
	scalarX: 10.0,
	scalarY: 10.0,
	frictionX: 0.1,
	frictionY: 0.1,
	originX: 0.5,
	originY: 0.5
};

function Plugin(element, options) {

// DOM Context
this.element = element;

// Selections
this.$context = $(element).data('api', this);
this.$layers = this.$context.find('.layer');

// Data Extraction
var data = {
	calibrateX: this.$context.data('calibrate-x') || null,
	calibrateY: this.$context.data('calibrate-y') || null,
	invertX: this.$context.data('invert-x') || null,
	invertY: this.$context.data('invert-y') || null,
	limitX: parseFloat(this.$context.data('limit-x')) || null,
	limitY: parseFloat(this.$context.data('limit-y')) || null,
	scalarX: parseFloat(this.$context.data('scalar-x')) || null,
	scalarY: parseFloat(this.$context.data('scalar-y')) || null,
	frictionX: parseFloat(this.$context.data('friction-x')) || null,
	frictionY: parseFloat(this.$context.data('friction-y')) || null,
	originX: parseFloat(this.$context.data('origin-x')) || null,
	originY: parseFloat(this.$context.data('origin-y')) || null
};

// Delete Null Data Values
for (var key in data) {
	if (data[key] === null) delete data[key];
}

// Compose Settings Object
$.extend(this, DEFAULTS, options, data);

// States
this.calibrationTimer = null;
this.calibrationFlag = true;
this.enabled = false;
this.depths = [];
this.raf = null;

// Element Bounds
this.bounds = null;
this.ex = 0;
this.ey = 0;
this.ew = 0;
this.eh = 0;

// Element Center
this.ecx = 0;
this.ecy = 0;

// Element Range
this.erx = 0;
this.ery = 0;

// Calibration
this.cx = 0;
this.cy = 0;

// Input
this.ix = 0;
this.iy = 0;

// Motion
this.mx = 0;
this.my = 0;

// Velocity
this.vx = 0;
this.vy = 0;

// Callbacks
this.onMouseMove = this.onMouseMove.bind(this);    
this.onScrollMove = this.onScrollMove.bind(this);
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
this.onOrientationTimer = this.onOrientationTimer.bind(this);
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
this.onAnimationFrame = this.onAnimationFrame.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);

// Initialise
this.initialise();
}

Plugin.prototype.transformSupport = function(value) {
	var element = document.createElement('div');
	var propertySupport = false;
	var propertyValue = null;
	var featureSupport = false;
	var cssProperty = null;
	var jsProperty = null;
	for (var i = 0, l = this.vendors.length; i < l; i++) {
		if (this.vendors[i] !== null) {
			cssProperty = this.vendors[i][0] + 'transform';
			jsProperty = this.vendors[i][1] + 'Transform';
		} else {
			cssProperty = 'transform';
			jsProperty = 'transform';
		}
		if (element.style[jsProperty] !== undefined) {
			propertySupport = true;
			break;
		}
	}
	switch(value) {
		case '2D':
		featureSupport = propertySupport;
		break;
		case '3D':
		if (propertySupport) {
			var body = document.body || document.createElement('body');
			var documentElement = document.documentElement;
			var documentOverflow = documentElement.style.overflow;
			if (!document.body) {
				documentElement.style.overflow = 'hidden';
				documentElement.appendChild(body);
				body.style.overflow = 'hidden';
				body.style.background = '';
			}
			body.appendChild(element);
			element.style[jsProperty] = 'translate3d(1px,1px,1px)';
			propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
			featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
			documentElement.style.overflow = documentOverflow;
			body.removeChild(element);
		}
		break;
	}
	return featureSupport;
};

Plugin.prototype.ww = null;
Plugin.prototype.wh = null;
Plugin.prototype.wcx = null;
Plugin.prototype.wcy = null;
Plugin.prototype.wrx = null;
Plugin.prototype.wry = null;
Plugin.prototype.portrait = null;
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
Plugin.prototype.motionSupport = !!window.DeviceMotionEvent;
Plugin.prototype.orientationSupport = !!window.DeviceOrientationEvent;
Plugin.prototype.orientationStatus = 0;
Plugin.prototype.transform2DSupport = Plugin.prototype.transformSupport('2D');
Plugin.prototype.transform3DSupport = Plugin.prototype.transformSupport('3D');
Plugin.prototype.propertyCache = {};

Plugin.prototype.initialise = function() {

// Configure Styles
if (this.$context.css('position') === 'static') {
	this.$context.css({
		position:'relative'
	});
}

// Hardware Accelerate Context
this.accelerate(this.$context);

// Setup
this.updateLayers();
this.updateDimensions();
this.enable();
this.queueCalibration(this.calibrationDelay);
};

Plugin.prototype.updateLayers = function() {

// Cache Layer Elements
this.$layers = this.$context.find('.layer');
this.depths = [];

// Configure Layer Styles
this.$layers.css({
	position:'absolute',
	display:'block',
	left: 0,
	top: 0
});
this.$layers.first().css({
	position:'relative'
});

// Hardware Accelerate Layers
this.accelerate(this.$layers);

// Cache Depths
this.$layers.each($.proxy(function(index, element) {
	this.depths.push($(element).data('depth') || 0);
}, this));
};

Plugin.prototype.updateDimensions = function() {
	this.ww = window.innerWidth;
	this.wh = window.innerHeight;
	this.wcx = this.ww * this.originX;
	this.wcy = this.wh * this.originY;
	this.wrx = Math.max(this.wcx, this.ww - this.wcx);
	this.wry = Math.max(this.wcy, this.wh - this.wcy);
};

Plugin.prototype.updateBounds = function() {
	this.bounds = this.element.getBoundingClientRect();
	this.ex = this.bounds.left;
	this.ey = this.bounds.top;
	this.ew = this.bounds.width;
	this.eh = this.bounds.height;
	this.ecx = this.ew * this.originX;
	this.ecy = this.eh * this.originY;
	this.erx = Math.max(this.ecx, this.ew - this.ecx);
	this.ery = Math.max(this.ecy, this.eh - this.ecy);
};

Plugin.prototype.queueCalibration = function(delay) {
	clearTimeout(this.calibrationTimer);
	this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
};

Plugin.prototype.enable = function() {
	if (!this.enabled) {
		this.enabled = true;
		if (this.orientationSupport) {
			this.portrait = null;
			window.addEventListener('deviceorientation', this.onDeviceOrientation);
			setTimeout(this.onOrientationTimer, this.supportDelay);
		} else {
			this.cx = 0;
			this.cy = 0;
			this.portrait = false;
			window.addEventListener('mousemove', this.onMouseMove);
//window.addEventListener('scroll', this.onScrollMove);
}
window.addEventListener('resize', this.onWindowResize);
this.raf = requestAnimationFrame(this.onAnimationFrame);
}
};

Plugin.prototype.disable = function() {
	if (this.enabled) {
		this.enabled = false;
		if (this.orientationSupport) {
			window.removeEventListener('deviceorientation', this.onDeviceOrientation);
		} else {
			window.removeEventListener('mousemove', this.onMouseMove);
//window.addEventListener('scroll', this.onScrollMove);
}
window.removeEventListener('resize', this.onWindowResize);
cancelAnimationFrame(this.raf);
}
};

Plugin.prototype.calibrate = function(x, y) {
	this.calibrateX = x === undefined ? this.calibrateX : x;
	this.calibrateY = y === undefined ? this.calibrateY : y;
};

Plugin.prototype.invert = function(x, y) {
	this.invertX = x === undefined ? this.invertX : x;
	this.invertY = y === undefined ? this.invertY : y;
};

Plugin.prototype.friction = function(x, y) {
	this.frictionX = x === undefined ? this.frictionX : x;
	this.frictionY = y === undefined ? this.frictionY : y;
};

Plugin.prototype.scalar = function(x, y) {
	this.scalarX = x === undefined ? this.scalarX : x;
	this.scalarY = y === undefined ? this.scalarY : y;
};

Plugin.prototype.limit = function(x, y) {
	this.limitX = x === undefined ? this.limitX : x;
	this.limitY = y === undefined ? this.limitY : y;
};

Plugin.prototype.origin = function(x, y) {
	this.originX = x === undefined ? this.originX : x;
	this.originY = y === undefined ? this.originY : y;
};

Plugin.prototype.clamp = function(value, min, max) {
	value = Math.max(value, min);
	value = Math.min(value, max);
	return value;
};

Plugin.prototype.css = function(element, property, value) {
	var jsProperty = this.propertyCache[property];
	if (!jsProperty) {
		for (var i = 0, l = this.vendors.length; i < l; i++) {
			if (this.vendors[i] !== null) {
				jsProperty = $.camelCase(this.vendors[i][1] + '-' + property);
			} else {
				jsProperty = property;
			}
			if (element.style[jsProperty] !== undefined) {
				this.propertyCache[property] = jsProperty;
				break;
			}
		}
	}
	element.style[jsProperty] = value;
};

Plugin.prototype.accelerate = function($element) {
	for (var i = 0, l = $element.length; i < l; i++) {
		var element = $element[i];
		this.css(element, 'transform', 'translate3d(0,0,0)');
		this.css(element, 'transform-style', 'preserve-3d');
		this.css(element, 'backface-visibility', 'hidden');
	}
};

Plugin.prototype.setPosition = function(element, x, y) {
	x += 'px';
	y += 'px';
	if (this.transform3DSupport) {
		this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
	} else if (this.transform2DSupport) {
		this.css(element, 'transform', 'translate('+x+','+y+')');
	} else {
		element.style.left = x;
		element.style.top = y;
	}
};

Plugin.prototype.onOrientationTimer = function(event) {
	if (this.orientationSupport && this.orientationStatus === 0) {
		this.disable();
		this.orientationSupport = false;
		this.enable();
	}
};

Plugin.prototype.onCalibrationTimer = function(event) {
	this.calibrationFlag = true;
};

Plugin.prototype.onWindowResize = function(event) {
	this.updateDimensions();
};

Plugin.prototype.onAnimationFrame = function() {
	this.updateBounds();
	var dx = this.ix - this.cx;
	var dy = this.iy - this.cy;
	if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
		this.queueCalibration(0);
	}
	if (this.portrait) {
		this.mx = this.calibrateX ? dy : this.iy;
		this.my = this.calibrateY ? dx : this.ix;
	} else {
		this.mx = this.calibrateX ? dx : this.ix;
		this.my = this.calibrateY ? dy : this.iy;
	}
	this.mx *= this.ew * (this.scalarX / 100);
	this.my *= this.eh * (this.scalarY / 100);
	if (!isNaN(parseFloat(this.limitX))) {
		this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
	}
	if (!isNaN(parseFloat(this.limitY))) {
		this.my = this.clamp(this.my, -this.limitY, this.limitY);
	}
	this.vx += (this.mx - this.vx) * this.frictionX;
	this.vy += (this.my - this.vy) * this.frictionY;
	for (var i = 0, l = this.$layers.length; i < l; i++) {
		var depth = this.depths[i];
		var layer = this.$layers[i];
		var xOffset = this.vx * depth * (this.invertX ? -1 : 1);
		var yOffset = this.vy * depth * (this.invertY ? -1 : 1);
		this.setPosition(layer, xOffset, yOffset);
	}
	this.raf = requestAnimationFrame(this.onAnimationFrame);
};

Plugin.prototype.onDeviceOrientation = function(event) {

// Validate environment and event properties.
if (!this.desktop && event.beta !== null && event.gamma !== null) {

// Set orientation status.
this.orientationStatus = 1;

// Extract Rotation
var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90
var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180

// Detect Orientation Change
var portrait = window.innerHeight > window.innerWidth;
if (this.portrait !== portrait) {
	this.portrait = portrait;
	this.calibrationFlag = true;
}

// Set Calibration
if (this.calibrationFlag) {
	this.calibrationFlag = false;
	this.cx = x;
	this.cy = y;
}

// Set Input
this.ix = x;
this.iy = y;
}
};

Plugin.prototype.onMouseMove = function(event) {

// Cache mouse coordinates.
var clientX = event.clientX;
var clientY = event.clientY;

// Calculate Mouse Input
if (!this.orientationSupport && this.relativeInput) {

// Clip mouse coordinates inside element bounds.
if (this.clipRelativeInput) {
	clientX = Math.max(clientX, this.ex);
	clientX = Math.min(clientX, this.ex + this.ew);
	clientY = Math.max(clientY, this.ey);
	clientY = Math.min(clientY, this.ey + this.eh);
}

// Calculate input relative to the element.
this.ix = (clientX - this.ex - this.ecx) / this.erx;
this.iy = (clientY - this.ey - this.ecy) / this.ery;

} else {

// Calculate input relative to the window.
this.ix = (clientX - this.wcx) / this.wrx;
this.iy = (clientY - this.wcy) / this.wry;
}
};
// AICI
Plugin.prototype.onScrollMove = function(event) {
//topDistance = this.pageYOffset;
// Cache mouse coordinates.
var clientX = 1;
var clientY = - pageYOffset * 5;

console.log(clientX);
// Calculate Mouse Input
if (!this.orientationSupport && this.relativeInput) {

// Clip mouse coordinates inside element bounds.
if (this.clipRelativeInput) {
	clientX = Math.max(clientX, this.ex);
	clientX = Math.min(clientX, this.ex + this.ew);
	clientY = Math.max(clientY, this.ey);
	clientY = Math.min(clientY, this.ey + this.eh);
}

// Calculate input relative to the element.
this.ix = (clientX - this.ex - this.ecx) / this.erx;
this.iy = (clientY - this.ey - this.ecy) / this.ery;

} else {

	console.log(this.ix);
// Calculate input relative to the window.
this.ix = (clientX - this.wcx) / this.wrx;
this.iy = (clientY - this.wcy) / this.wry;
}
};

var API = {
	enable: Plugin.prototype.enable,
	disable: Plugin.prototype.disable,
	updateLayers: Plugin.prototype.updateLayers,
	calibrate: Plugin.prototype.calibrate,
	friction: Plugin.prototype.friction,
	invert: Plugin.prototype.invert,
	scalar: Plugin.prototype.scalar,
	limit: Plugin.prototype.limit,
	origin: Plugin.prototype.origin
};

$.fn[NAME] = function (value) {
	var args = arguments;
	return this.each(function () {
		var $this = $(this);
		var plugin = $this.data(NAME);
		if (!plugin) {
			plugin = new Plugin(this, value);
			$this.data(NAME, plugin);
		}
		if (API[value]) {
			plugin[value].apply(plugin, Array.prototype.slice.call(args, 1));
		}
	});
};

})(window.jQuery || window.Zepto, window, document);

/**
* Request Animation Frame Polyfill.
* @author Tino Zijdel
* @author Paul Irish
* @see https://gist.github.com/paulirish/1579671
*/
;(function() {

	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
	}

	if (!window.requestAnimationFrame) {
		window.requestAnimationFrame = function(callback, element) {
			var currTime = new Date().getTime();
			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
			var id = window.setTimeout(function() { callback(currTime + timeToCall); },
				timeToCall);
			lastTime = currTime + timeToCall;
			return id;
		};
	}

	if (!window.cancelAnimationFrame) {
		window.cancelAnimationFrame = function(id) {
			clearTimeout(id);
		};
	}

}());



// Parallax Init
$('#christmas_scene').parallax({
	scalarX: 5,
	scalarY: 15,
	invertY: false
});
              
            
!
999px

Console