"parallax"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="//use.typekit.net/rws3een.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="container">
<div class="container-inner">
<div class="background"></div>
<section id="intro" class="wrapper">
<h1 class="name">Parallax Demo</h1>
<h2 class="byline">An experiment by Dave Gamache</h2>
</section>
<section id="explosion" class="wrapper">
<p class="explosion-byline">Here's an example of 16 elements scaling, fading and moving at once.</p>
<ul id="domExplosionList">
<li class="dom-explosion-item dei-1"></li>
<li class="dom-explosion-item dei-2"></li>
<li class="dom-explosion-item dei-3"></li>
<li class="dom-explosion-item dei-4"></li>
<li class="dom-explosion-item dei-5"></li>
<li class="dom-explosion-item dei-6"></li>
<li class="dom-explosion-item dei-7"></li>
<li class="dom-explosion-item dei-8"></li>
<li class="dom-explosion-item dei-9"></li>
<li class="dom-explosion-item dei-10"></li>
<li class="dom-explosion-item dei-11"></li>
<li class="dom-explosion-item dei-12"></li>
<li class="dom-explosion-item dei-13"></li>
<li class="dom-explosion-item dei-14"></li>
<li class="dom-explosion-item dei-15"></li>
<li class="dom-explosion-item dei-16"></li>
</ul>
</section>
<section id="images" class="wrapper">
<p class="images-byline">Or better yet, a realistic example of showcasing some design work.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* #Basic Styles
================================================== */
body {
background: #fff;
font: 24px/1.6 "brandon-grotesque", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
}
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 { font-weight: bold;}
h1 { font-size: 60px; line-height: 1.1; }
h2 { font-size: 48px; line-height: 1.2; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular
parallax image scrolling
Parallax Login Form

Questions / Comments:

sir, how to use these source code in ofline

shravanmeena () - 6 years ago - Reply 0