See the Pen gOYyvyE by leesunho70 (@leesunho70) on CodePen.
<head>
<title>Full page scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./full-page-scroll_0.1.css">
<script src="./full-page-scroll_0.1.js"></script>
<style type="text/css">
.section1 { height:300px; background-color: #7DBCD4;}
.section2 { height:500px; background-color: #98C19F;}
.section3 { height:700px; background-color: #A199E2;}
.section4 { height:400px; background-color: #CC938E;}
.section5 { height:600px; background-color: #D2C598;}
</style>
</head>
<body>
<div id="main" class="scroll-container">
<section class="section1">
<div>
<span>Page #1</span>
</div>
</section>
<section class="section2">
<div>
<span>Page #2</span>
</div>
</section>
<section class="section3">
<div>
<span>Page #3</span>
</div>
</section>
<section class="section4">
<div>
<span>Page #4</span>
</div>
</section>
<section class="section5">
<div>
<span>Page #5</span>
</div>
</section>
</div>
<script type="text/javascript">
new fullScroll({
displayDots: true,
dotsPosition: 'left',
animateTime: 0.7,
animateFunction: 'ease'
});
</script>
</body>
</html>'fullScroll' 카테고리의 다른 글
| full-page-scroll (0) | 2019.09.27 |
|---|