【jQuery】いくつかの視覚効果を持つPiewPiewParallax

いくつかの視差効果を持つPiewPiewParallax

HTML

<div id="container">
<header class="bird-box">
<div class="back-bird"></div>
<div class="logo"></div>
<div class="fore-bird"></div>
</header>
<section class="content">
<article>
<h1>Black bird</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repellendus suscipit ratione commodi, eveniet esse harum accusantium in facilis sapiente provident veritatis earum consequuntur tempore maxime rerum, quod recusandae eaque!
</p>
<hr>
<div class="birds-pics">
<div class="row img-row">
<figure class="four columns">
<a href=""><img src="./images/b1.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b2.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b3.png" alt=""></a>
</figure>
</div>
<div class="row img-row">
<figure class="four columns">
<a href=""><img src="./images/b1.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b2.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b3.png" alt=""></a>
</figure>
</div>
<div class="row img-row">
<figure class="four columns">
<a href=""><img src="./images/b1.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b2.png" alt=""></a>
</figure>
<figure class="four columns">
<a href=""><img src="./images/b3.png" alt=""></a>
</figure>
</div>
</div>
<hr>
<div class="scope-wrap">
<div class="black-screen">
<div class="black-screen-text">
Bird pioui
<strong><span>orange</span> red</strong>
<a href="" class="more-info">More info</a>
</div>
</div>
<div class="scope"></div>
</div>
<hr>
<div class="thumbnails row">
<div class="four columns thumb thumb1">
<img src="./images/b1.png" alt="bird">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<button>Click here</button>
</div>
<div class="four columns thumb thumb2">
<img src="./images/b2.png" alt="bird">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<button>Click here</button>
</div>
<div class="four columns thumb thumb3">
<img src="./images/b3.png" alt="bird">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<button>Click here</button>
</div>
</div>
</article>
</section>
<footer>
<div class="black-bg">
<div class="row">
<div class="three columns">
<div>Follow us on:</div>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Viadeo</li>
<li>LinkedIn</li>
</ul>
</div>
<div class="three columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, soluta.</p>
<img src="./images/b3.png" alt="bbb">
</div>
<div class="six columns">
<div>Subscride to the newsletter</div>
<div class="row">
<div class="columns seven">
<input type="text" class="button u-full-width" placeholder="your email">
</div>
<div class="columns five">
<input type="submit" class="button-primary" name="submit" value="Send">
</div>
</div>
</div>
</div>
</div>
</footer>
</div>

JS

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="./js/main.js" charset="utf-8"></script>

MIT

 
PiewPiewParallax

【jQuery】いくつかの視覚効果を持つPiewPiewParallax

  • LATEST
  • RELATED
  • POPULAR