Parallax Cats

Developer
Size
6,553 Kb
Views
44,528

How do I make an parallax cats?

What is a parallax cats? How do you make a parallax cats? This script and codes were developed by Jeanine on 12 September 2022, Monday.

Parallax Cats Previews

Parallax Cats - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Cats</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <header class="header row"> <nav class="navbar nav" role="navigation"> <ul class=" list-unstyled list-inline "> <li class="sidebar-brand"> <a href="#"> <img src="http://satinflame.com/wp-content/uploads/2016/01/satinflame-trim.png" /> </a> </li> <li> <a href="#top">Home</a> </li> <li> <a href="#social"><i class="fa fa-star"></i> Follow Me</a> </li> <li> <a href="#portfolio"><i class="fa fa-code"></i> Portfolio</a> </li> <li> <a href="#about"><i class="fa fa-quote-left"></i> What Clients Say</a> </li> <li> <a href="#contact"><i class="fa fa-envelope"></i> Contact Me</a> </li> </ul> </nav> </header>
</div>
<div class="container-fluid"> <main class="row"><div class=""> <div class="wrapper clearfix buffer-top buffer-bottom background-image1 inverse-white background-inverse-feature col-sm-12" data-speed=".2" data-type="background"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="text-center"> <div class="overlay-icon"> <p>We have the skills to make it a-meowz-ing.</p> </div> </div> </div> </div> </div> </div> <div class="wrapper clearfix background-text buffer-top buffer-bottom inverse-white background-inverse-feature col-sm-12"> <div class="container"> <div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="http://lorempixel.com/200/200" /> </div> <div class="col-sm-8 text-center"> <h2>More rockers than you can shake a drumstick at.</h2> </div> </div> </div> </div> <div class="wrapper clearfix col-sm-12 buffer-top buffer-bottom background-image2 inverse-white background-inverse-feature text-center" data-speed="2" data-type="background"> <div class="container"> <div class="text-left"> <p>Conveniently promote distinctive communities without functionalized vortals. Intrinsicly transition client-centered niches vis-a-vis mission-critical initiatives. Authoritatively brand 2.0 e-tailers for intuitive outsourcing. Monotonectally implement next-generation supply chains without wireless models. Rapidiously supply proactive scenarios whereas highly efficient intellectual capital. </p><p>
Intrinsicly underwhelm cross functional vortals rather than robust models. Dynamically synthesize best-of-breed technologies whereas adaptive growth strategies. Uniquely architect transparent functionalities for client-centric web services. Dramatically parallel task.</p> </div> <a class="large-button btn">Learn More</a> </div> </div> </div> </main> <footer class="wrapper clearfix background-text buffer-top buffer-bottom inverse-white background-inverse-feature row"> <div class=" col-sm-12"> <ul> <li><a href="#">Link1</li> <li><a href="#">Link1</li> <li><a href="#">Link1</li> <li><a href="#">Link1</li> <li><a href="#">Link1</li> </ul> </div>
</footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Cats - Script Codes CSS Codes

