Skip to content

Instantly share code, notes, and snippets.

@AS87-code

AS87-code/Page Preload

Last active May 7, 2017 19:50
Show Gist options
  • Save AS87-code/60fef503483826ba5d6a to your computer and use it in GitHub Desktop.
Save AS87-code/60fef503483826ba5d6a to your computer and use it in GitHub Desktop.
Download ZIP
jQuery
Raw
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");
});
Raw
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>
Raw
Resize Height
function heightDetect() {
$(".main_head").css("height", $(window).height());
};
heightDetect();
$(window).resize(function() {
heightDetect();
});
Raw
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-->
Raw
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;
}
Raw
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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment