parallax_color_bars
Version:
parallax color bars
281 lines (193 loc) • 10.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parallax Color Bars example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="section-intro parallax-color-bar-block">
<div class="normal-background back-img" style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
<ul class="color-bars-list">
<li class="color-bar"
data-parallax-color-bar='{"left": 10, "top": 40, "width": 10, "height": 30, "shift": 400, "duration": 4}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 66, "top": 4, "width": 10, "height": 30, "shift": 400, "duration": 6}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 27, "top": 10, "width": 15, "height": 60, "shift": 600, "duration": 3}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 50, "top": 40, "width": 10, "height": 50, "shift": 600, "duration": 4}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 80, "top": 34, "width": 10, "height": 30, "shift": 700, "duration": 7}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/hs_err_pid689.jpg')"></div>
</li>
</ul>
<div class="container">
<div class="content-wrap">
<h3 class="title">
Lorem ipsum dolor
</h3>
</div>
</div>
</section>
<section class="section-features">
<div class="container">
<ul class="features-list">
<li class="feature-item">
<div class="content-col">
<div class="title">
Lorem ipsum
</div>
<div class="desc">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.
</p>
</div>
</div>
<div class="img-col">
<div class="img-wrap parallax-color-bar-block">
<div class="normal-background back-img" style="background-image: url('imgs/pexels-photo-534327.jpg')"></div>
<ul class="color-bars-list">
<li class="color-bar"
data-parallax-color-bar='{"left": 10, "top": 10, "width": 10, "height": 30, "shift": 200, "duration": 6}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534327.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 30, "top": 10, "width": 20, "height": 50, "shift": 400, "duration": 8}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534327.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 80, "top": 33, "width": 15, "height": 30, "shift": 100, "duration": 6}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534327.jpg')"></div>
</li>
</ul>
</div>
</div>
</li>
<li class="feature-item">
<div class="content-col">
<div class="title">
Lorem ipsum
</div>
<div class="desc">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.
</p>
</div>
</div>
<div class="img-col">
<div class="img-wrap parallax-color-bar-block">
<div class="normal-background back-img" style="background-image: url('imgs/pexels-photo-534351.jpg')"></div>
<ul class="color-bars-list">
<li class="color-bar"
data-parallax-color-bar='{"left": 15, "top": 10, "width": 10, "height": 30, "shift": 400, "duration": 4}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534351.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 30, "top": -20, "width": 20, "height": 50, "shift": 600, "duration": 3}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534351.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 55, "top": 10, "width": 20, "height": 50, "shift": 300, "duration": 5}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534351.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 90, "top": 10, "width": 10, "height": 30, "shift": 400, "duration": 6}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-534351.jpg')"></div>
</li>
</ul>
</div>
</div>
</li>
<li class="feature-item">
<div class="content-col">
<div class="title">
Lorem ipsum
</div>
<div class="desc">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.
</p>
</div>
</div>
<div class="img-col">
<div class="img-wrap parallax-color-bar-block">
<div class="normal-background back-img" style="background-image: url('imgs/pexels-photo-539711.jpg')"></div>
<ul class="color-bars-list">
<li class="color-bar"
data-parallax-color-bar='{"left": 20, "top": 30, "width": 20, "height": 50, "shift": 300, "duration": 3}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-539711.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 50, "top": 20, "width": 10, "height": 30, "shift": 100, "duration": 4}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-539711.jpg')"></div>
</li>
<li class="color-bar"
data-parallax-color-bar='{"left": 70, "top": 20, "width": 15, "height": 60, "shift": 300, "duration": 2}'>
<div class="color-bar-background back-img"
style="background-image: url('imgs/pexels-photo-539711.jpg')"></div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="spacer"></section>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/TweenLite.min.js"></script>
<script src="js/CSSPlugin.min.js"></script>
<script src="../build/parallaxColorBars.js"></script>
<script>
$('.parallax-color-bar-block').parallaxColorBars();
</script>
</body>
</html>