jquery.smoothState.js-demo/detail1.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
39
40
41
42
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>smooth 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" class="detail1">
      <div id="site-menu" class="panel panel-enter-scaleleft panel-exit-scaleupright">
        <div class="left panel panel-enter-fadein">
          <h2>Menu</h2>
          <p>Menu item 1</p>
          <p>Menu item 2</p>
          <ul>
            <li>Menu item 3</li>
            <li>Menu item 4</li>
          </ul>
          <div>This link to <a href="index.html">index.html</a></div>
        </div>
        <div class="right">
          <a class="lines-button x" aria-label="Toggle Navigation" href="#">
            <span class="lines"></span>
          </a>
        </div>
      </div>
      <div class="content-panel panel panel-enter-slideright panel-exit-fadeout">
        <div class="segment">This link to <a href="index.html">index.html</a></div>
        <div class="segment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis porta faucibus. Aliquam erat volutpat. Donec scelerisque vitae nunc sed venenatis. In luctus a velit nec ultricies. Donec id leo diam. Nulla ullamcorper, metus quis faucibus placerat, nisl orci pharetra ipsum, a suscipit dolor mauris eu libero. Sed dictum posuere facilisis. In vitae rutrum tortor. Integer accumsan ipsum et libero mollis feugiat a vitae urna. Phasellus placerat gravida mi id egestas. Mauris tincidunt in mi in faucibus. Duis bibendum dictum sapien, quis consequat dui ultrices nec. Donec commodo velit enim, facilisis tristique nulla varius vitae. Pellentesque urna neque, placerat vel tincidunt sed, lobortis sit amet arcu. Phasellus tempus interdum dui, eget lacinia leo rhoncus sit amet. Curabitur vestibulum magna vel metus posuere ultricies. Integer fringilla sed turpis sed pharetra. Suspendisse euismod risus nulla, eu commodo sem venenatis sit amet. Nam consequat mauris vitae magna porta gravida. Quisque tempus magna quis ultricies interdum. Aliquam et vestibulum tortor. Nam dignissim fermentum mollis. Pellentesque id luctus velit. Quisque ullamcorper dui sed laoreet imperdiet. Cras dictum leo eu ex sagittis ultricies. Duis vehicula id nisl quis molestie. Nunc vulputate ipsum sit amet iaculis tempor. Fusce dolor nisl, fringilla nec sollicitudin ut, blandit a risus. Aliquam consectetur orci vitae porttitor consequat. Nunc orci sem, tincidunt ut odio quis, blandit porttitor leo. Proin eleifend vulputate lacus, nec sollicitudin lacus mattis sed. In dictum nec est id lacinia. Pellentesque facilisis, mauris vel tempus luctus, ligula massa ornare odio, id aliquet sapien velit at lorem. Sed sollicitudin iaculis purus a pulvinar. Praesent et faucibus ex, et sollicitudin ligula. Proin luctus consequat sapien, porta lacinia arcu pellentesque sed. Nunc elit est, condimentum sed nulla quis, cursus vehicula est. Nulla in mauris et elit tincidunt commodo. Quisque accumsan, erat efficitur egestas gravida, ante ex placerat magna, vitae posuere purus leo eget odio. Phasellus id enim sem. Donec dapibus neque sed nisi scelerisque, in consequat mauris rhoncus. In sit amet efficitur tortor. Proin luctus, ante at luctus porta, neque libero congue libero, non fringilla metus elit sit amet augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc hendrerit mi sit amet imperdiet tristique. Cras congue neque sapien, quis congue ante porta sit amet. Vestibulum at pretium risus. Quisque nec nunc a lacus dignissim commodo. Nunc condimentum ultricies massa quis condimentum. Nulla ornare hendrerit nibh, sed semper purus congue condimentum. Fusce tempus vel justo a pretium. Mauris augue odio, dignissim non suscipit id, mattis et orci. Nulla facilisi. Praesent risus eros, feugiat vitae ligula vel, euismod finibus ipsum. Morbi nec molestie orci, a dictum eros. In suscipit justo ligula, eget gravida ante maximus ut. In massa arcu, aliquet in odio id, malesuada varius lectus. Vestibulum interdum odio vitae ullamcorper mattis. Donec suscipit vulputate lacus, id aliquet purus.</div>
      </div>
    </div>
  </div>
  <script src="js/transitions.js"></script>
  <script src="js/transitions-index.js?v=2"></script>
  </body>
</html>