JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<script src="https://rawgithub.com/rochal/jQuery-slimScroll/master/jquery.slimscroll.min.js"></script>
<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<div id="fullpage">
<div class="section " id="section0">
<div class="intro">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/1.png" alt="1"/>
<h1>Normal scrolling</h1>
<p>With a linked menu</p>
</div>
</div>
<div class="section" id="section1">
<div class="intro">
<h1>URL get updated (#)</h1>
<p>
Easy to bookmark and share
</p>
</div>
<div class="slide" id="slide1">
</div>
<div class="slide" id="slide2">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Just use </h1>
<p>autoScrolling:false</p>
</div>
</div>
</div>
CSS
@CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro{
position: fixed;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
position: relative;
}
JavaScript
$(document).ready(function() {
$('#fullpage').fullpage({
menu: '#menu',
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
});
});