Parallax Cats
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 - 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 });
});
Developer | Jeanine |
Username | virtual |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 6,553 Kb |
Views | 44,528 |
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!
Name | Size |
Bootstrap 4 | 2,121 Kb |
Expanding Info Boxes | 5,141 Kb |
Table Sorter Data | 3,347 Kb |
Parallax Cats | 6,553 Kb |
3 Piece Slider with featured center | 3,920 Kb |
Flexbox | 2,263 Kb |
Font-Awesome Icon Card with heading | 2,882 Kb |
Simple Event Box | 1,623 Kb |
Simple React Template | 2,233 Kb |
3 Piece Slider | 3,881 Kb |
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!
Name | Username | Size |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!