bachir
/
lamine_wp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vanilla Javascript Parallax Library - Rellax.js</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700,900' rel='stylesheet' type='text/css'>

    <!-- Booooooootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
    <![endif]-->
  </head>

  <body>
    <div class="grid">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-1 col-md-2">
            <div class="grid-line"></div>
          </div>
          <div class="col-md-2">
            <div class="grid-line"></div>
          </div>
          <div class="col-md-2">
            <div class="grid-line"></div>
          </div>
          <div class="col-md-2">
            <div class="grid-line"></div>
          </div>
          <div class="col-md-2">
            <div class="grid-line" style="margin-right:-30px;border-right:1px solid #ccc"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="fixed-top rellax" data-rellax-speed="-2"
      style="transform: rotate(45deg);"
    >
    </div>

    <main class="main">
      <header>
        <div class="container">
          <div class="row">
            <div class="col-md-offset-1 col-md-11">
              <a href="http://dixonandmoe.com/">
                <h2>BY DIXON & MOE <span>➔</span></h2>
              </a>
              <div class="white-block"></div>
            </div>
          </div>
          <div class="title">
            <div class="row">
              <div class="col-md-offset-1 col-md-6">
                <h1>RELLAX<span>JS</span></h1>
              </div>
              <div class="col-md-4 text-right">
                <a href="https://github.com/dixonandmoe/rellax">GITHUB</a>
              </div>
            </div>
          </div>
          <div class="subtitle">
            <div class="row">
              <div class="col-md-offset-1 col-md-2">
                <h3>Light (871b gz)</h3>
              </div>
              <div class="col-md-2">
                <h3>Vanilla Javascript</h3>
              </div>
              <div class="col-md-2">
                <h3>Parallax Library</h3>
              </div>
            </div>
          </div>
        </div>
      </header>


      <section class="section san-francisco">
        <div class="absolute">
          <div class="container">
            <div class="row">
              <div class="col-md-offset-1 col-md-11">
                <h2 class="rellax" data-rellax-speed="-3">San Francisco<br>California</h2>
              </div>
            </div>
          </div>
        </div>

        <div class="absolute above">
          <div class="container">
            <div class="row">

              <div class="col-md-offset-1 col-md-2">
                <div class="lg-green rellax"
                  data-rellax-speed="2"
                  style="transform: rotate(45deg);">
                </div>
                <div class="sm-green rellax"
                  data-rellax-speed="5"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-offset-2 col-md-1">
                <div class="sm-purple rellax"
                  data-rellax-speed="2"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-offset-3 col-md-1">
                <div class="xs-green rellax"
                  data-rellax-speed="5"
                  style="transform: rotate(45deg);">
                </div>
                <div class="md-green rellax"
                  data-rellax-speed="1"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-1">
                <div class="lg-purple rellax"
                  data-rellax-speed="3"
                  style="transform: rotate(45deg);">
                </div>
              </div>

            </div>
          </div>
        </div>


        <div class="container">

          <div class="row">
            <div class="col-md-offset-1 col-md-5">
              <div class="date">
                Incorporated—<br>
                1850<br><br>
                37°47′N 122°25′W
              </div>
            </div>
            <div class="col-md-offset-1 col-md-4">
              <div class="temp">
                68°
              </div>
            </div>
          </div>
        </div>


      </section>


      <section class="section">

      </section>


      <section class="section">
        <div style="margin-top: 200px">
          <div class="container">

              <div class="row">
                <div class="col-md-12 text-center">
                  <h4>JAVASCRIPT (ACCEPTS ANY CLASS NAME)</h4>
                </div>
              </div>

              <div class="row">
                <div class="col-md-offset-2 col-md-8">
                  <div class="text-editor">
                    <code>
                      <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax');
                    </code>
                  </div>
                </div>
              </div>


              <div class="row">
                <div class="col-md-12 text-center" style="margin-top:80px">
                  <h4>BASIC MARKUP (DEFAULT SPEED: -2)</h4>
                </div>
              </div>

              <div class="row">
                <div class="col-md-offset-2 col-md-8">
                  <div class="text-editor">
                    <code>
                      &lt;div <span class="purple">class</span>="<span class="green">rellax</span>"&gt;<br>
                      <span class="white">&nbsp;&nbsp;I’m slow and smooth</span><br>
                      &lt;/div&gt;
                    </code>
                  </div>
                </div>
              </div>


              <div class="row">
                <div class="col-md-12 text-center" style="margin-top:40px">
                  <h4>OPTIONAL SPEED (-10 to +10) (+ RESPONSIVE SPEEDS)</h4>
                </div>
              </div>

              <div class="row">
                <div class="col-md-offset-2 col-md-8">
                  <div class="text-editor">
                    <code>
                      &lt;div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">6</span>"&gt;<br>
                      <span class="white">&nbsp;&nbsp;I’m slow and smooth</span><br>
                      &lt;/div&gt;
                    </code>
                  </div>
                </div>
              </div>

          </div>
        </div>
      </section>


      <section class="section">

        <div class="absolute above" style="pointer-events: none;">
          <div class="container">
            <div class="row">

              <div class="col-md-offset-1 col-md-2">
                <div class="bt-green rellax"
                  data-rellax-speed="5"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-offset-0 col-md-1">
                <div class="md-dixonandmoe rellax"
                  data-rellax-speed="2"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-offset-5 col-md-1">
                <div class="md-twitter rellax"
                  data-rellax-speed="1"
                  style="transform: rotate(45deg);">
                </div>
              </div>

              <div class="col-md-1">
                <div class="md-facebook rellax"
                  data-rellax-speed="3"
                  data-rellax-percentage="0.5"
                  style="transform: rotate(45deg);">
                </div>
              </div>

            </div>
          </div>
        </div>

        <div class="copy" style="margin-top: 200px;margin-bottom: 500px">
          <div class="container">
            <div class="row">
              <div class="col-md-offset-1 col-md-6">
                <h4>SERIOUSLY, WHY?!</h4>
                <p>Come on, how boring is the internet without excessive javascript? We made this library since too many github repos are abandoned (RIP skrollr) or feature creepy. You got some beef or caught us slippin on unit tests, send rants and 10mb gifs to <a href="mailto:moe@dixonandmoe.">moe@dixonandmoe.com</a></p>
              </div>
            </div>

            <div class="row" style="margin-top: 140px">
              <div class="col-md-offset-5 col-md-6">
                <h4>BUT ACTUALLY</h4>
                <p>We've benefitted so much from open source projects that we're actively trying to give back. As designers, we're starting by releasing our own quirky js code.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="share">
        <div class="container">
          <div class="row">
            <div class="col-md-offset-1 col-md-3">
              <a class="dam" href="http://dixonandmoe.com/">Dixon &amp; Moe</a>
            </div>
            <div class="col-md-offset-3 col-md-2">
              <a href="https://www.facebook.com/sharer/sharer.php?u=http://dixonandmoe.com/rellax/">Share <span>➔</span></a>
            </div>
            <div class="col-md-offset-0 col-md-2">
              <a href="https://twitter.com/share?url=http://dixonandmoe.com/rellax/">Tweet <span>➔</span></a>
            </div>
          </div>
        </div>
      </section>

    </main>


    <!-- javascript -->
    <script type="text/javascript" src="rellax.js"></script>
    <script>
    	var rellax = new Rellax('.rellax', {
        // center: true
        callback: function(position) {
            // callback every position change
            console.log(position);
        }
      });
    </script>


  </body>
</html>