"Scrollify JS (nth advanced selector use)"
Bootstrap 4.1.1 Snippet by iammohitverma

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scrollify</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } section { width: 100%; height: 100vh } section:nth-child(5n+1) { background-color: #074259; } section:nth-child(5n+2) { background-color: #F2BB16; } section:nth-child(5n+3) { background-color: #F29829; } section:nth-child(5n+4) { background-color: #F27B13; } section:nth-child(5n+5) { background-color: #8C0303; } </style> </head> <body> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <section></section> <script src="https://projects.lukehaas.me/scrollify/script/jquery-2.2.1.min.js"></script> <script src="https://projects.lukehaas.me/scrollify/script/jquery.scrollify.js"></script> <script> $(function() { $.scrollify({ section : "section", }); }); $.scrollify({ section : "section", sectionName : "section-name", interstitialSection : "", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, standardScrollElements: "", setHeights: true, overflowScroll: true, updateHash: true, touchScroll:true, before:function() {}, after:function() {}, afterResize:function() {}, afterRender:function() {} }); </script> </body> </html>

Related: See More

Vue Paper Dashboard
Radio Button - Payment method selector
Advanced Dropdown Search
Product chooser / selector

Questions / Comments: