AS87-code/Page Preload

## Page Preload
#loader {
    background: none repeat scroll 0 0 #ffffff;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#loaderInner {
    background-image: url("../img/load.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-left: -30px;
    left: 50%;
    top: 50%;
    position: absolute;
}

$(window).load(function() {
	$("#loaderInner").fadeOut();
	$("#loader").delay(400).fadeOut("slow");
});

## Parallax -> Full code
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style type="text/css">
	section {
		height: 100vh;
		position: relative;
		background-color: #666;
		overflow: hidden;
	}
		.sect-1 {
			background-image: url(1.jpg);
			background-size: cover;
			-webkit-background-size: cover;
		}
		.sect-2 img {
			position: absolute;
			width: 100%;
			top: -300px;
		}
		.header-text {
			top: 50%;
			left: 50px;
			width: 240px;
			height: 50px;
			z-index: 2;
			color: #fff;
    		font-size: 50px;
    		position: absolute;
		}
	</style>

	<section class="sect-1">
		<div class="header-text">
			Some Text
		</div>
	</section>

	<section class="sect-2">
		<img src="2.jpg" alt="alt">
	</section>

	<script src='jquery-1.11.3.min.js'></script>
	<script>
		$(window).scroll(function() {
			var st = $(this).scrollTop();
			jQuery(".header-text").css({
				"transform" : "translate(0%, " + st /2 + "%"
			});
			jQuery(".sect-2 img").css({
				"transform" : "translate(0%, " + st /20 + "%"
			});
		});
	</script>

</body>
</html>

## Resize Height
function heightDetect() {
	$(".main_head").css("height", $(window).height());
};
heightDetect();
$(window).resize(function() {
	heightDetect();
});

## Simple slider -> Full code
<!--HTML-->
<div id="slider" class="slider_wrap">
	<img alt="Image 1" class="active" src="img/slide/m_img.png" />
	<img alt="Image 2" src="img/slide/m_img.png" />
	<img alt="Image 3" src="img/slide/m_img.png" />
</div>
<!--HTML-->

<!--CSS-->
.slider_wrap {
margin:100px auto 0;
width:680px;
height:400px;
position:relative;
overflow:hidden;
}
.slider_wrap img {
width:640px;
height:auto;
display:none;
position:absolute;
top:0;
left:20px;
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursor:pointer;
background:url(slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position:-15px 0;
}
.slider_wrap span.next:hover {
background-position:-15px -26px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 -26px;
}
<!--CSS-->

<!--JS-->
$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('img'),
		indexImg = 1,
		indexMax = el.length;

	function change () {
		el.fadeOut(500);
		el.filter(':nth-child('+indexImg+')').fadeIn(500);
	}

	function autoCange () {
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}
		change ();
	}
	var interval = setInterval(autoCange, 3000);

	elWrap.mouseover(function() {
		clearInterval(interval);
	});
	elWrap.mouseout(function() {
		interval = setInterval(autoCange, 3000);
	});

	elWrap.append('<span class="next"></span><span class="prev"></span>');

	$('span.next').click(function() {
		indexImg++;
		if(indexImg > indexMax) {
			indexImg = 1;
		}
		change ();
	});
	$('span.prev').click(function() {
		indexImg--;
		if(indexImg < 1) {
			indexImg = indexMax;
		}
		change ();
	});
});
<!--JS-->

## Tabs Short
$(".tab_item").not(":first").hide();
$(".wrapper .tab").show().click(function() {
    var ind = $(this).index();
    $(".wrapper .tab").removeClass("active").eq(ind).addClass("active");
    $(".tab_item").hide().eq(ind).fadeIn()
}).eq(0).addClass("active");

<div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>

/* Убираем табы без JS */
.wrapper .tab {
    display: none;
}
.wrapper .active {
    color: red;
}

## Tabs Short 2
HTML:
<div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>

jQuery:
$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");

