<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="bgimg-1">
<div class="caption">
<span class="border">Welcome To Invoice</span>
</div>
</div>
<div style="color: #ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;text-shadow: 2px 2px 8px #000000;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.6;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("http://fscomps.fotosearch.com/compc/CSP/CSP991/k11897697.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("https://dynaxtips.files.wordpress.com/2016/08/emailinvoice.jpg?w=421");
min-height: 400px;
}
.bgimg-3 {
background-image: url("https://aliphia.com/wp-content/themes/bootstrap/images/aliphia-screen-icon-en-1.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #ddd;
}
$(document).ready(function() {
var $scene = $(".scene"),
$content = $(".content"),
$back = $(".back"),
$backBgs = $(".back__bg"),
$front = $(".front"),
$frontBgs = $(".front__bg"),
$menuBlock = $(".menu__block"),
$svgPath = $(".menu__block-svgPath"),
animating = false,
menuActive = false,
menuAnimTime = 600,
blockAnimTime = 1500,
$sliderCont = $(".menu-slider__content"),
curSlide = 1,
sliderXDiff = 0,
curPage = 1,
nextPage = 0,
numOfPages = $(".front__bg").length,
scaleTime = 500,
transTime = 500,
totalTime = scaleTime + transTime,
changeTimeout,
timeoutTime = 8000,
winW = $(window).width(),
winH = $(window).height();
// init nav element timeout animation
$(".nav__el-1").addClass("active");
//default debounce function from David Walsh blog
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function changePages() {
$(".back__bg, .front__bg, .nav__el").removeClass("active");
$(".nav__el-"+curPage).addClass("active");
$back.css("transform", "translate3d(0,"+(curPage-1)*-100+"%,0)");
$front.css("transform", "translate3d(0,"+(curPage-1)*100+"%,0)");
createTimeout();
setTimeout(function() {
$(".back__bg-"+curPage+", .front__bg-"+curPage).addClass("active");
}, totalTime);
};
$(document).on("click", ".nav__el:not(.active)", function() {
curPage = $(this).attr("data-page");
changePages();
});
// ugly hack for animation reset when you coming back from menu section
function resetTimeoutAnimation() {
var $activeNavEl = $(".nav__el.active"),
$activeParts = $activeNavEl.find(".nav__el-clone, .nav__el")
$activeParts.addClass("instant");
$activeNavEl.removeClass("active");
$activeParts.css("top");
$activeParts.removeClass("instant");
$activeParts.css("top");
$activeNavEl.addClass("active");
}
/* creates timeOut for change of slides.
Call's itself from inside of changePages() function
*/
function createTimeout() {
window.clearTimeout(changeTimeout);
resetTimeoutAnimation();
changeTimeout = setTimeout(function() {
if (curPage >= numOfPages) {
curPage = 1;
} else {
curPage++;
}
changePages();
}, timeoutTime);
};
createTimeout();
/* creates path D attribute strings for animation
initial d = fullScreen
mid d = Q curves with 5% padding
final d = centered 90% width/height block
*/
function createD(type) {
var types = {"init": ["M0,0",
"Q"+winW/2+",0",
winW+",0",
"Q"+winW+","+winH/2,
winW+","+winH,
"Q"+winW/2+","+winH,
"0,"+winH,
"Q0,"+winH/2,
"0,0"],
"mid": ["M0,0",
"Q"+winW/2+","+winH*0.05,
winW+",0",
"Q"+winW*0.95+","+winH/2,
winW+","+winH,
"Q"+winW/2+","+winH*0.95,
"0,"+winH,
"Q"+winW*0.05+","+winH/2,
"0,0"],
"final": ["M"+winW*0.05+","+winH*0.05,
"Q"+winW/2+","+winH*0.05,
winW*0.95+","+winH*0.05,
"Q"+winW*0.95+","+winH/2,
winW*0.95+","+winH*0.95,
"Q"+winW/2+","+winH*0.95,
winW*0.05+","+winH*0.95,
"Q"+winW*0.05+","+winH/2,
winW*0.05+","+winH*0.05]};
return types[type].join(" ");
}
// animates path d with SnapSVG
function animateBlock(reverse) {
winW = $(window).width();
winH = $(window).height();
var initD = createD("init"),
midD = createD("mid"),
finalD = createD("final");
if (!reverse) {
$svgPath.attr("d", initD);
Snap($svgPath[0]).animate({"path": midD}, blockAnimTime/2, mina.elastic, function() {
Snap($svgPath[0]).animate({"path": finalD}, blockAnimTime/2, mina.elastic);
});
} else {
Snap($svgPath[0]).animate({"path": midD}, blockAnimTime/2, mina.elastic, function() {
Snap($svgPath[0]).animate({"path": initD}, blockAnimTime/2, mina.elastic);
});
}
};
// resizes opened menu path d block, because i can't change viewBox with js
var resizeSvg = debounce(function() {
winW = $(window).width();
winH = $(window).height();
$svgPath.attr("d", createD("final"));
}, 50);
// default madness
$(document).on("click", ".menu__btn", function() {
if (animating) return;
animating = true;
setTimeout(function() {
animating = false;
}, blockAnimTime + menuAnimTime);
if (!menuActive) {
menuActive = true;
window.clearTimeout(changeTimeout);
$content.addClass("inactive");
$scene.addClass("menu-visible");
$(".back__bg:not(.active)").addClass("hidden");
$(window).on("resize", resizeSvg);
setTimeout(function() {
$menuBlock.addClass("visible");
animateBlock();
}, menuAnimTime);
} else {
menuActive = false;
animateBlock(true);
setTimeout(function() {
$menuBlock.removeClass("visible");
createTimeout();
$(".back__bg").removeClass("hidden");
$content.removeClass("inactive");
$scene.removeClass("menu-visible");
}, blockAnimTime);
$(window).off("resize");
}
});
});
