animated_brackets
Version:
animated brackets
147 lines (114 loc) • 5.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated brackets</title>
<meta name="description" content="Animated brackets">
<meta name="keywords" content="svg draw responsive jQuery plugin Greensock Gsap animation">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="section-intro back-img" style="background-image: url('imgs/hs_err_pid689.jpg')">
<div class="container">
<div class="content-wrap">
<h3 class="title" data-parallax-content='{"shift": 40, "duration": 3}'>
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 back-img" style="background-image: url('imgs/pexels-photo-534327.jpg')">
</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 back-img" style="background-image: url('imgs/pexels-photo-534351.jpg')">
</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 back-img" style="background-image: url('imgs/pexels-photo-539711.jpg')">
</div>
</div>
</li>
</ul>
</div>
</section>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="../build/animatedBrackets.min.js"></script>
<script>
$('.section-intro .title').animatedBrackets();
$('.section-features .feature-item:nth-child(1) .title').animatedBrackets({
points: [
'0 20, 0 0, 100 0, 100 100, 0 100, 0 80'
],
stroke_width: 8,
color: '#cacaca'
});
$('.section-features .feature-item:nth-child(2) .title').animatedBrackets();
$('.section-features .feature-item:nth-child(3) .title').animatedBrackets({
points: [
'100 80, 100 100, 0 100, 0 0, 100 0, 100 20'
],
duration: 2
});
</script>
</body>
</html>