flipflop-scroll
Version:
A tiny vanilla JS library to scroll section by section
124 lines (115 loc) • 5 kB
HTML
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='theme-color' content='#333333'>
<!-- favicons and icons -->
<link rel="apple-touch-icon" sizes="180x180" href="https://bugbit.io/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://bugbit.io/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://bugbit.io/img/favicons/favicon-16x16.png">
<link rel="manifest" href="https://bugbit.io/img/favicons/site.webmanifest">
<link rel="mask-icon" href="https://bugbit.io/img/favicons/safari-pinned-tab.svg" color="#714fa6">
<link rel="shortcut icon" href="https://bugbit.io/img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#714fa6">
<meta name="msapplication-config" content="https://bugbit.io/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#342e3a">
<title>Bugbit | FlipFlop Scroll Example<</title>
<!-- facebook -->
<meta property="og:url" content="https://bugbit.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bugbit | FlipFlop Scroll Example<" />
<meta property="og:description" content="FLipFlop Scroll by Bugbit, scrolling section by section" />
<meta property="og:image" content="https://bugbit.io//img/bugbit-wireframe.jpg" />
<meta property="og:imageWidth" content="1074" />
<meta property="og:imageHeight" content="564" />
<link rel="stylesheet" href="../flipflop.css">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="flip_flop_nav"></div>
<div id="madeby">Made with ♥ by <a href="https://bugbit.io" target="_blank">Bugbit</a></div>
<section style="background-color: #2ecc71;">
<div class="container">
<h1>This is flipflop.js</h1>
<h2>A tiny vanilla JavaScript library with no dependancies</h2>
<p>It enables scrolling 'page by page'</p>
<p>Try scrolling down, or hit the down arrow, or click the navigation on the right hand side</p>
<br>
<p>GitHub: <a href="https://github.com/bugbit-io/flipflop" target="_blank">https://github.com/bugbit-io/flipflop</a></p>
<p>NPM: <a href="https://www.npmjs.com/package/flipflop-scroll" target="_blank">https://www.npmjs.com/package/flipflop-scroll</a></p>
</div>
</section>
<section style="background-color: #af7ac5;">
<div class="container">
<h2>This demo uses semantic 'section' elements to seperate pages</h2>
<p>The main container is document.body by default, change this at your peril.</p>
<p>You can also set a preferred section tag:</p>
<br>
<code>
flipFlop({<br>
<span style="display: block; text-indent: 20px;">
container: document.getElementById('<b>someContainer</b>'),<br>
</span>
<span style="display: block; text-indent: 20px;">
sections: document.getElementsByClassName('<b>yourClassHere</b>')<br>
</span>
})
</code>
</div>
</section>
<section style="background-color: #d4ac0d;">
<div class="container">
<h2>To use the dots you just add a div with ID 'flip_flop_nav'</h2>
<p>If you don't like the selector you can change it:</p>
<code>
flipFlop({<br>
<span style="display: block; text-indent: 20px;">
nav: document.getElementById('<b>yourIdHere</b>')<br>
</span>
})
</code>
<br>
<br>
<p>If you only want a certain number of dots you can add them in manually:</p>
<code>
<div id="flip_flop_nav"><br>
<span style="display: block; text-indent: 20px;"><div class="dot"></div></span>
<span style="display: block; text-indent: 20px;"><div class="dot"></div></span>
<span style="display: block; text-indent: 20px;"><div class="dot"></div></span>
</div>
</code>
<p>^ That will give you three</p>
</div>
</section>
<section style="background-color: #45b39d;">
<div class="container">
<h2>The FlipFloppyness automatically dissapears on mobile < 960px wide.</h2>
<p>Or wherever you want:</p>
<code>
flipFlop({<br>
<span style="display: block; text-indent: 20px;">
disableOnMax: <b>500</b> // sets minimum pixel width for FlipFloppyness <br>
</span>
})
</code>
<br>
<br>
<p>
<mark>Be careful on mobile</mark>,
touch screens aren't very flippy floppy
</p>
</div>
</section>
<section style="background-color: #ff6347;">
<div class="container">
<h2>Thank you for making your project more Flippy Floppy!</h2>
</div>
</section>
<script src="../flipflop.js"></script>
<script>
flipFlop();
</script>
</body>
</html>