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 |
Flexbox | 2,263 Kb |
Font-Awesome Icon Card with heading | 2,882 Kb |
Bootstrap 4 | 2,121 Kb |
Expanding Info Boxes | 5,141 Kb |
Simple Event Box | 1,623 Kb |
3 Piece Slider with featured center | 3,920 Kb |
Table Sorter Data | 3,347 Kb |
3 Piece Slider | 3,881 Kb |
Simple React Template | 2,233 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 |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Degree Picker | Idered | 4,307 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 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!