jQuery

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

October 7, 2016
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