Parallax Scrolling
Body background fills gaps
by Virtual
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="wrapper clearfix buffer-top buffer-bottom background-image1 inverse-white background-inverse-feature" data-speed=".2" data-type="background">
<div class="container">
<div class="overlay-icon">more things</div>
</div>
</div>
<div class="wrapper clearfix background-text buffer-top buffer-bottom inverse-white background-inverse-feature">
<div class="container">
<h2>More than 225 undergraduate academic programs</h2>
</div>
</div>
<div class="wrapper clearfix buffer-top buffer-bottom background-image2 inverse-white background-inverse-feature" data-speed="2" data-type="background">
<div class="container">
<h2 class="tag">Make Bozeman your basecamp</h2>
</div>
</div>
SCSS
body { background:#333;} div {
padding: 100px 5px;
}
h2 {
font-size: 3rem;
padding: 40px 0 10px 0;
font-weight: 300;
}
.background-image1-1 {
width: 100%;
position: relative;
}
.background-image2 {
width: 100%;
position: relative;
}
.large-logo {
margin-bottom: 80px;
}
.large-button .btn {
border: 1px solid #fff;
margin: 25px 50px;
font-size: 4rem;
}
.large-button .btn:hover {
background: #1a80c9;
color: #fff;
background: rgb(26, 128, 201);
background: transparent\9;
background: rgba(26, 128, 201, 0.6);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#1a80c900, endColorstr=#1a80c900);
zoom: 1;
}
.large-button a {
color: #fff;
padding: 10px;
display: block;
}
.large-button .btn {
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.overlay-icon {
padding: 20px 10%;
border:3px solid #000;
}
/* stylized */
.front img {
width: 100%;
height: auto;
cursor: pointer;
}
.background-text {
background: #333;
h2 { color:#eee;}
}
.background-image2 {
z-index: 30;
position: relative;
}
JavaScript
/*!
* parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
* @copyright 2015 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
! function(t, i, e, s) {
function o(i, e) {
var h = this;
"object" == typeof e && (delete e.refresh, delete e.render, t.extend(this, e)), this.$element = t(i), !this.imageSrc && this.$element.is("img") && (this.imageSrc = this.$element.attr("src"));
var r = (this.position + "").toLowerCase().match(/\S+/g) || [];
return r.length < 1 && r.push("center"), 1 == r.length && r.push(r[0]), ("top" == r[0] || "bottom" == r[0] || "left" == r[1] || "right" == r[1]) && (r = [r[1], r[0]]), this.positionX != s && (r[0] = this.positionX.toLowerCase()), this.positionY != s && (r[1] = this.positionY.toLowerCase()), h.positionX = r[0], h.positionY = r[1], "left" != this.positionX && "right" != this.positionX && (this.positionX = isNaN(parseInt(this.positionX)) ? "center" : parseInt(this.positionX)), "top" != this.positionY && "bottom" != this.positionY && (this.positionY = isNaN(parseInt(this.positionY)) ? "center" : parseInt(this.positionY)), this.position = this.positionX + (isNaN(this.positionX) ? "" : "px") + " " + this.positionY + (isNaN(this.positionY) ? "" : "px"), navigator.userAgent.match(/(iPod|iPhone|iPad)/) ? (this.iosFix && !this.$element.is("img") && this.$element.css({
backgroundImage: "url(" + this.imageSrc + ")",
backgroundSize: "cover",
backgroundPosition: this.position
}), this) : navigator.userAgent.match(/(Android)/) ? (this.androidFix && !this.$element.is("img") && this.$element.css({
backgroundImage: "url(" + this.imageSrc + ")",
backgroundSize: "cover",
backgroundPosition: this.position
}), this) : (this.$mirror = t("<div />").prependTo("body"), this.$slider = t("<img />").prependTo(this.$mirror), this.$mirror.addClass("parallax-mirror").css({
visibility: "hidden",
zIndex: this.zIndex,
position:...