Parallax.js

Developer
Stepan Soroka
Size
5,920 Kb
Views
14,168
  1. Parallax.js Previews
  2. Parallax.js HTML Codes
  3. Parallax.js CSS Codes
  4. Parallax.js JS Codes

How do I make an parallax.js?

Old. Parallax test.. What is a parallax.js? How do you make a parallax.js? This script and codes were developed by Stepan Soroka on 06 November 2022, Sunday.

Parallax.js Previews
IQ Test

Parallax.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax.js </title> <link rel='stylesheet prefetch' href='http://bootswatch.com/paper/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { outline: none; margin: 0; padding: 0;
}
body { background-color: #F2F2F2;
}
.smrX h1 { line-height: 20px; padding-top: 18px; border-top: solid 5px #31cc13; font-size: 45px; color: #bdddbb;
}
.smrX p { font-size: 14.5px; color: #bbbdbd;
}
.parallax-window { transition: 1.5s; height: 450px; max-height: 450px; background-size: cover;
}
.smrX h1,
.smrX p { font-family: tahoma; text-transform: uppercase; text-align: center; width: 500px; margin-left: auto; margin-right: auto;
}
.smrX { width: 100%;
}
.smr { background-color: #E7E9E9; height: 133px; width: 100%;
}
/*||-----after first parallax-----|| */
.smr h1,
.smr p,
.smr a { font-family: tahoma; text-transform: uppercase; text-align: center; width: 500px; margin-left: auto; margin-right: auto;
}
.smr a { text-decoration: none; position: relative; color: #69BAC3; display: block; margin-top: 5px;
}
.smr h1 { transition: 0.9s; font-size: 50px; color: #7ABEC6;
}
.smr p { font-size: 17px; color: #8FCED5; padding-bottom: 8px; border-bottom: solid 5px #A1DCE2; margin-bottom: -5px;
}
.smr h1:hover { color: red;
}
/*-------------------------------- */
.abt { background-color: #F2F2F2; height: 290px; font-family: tahoma; width: 75%;
}
.abt-x { background-color: #F2F2F2; height: 550px; position: relative;
}
.abt h2 { text-align: center; font-size: 25px; text-transform: uppercase; color: #595C36;
}
.fade p { width: 80%; margin: 45px auto;
}
.fade { transition: 1s;
}
.nav-tabs { width: 139px; margin: 0 auto;
}
.form-group { width: 44%; margin: -5px auto;
}
.formB { position: absolute; bottom: 0;
}
button, button:focus, button:active, input, input:focus, input:active, a:focus, a, a:active { outline: none;
}
input:focus, input:active, button:focus, button:active { outline: none; border: none; box-shadow: none;
}
input[type="submit"]:active, input[type="submit"]:focus { border: none;
}
#home img { border-radius: 50%; border: solid 3px; height: 190px; width: 190px;
}
.tAlign { width: 70%; margin: 0 auto;
}
textarea { width: 100%; resize: none;
}
.imgAlignG { width: 190px; padding-top: 50px; margin: 0 auto;
}
.social-align { width: 150px; margin: 10px auto 0 auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<section class="smrX"> <h1>Some text here</h1> <p>and this is small text about something</p>
</section>
<section class="parallax-window" data-parallax="scroll" data-image-src="$('.parallax-window').parallax({imageSrc: '//www.looklab.it/public/gallery/658cd8bcd2a57ebec8d119e0gallery.jpg'});" data-z-index="-100"> </section>
<section class="abt-x"> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">Home</a></li> <li class=""><a href="#profile" data-toggle="tab" aria-expanded="false">Profile</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="home">	<div class=
"imgAlignG"><img src="//s-media-cache-ak0.pinimg.com/236x/d9/e6/d5/d9e6d56d4c4f9cb71e829d40687dd268.jpg" alt="" /></div>	<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth maslorem ter cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima eveniet, at velit. Harum, animi voluptatem tempore deserunt hic illo ipsum eveniet veritatis, optio molestiae itaque ullam libero unde, earum voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam unde ratione aspernatur illum quo voluptas nostrum omnis doloremque, voluptatibus amet possimus laboriosam earum quas rem delectus. Rerum itaque vero non.Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> <div class="tab-pane fade" id="profile"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>	<div class="tAlign"><textarea></textarea></div> </div> </div>
<section class="formB"> <form action="index.html" method="post"> <div class="form-group"> <div class="input-group"> <input type="email" class="form-control" placeholder="your email" required> <span class="input-group-btn"> <button class="btn btn-submit" type="submit">Button</button> </span> </div>
<div class="social-align"><div class="pluso-engine" pluso-sharer={"buttons":"vkontakte,facebook,twitter,google","style":{"size":"medium","shape":"round","theme":"theme11","css":"background:transparent"},"orientation":"horizontal","multiline":false}></div> </div> </div> </form>
</section>
</section>
<section class="smr"> <a href="//codepen.io/uppermanis/">@uppermanis</a>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://pixelcog.github.io/parallax.js/js/parallax.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax.js - Script Codes CSS Codes

* { outline: none; margin: 0; padding: 0;
}
body { background-color: #F2F2F2;
}
.smrX h1 { line-height: 20px; padding-top: 18px; border-top: solid 5px #31cc13; font-size: 45px; color: #bdddbb;
}
.smrX p { font-size: 14.5px; color: #bbbdbd;
}
.parallax-window { transition: 1.5s; height: 450px; max-height: 450px; background-size: cover;
}
.smrX h1,
.smrX p { font-family: tahoma; text-transform: uppercase; text-align: center; width: 500px; margin-left: auto; margin-right: auto;
}
.smrX { width: 100%;
}
.smr { background-color: #E7E9E9; height: 133px; width: 100%;
}
/*||-----after first parallax-----|| */
.smr h1,
.smr p,
.smr a { font-family: tahoma; text-transform: uppercase; text-align: center; width: 500px; margin-left: auto; margin-right: auto;
}
.smr a { text-decoration: none; position: relative; color: #69BAC3; display: block; margin-top: 5px;
}
.smr h1 { transition: 0.9s; font-size: 50px; color: #7ABEC6;
}
.smr p { font-size: 17px; color: #8FCED5; padding-bottom: 8px; border-bottom: solid 5px #A1DCE2; margin-bottom: -5px;
}
.smr h1:hover { color: red;
}
/*-------------------------------- */
.abt { background-color: #F2F2F2; height: 290px; font-family: tahoma; width: 75%;
}
.abt-x { background-color: #F2F2F2; height: 550px; position: relative;
}
.abt h2 { text-align: center; font-size: 25px; text-transform: uppercase; color: #595C36;
}
.fade p { width: 80%; margin: 45px auto;
}
.fade { transition: 1s;
}
.nav-tabs { width: 139px; margin: 0 auto;
}
.form-group { width: 44%; margin: -5px auto;
}
.formB { position: absolute; bottom: 0;
}
button, button:focus, button:active, input, input:focus, input:active, a:focus, a, a:active { outline: none;
}
input:focus, input:active, button:focus, button:active { outline: none; border: none; box-shadow: none;
}
input[type="submit"]:active, input[type="submit"]:focus { border: none;
}
#home img { border-radius: 50%; border: solid 3px; height: 190px; width: 190px;
}
.tAlign { width: 70%; margin: 0 auto;
}
textarea { width: 100%; resize: none;
}
.imgAlignG { width: 190px; padding-top: 50px; margin: 0 auto;
}
.social-align { width: 150px; margin: 10px auto 0 auto;
}

Parallax.js - Script Codes JS Codes

var main = function() {	$('.parallax-window').parallax({imageSrc: '//www.teleport2001.ru/files/teleport/images/2013/09/03/zemlya.jpg'});
};
(function() {	if (window.pluso) {return}; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://x.pluso.ru/pluso-x.js'; var h=d[g]('body')[0]; h.appendChild(s);
})();
$(document).ready(main);
function heightDetect() {	$(".nav-tabs").css("margin", $(window).height()/1.37 + " auto" )
};
heightDetect();
$(window).resize(function() {	heightDetect();
});
Parallax.js - Script Codes
Parallax.js - Script Codes
Home Page Home
Developer Stepan Soroka
Username uppermanis
Uploaded November 06, 2022
Rating 3
Size 5,920 Kb
Views 14,168
Do you need developer help for Parallax.js?

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!

Stepan Soroka (uppermanis) Script Codes
Name
Cleaning Company
Hover Overlay Rolling top
Modal Window
A Pen by Stepan Soroka
Link Icon Effect
Anmiate SVG Border
Input effects
Animate transform rotate
React.js News List
Order elements using flex
Create amazing love letters 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!