body { background:#333; color:#fff;}
.container, .container-fluid { width:100% !important;}
header.row { background: rgba(0, 0, 0, 0.49);
}
header.row a { color:#fff; padding:8px; font-weight:600;}
.navbar { margin-bottom:0; padding-left:30px;}
main > div > div { padding: 100px 5px; } h2 { font-size: 2rem; padding: 40px 0 10px 0; font-weight: 300; } .background-image1 { position: relative; color:#000; } .background-image2 { width: 100%; position: relative; } .large-logo { margin-bottom: 80px; } .large-button.btn { border: 1px solid #fff; margin: 25px 50px; font-size: 2rem; } .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 { color: #fff; padding: 10px; display: inline-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-top:3px solid #000; border-bottom:3px solid #000; font-size: 2rem; } /* stylized */ .front img { width: 100%; height: auto; cursor: pointer; } .background-text { background: #333; }
.background-text h2 { color:#eee;} .background-text a { color:#ccc; text-decoration:none;border-bottom:1px dashed #333;} .background-image2 { z-index: 30; position: relative; }
/* header */
.sidebar-brand { width:10%;}
img { width:100%;height:auto;}

Parallax Cats - Script Codes JS Codes

/*! * parallax.js v1.3.1 (https://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: "fixed", top: 0, left: 0, overflow: "hidden" }), this.$slider.addClass("parallax-slider").one("load", function() { h.naturalHeight && h.naturalWidth || (h.naturalHeight = this.naturalHeight || this.height || 1, h.naturalWidth = this.naturalWidth || this.width || 1), h.aspectRatio = h.naturalWidth / h.naturalHeight, o.isSetup || o.setup(), o.sliders.push(h), o.isFresh = !1, o.requestRender() }), this.$slider[0].src = this.imageSrc, void((this.naturalHeight && this.naturalWidth || this.$slider[0].complete) && this.$slider.trigger("load"))) } function h(s) { return this.each(function() { var h = t(this), r = "object" == typeof s && s; this == i || this == e || h.is("body") ? o.configure(r) : h.data("px.parallax") || (r = t.extend({}, h.data(), r), h.data("px.parallax", new o(this, r))), "string" == typeof s && o[s]() }) }! function() { for (var t = 0, e = ["ms", "moz", "webkit", "o"], s = 0; s < e.length && !i.requestAnimationFrame; ++s) i.requestAnimationFrame = i[e[s] + "RequestAnimationFrame"], i.cancelAnimationFrame = i[e[s] + "CancelAnimationFrame"] || i[e[s] + "CancelRequestAnimationFrame"]; i.requestAnimationFrame || (i.requestAnimationFrame = function(e) { var s = (new Date).getTime(), o = Math.max(0, 16 - (s - t)), h = i.setTimeout(function() { e(s + o) }, o); return t = s + o, h }), i.cancelAnimationFrame || (i.cancelAnimationFrame = function(t) { clearTimeout(t) }) }(), t.extend(o.prototype, { speed: .2, bleed: 0, zIndex: -100, iosFix: !0, androidFix: !0, position: "center", overScrollFix: !1, refresh: function() { this.boxWidth = this.$element.outerWidth(), this.boxHeight = this.$element.outerHeight() + 2 * this.bleed, this.boxOffsetTop = this.$element.offset().top - this.bleed, this.boxOffsetLeft = this.$element.offset().left, this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight; var t = o.winHeight, i = o.docHeight, e = Math.min(this.boxOffsetTop, i - t), s = Math.max(this.boxOffsetTop + this.boxHeight - t, 0), h = this.boxHeight + (e - s) * (1 - this.speed) | 0, r = (this.boxOffsetTop - e) * (1 - this.speed) | 0; if (h * this.aspectRatio >= this.boxWidth) { this.imageWidth = h * this.aspectRatio | 0, this.imageHeight = h, this.offsetBaseTop = r; var n = this.imageWidth - this.boxWidth; this.offsetLeft = "left" == this.positionX ? 0 : "right" == this.positionX ? -n : isNaN(this.positionX) ? -n / 2 | 0 : Math.max(this.positionX, -n) } else { this.imageWidth = this.boxWidth, this.imageHeight = this.boxWidth / this.aspectRatio | 0, this.offsetLeft = 0; var n = this.imageHeight - h; this.offsetBaseTop = "top" == this.positionY ? r : "bottom" == this.positionY ? r - n : isNaN(this.positionY) ? r - n / 2 | 0 : r + Math.max(this.positionY, -n) } }, render: function() { var t = o.scrollTop, i = o.scrollLeft, e = this.overScrollFix ? o.overScroll : 0, s = t + o.winHeight; this.visibility = this.boxOffsetBottom > t && this.boxOffsetTop < s ? "visible" : "hidden", this.mirrorTop = this.boxOffsetTop - t, this.mirrorLeft = this.boxOffsetLeft - i, this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed), this.$mirror.css({ transform: "translate3d(0px, 0px, 0px)", visibility: this.visibility, top: this.mirrorTop - e, left: this.mirrorLeft, height: this.boxHeight, width: this.boxWidth }), this.$slider.css({ transform: "translate3d(0px, 0px, 0px)", position: "absolute", top: this.offsetTop, left: this.offsetLeft, height: this.imageHeight, width: this.imageWidth, maxWidth: "none" }) } }), t.extend(o, { scrollTop: 0, scrollLeft: 0, winHeight: 0, winWidth: 0, docHeight: 1 << 30, docWidth: 1 << 30, sliders: [], isReady: !1, isFresh: !1, isBusy: !1, setup: function() { if (!this.isReady) { var s = t(e), h = t(i); h.on("scroll.px.parallax load.px.parallax", function() { var t = o.docHeight - o.winHeight, i = o.docWidth - o.winWidth; o.scrollTop = Math.max(0, Math.min(t, h.scrollTop())), o.scrollLeft = Math.max(0, Math.min(i, h.scrollLeft())), o.overScroll = Math.max(h.scrollTop() - t, Math.min(h.scrollTop(), 0)), o.requestRender() }).on("resize.px.parallax load.px.parallax", function() { o.winHeight = h.height(), o.winWidth = h.width(), o.docHeight = s.height(), o.docWidth = s.width(), o.isFresh = !1, o.requestRender() }), this.isReady = !0 } }, configure: function(i) { "object" == typeof i && (delete i.refresh, delete i.render, t.extend(this.prototype, i)) }, refresh: function() { t.each(this.sliders, function() { this.refresh() }), this.isFresh = !0 }, render: function() { this.isFresh || this.refresh(), t.each(this.sliders, function() { this.render() }) }, requestRender: function() { var t = this; this.isBusy || (this.isBusy = !0, i.requestAnimationFrame(function() { t.render(), t.isBusy = !1 })) } }); var r = t.fn.parallax; t.fn.parallax = h, t.fn.parallax.Constructor = o, t.fn.parallax.noConflict = function() { return t.fn.parallax = r, this }, t(e).on("ready.px.parallax.data-api", function() { t('[data-parallax="scroll"]').parallax() })
}(jQuery, window, document);
$(function() { $('.background-image1').attr('data-speed', '.2'); $('.background-image1').attr('data-type', 'background'); $('.background-image1').parallax({ imageSrc: 'http://lorempixel.com/1200/600/cats/1', overScrollFix: true, bleed: 100 }); $('.background-image2').attr('data-speed', '.2'); $('.background-image2').attr('data-type', 'background'); $('.background-image2').parallax({ imageSrc: 'http://lorempixel.com/1200/600/cats/2', overScrollFix: true, bleed: 100 });
});
Parallax Cats - Script Codes
Parallax Cats - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 6,553 Kb
Views 44,528
Do you need developer help for Parallax Cats?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeanine (virtual) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!