CSS:
.wrapper .active { color: red; }
	#loader {
	background: none repeat scroll 0 0 #ffffff;
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
	}
	#loaderInner {
	background-image: url("../img/load.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #fff;
	height: 60px;
	width: 60px;
	margin-top: -30px;
	margin-left: -30px;
	left: 50%;
	top: 50%;
	position: absolute;
	}

	$(window).load(function() {
	$("#loaderInner").fadeOut();
	$("#loader").delay(400).fadeOut("slow");
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<style type="text/css">
	section {
	height: 100vh;
	position: relative;
	background-color: #666;
	overflow: hidden;
	}
	.sect-1 {
	background-image: url(1.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	}
	.sect-2 img {
	position: absolute;
	width: 100%;
	top: -300px;
	}
	.header-text {
	top: 50%;
	left: 50px;
	width: 240px;
	height: 50px;
	z-index: 2;
	color: #fff;
	font-size: 50px;
	position: absolute;
	}
	</style>

	<section class="sect-1">
	<div class="header-text">
	Some Text
	</div>
	</section>

	<section class="sect-2">
	<img src="2.jpg" alt="alt">
	</section>

	<script src='jquery-1.11.3.min.js'></script>
	<script>
	$(window).scroll(function() {
	var st = $(this).scrollTop();
	jQuery(".header-text").css({
	"transform" : "translate(0%, " + st /2 + "%"
	});
	jQuery(".sect-2 img").css({
	"transform" : "translate(0%, " + st /20 + "%"
	});
	});
	</script>

	</body>
	</html>
	function heightDetect() {
	$(".main_head").css("height", $(window).height());
	};
	heightDetect();
	$(window).resize(function() {
	heightDetect();
	});
	<!--HTML-->
	<div id="slider" class="slider_wrap">
	<img alt="Image 1" class="active" src="img/slide/m_img.png" />
	<img alt="Image 2" src="img/slide/m_img.png" />
	<img alt="Image 3" src="img/slide/m_img.png" />
	</div>
	<!--HTML-->

	<!--CSS-->
	.slider_wrap {
	margin:100px auto 0;
	width:680px;
	height:400px;
	position:relative;
	overflow:hidden;
	}
	.slider_wrap img {
	width:640px;
	height:auto;
	display:none;
	position:absolute;
	top:0;
	left:20px;
	}
	.slider_wrap img:first-child {
	display:block;
	}
	.slider_wrap span {
	margin-top:-13px;
	width:15px;
	height:26px;
	display:block;
	position:absolute;
	top:50%;
	cursor:pointer;
	background:url(slider2_arrow.png) no-repeat;
	}
	.slider_wrap span.next {
	right:0;
	background-position:-15px 0;
	}
	.slider_wrap span.next:hover {
	background-position:-15px -26px;
	}
	.slider_wrap span.prev {
	left:0;
	background-position: 0 0;
	}
	.slider_wrap span.prev:hover {
	background-position: 0 -26px;
	}
	<!--CSS-->

	<!--JS-->
	$(function () {
	var elWrap = $('#slider'),
	el = elWrap.find('img'),
	indexImg = 1,
	indexMax = el.length;

	function change () {
	el.fadeOut(500);
	el.filter(':nth-child('+indexImg+')').fadeIn(500);
	}

	function autoCange () {
	indexImg++;
	if(indexImg > indexMax) {
	indexImg = 1;
	}
	change ();
	}
	var interval = setInterval(autoCange, 3000);

	elWrap.mouseover(function() {
	clearInterval(interval);
	});
	elWrap.mouseout(function() {
	interval = setInterval(autoCange, 3000);
	});

	elWrap.append('<span class="next"></span><span class="prev"></span>');

	$('span.next').click(function() {
	indexImg++;
	if(indexImg > indexMax) {
	indexImg = 1;
	}
	change ();
	});
	$('span.prev').click(function() {
	indexImg--;
	if(indexImg < 1) {
	indexImg = indexMax;
	}
	change ();
	});
	});
	<!--JS-->
	$(".tab_item").not(":first").hide();
	$(".wrapper .tab").show().click(function() {
	var ind = $(this).index();
	$(".wrapper .tab").removeClass("active").eq(ind).addClass("active");
	$(".tab_item").hide().eq(ind).fadeIn()
	}).eq(0).addClass("active");

	<div class="wrapper">
	<div class="tabs">
	<span class="tab">Вкладка 1</span>
	<span class="tab">Вкладка 2</span>
	<span class="tab">Вкладка 3</span>
	</div>
	<div class="tab_content">
	<div class="tab_item">Содержимое 1</div>
	<div class="tab_item">Содержимое 2</div>
	<div class="tab_item">Содержимое 3</div>
	</div>
	</div>

	/* Убираем табы без JS */
	.wrapper .tab {
	display: none;
	}
	.wrapper .active {
	color: red;
	}
	HTML:
	<div class="wrapper">
	<div class="tabs">
	<span class="tab">Вкладка 1</span>
	<span class="tab">Вкладка 2</span>
	<span class="tab">Вкладка 3</span>
	</div>
	<div class="tab_content">
	<div class="tab_item">Содержимое 1</div>
	<div class="tab_item">Содержимое 2</div>
	<div class="tab_item">Содержимое 3</div>
	</div>
	</div>

	jQuery:
	$(".tab_item").not(":first").hide();
	$(".wrapper .tab").click(function() {
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
	$(".tab_item").hide().eq($(this).index()).fadeIn()
	}).eq(0).addClass("active");

	CSS:
	.wrapper .active { color: red; }