scroll.js

A simple presentation framework based on jQuery

It's as simple as

$(document).ready(function() { scroll({ slides: [ 'slide-1', 'slide-2' ], transition: 'slide' }); });
<html> <head> <title>scroll.js by RetroAsgardian</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="scroll.js"></script> <script> $(document).ready(function() { scroll({ slides: [ 'slide-1', 'slide-2' ], transition: 'slide' }); }); </script> <div class="slide first-slide" id="first-slide"> <p class="title">Presentation Title</p> </div> <div class="slide" id="slide-1"> <p class="large">Lorem ipsum</p> </div> <div class="slide" id="slide-2"> <p class="large">dolor sit amet</p> </div> </body> </html>

scroll.js uses the following options:

scroll({ slides: Array containing element IDs of slides to show, transition: 'fade' or 'slide' });

However, you can modify every aspect of the appearance by editing style.css.