jquery.smoothState.js-demo/index.html at master · andrejsramko/jquery.smoothState.js-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>smoothstate.js demo</title>
    <link rel="stylesheet" href="css/animations.css" type="text/css" />
    <link rel="stylesheet" href="css/hamburger.css" type="text/css" />
    <link rel="stylesheet" href="css/csc.css" type="text/css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.smoothState.js"></script>
    <script src="js/prefixfree.min.js"></script>
  </head>
  <body id="trans-target">
  <div id="site-wrapper">
    <div id="site-canvas">
      <div class="top-panel panel panel-enter-fadeindown panel-exit">
        <h1 class="segment panel">jquery.smoothState.js plugin - demo page</h1>
        <div class="segment panel">
          This site handles page transitions with different enter and exit animations. It uses following plugins:
          <ul>
            <li>smoothState.js (with jquery) - <a href="http://weblinc.github.io/jquery.smoothState.js">http://weblinc.github.io/jquery.smoothState.js</a></li>
            <li>prefixfree - <a href="http://lea.verou.me/prefixfree">http://lea.verou.me/prefixfree</a></li>
            <li>offcanvas menu built with help of <a href="http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms">http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms</a></li>
            <li>hamburger menu button is built based on <a href="http://sarasoueidan.com/blog/navicon-transformicons">http://sarasoueidan.com/blog/navicon-transformicons</a></li>
          </ul>
          See source code on <a href="https://github.com/andrejsramko/jquery.smoothState.js-demo/tree/gh-pages">github</a>
        </div>
        <div class="segment panel">This is link to <a id="link-manager" href="detail1.html">detail1.html</a></div>
      </div>
      <div class="bottom-panel panel panel-enter-fadeinup panel-exit">
        <div class="segment panel">This is link to <a id="link-child" href="detail2.html">detail2.html</a></div>
      </div>
    </div>
  </div>
  <script src="js/transitions.js"></script>
  <script src="js/transitions-index.js"></script>
  </body>
</html>