Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://truba.interaktivni-studio.com/iapps/waypoint/waypoints.min.js"></script>
  <script src="http://truba.interaktivni-studio.com/iapps/waypoint/waypoints-vp.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<script type="text/javascript">dataLayer=[{ 'author': 'Degordian' }];</script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WJTXPS" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-WJTXPS');</script>
  
  <div id="home" class="page">
    <h1>home</h1>
  </div>
  <div id="about" class="page">
    <h1>about</h1>
  </div>
  <div id="contact" class="page">
    <h1>contact</h1>
  </div>
  
</body>
</html>
 
*{margin:0;padding:0;}h1{text-align:center;}.page{width:100%;height:1000px;}.page:nth-child(odd){background:#eee}#home{}#about{}#contact{}
 
$('#home').waypointVirtualPage({url: '/home', pageTitle:'Home page'});
$('#about').waypointVirtualPage({url: '/about', pageTitle:'About', triggerDelay: 2500, downPercentage:0.6, upPercentage:0.4});
$('#contact').waypointVirtualPage({url: '/contact', pageTitle:'Contact', triggerDelay: 1500});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers