How we can create vertical carousel type scrolling for the full webpage using JavaScript and CSS? Solution: JavaScript Full Page Scrolling Website With CSS, Full Page Scroll JS.
Nowadays mostly creative stuff websites have full page scrolling websites, this is like a vertical carousel for showing contents. There are some dedicated libraries for creating this type of website or webpage. This post is also based on a library named fullpage.js (get), this is a JavaScript library for creating a full-page carousel.
Today you will learn to create a full-page scroll landing page. This is the easiest method to create this type of website, because I have used a JS library. Now you can create an amazing and attractive website using this program, you just have to change or add your contents. There is also a navbar for direct scroll to the targeted section.
So, Today you will learn to create JavaScript Full Page Scrolling Website With CSS. Using this program’s code you will able to create a single page website easily. The best fact of this design is, this is a kind of vertical carousel but it does not have an autoplay feature. There are some navigation circle icons to see the progress of scroll, you can also switch section by clicking on the nav icons.
If you are thinking now how this full scrolling design actually is, then see this preview given below.
Preview Of Full-Page Scroll JS
See this video preview to getting an idea of how this scrolling landing page looks like.
Now you can see this visually, you can see also it live by pressing the button given above. If you like this template, then get the source code of its.
You May Also Like:
- jQuery Select Option Dropdown
- Gradient Direction Navigation
- JavaScript Countdown Timer
- Animated Scroll ImagesÂ
JavaScript Full Page Scrolling Website With CSS
Before sharing source code, let’s talk about it. First, I have created a header section using HTML <header> element and inside the element, I have placed a logo and nav. In there I have used HTML Data-* and in link target, I have put the id of each section. But ID is creating in JS file and stored using array.
After that, I have created another div for creating sections and placed five-sections inside it using HTML <section> tag. Now using CSS I have placed all the elements in right places, if you have knowledge of CSS then you will definitely understand the codes after seeing. As you know I have used a JS and jQuery based library for creating this.
Fullpage.js has prebuilt function and class to create this type of carousel. Inside the JS file, I have done many works like toggle navbar, scrolling content’s navigation, etc. There are pre-built commands like sectionColor, sectionSelector, etc. I can’t explain all the things in writing, you will understand easily after getting the codes.
For creating this program or design you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Full Page Scrolling | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css'> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header-top clearfix"> <h1 class="l-left"><a href="#firstSection">LOGO</a></h1> <a class="l-right toggle-menu" href="#"> <i></i> <i></i> <i></i> </a> </div> <nav class="hide"> <ul id="menu"> <li data-menuanchor="firstSection"> <a href="#firstSection" title="First Section">First Section</a> </li> <li data-menuanchor="secondSection"> <a href="#secondSection" title="Second Section">Second Section</a> </li> <li data-menuanchor="thirdSection"> <a href="#thirdSection" title="Second Section">Third Section</a> </li> <li data-menuanchor="fourthSection"> <a href="#fourthSection" title="Fourth Section">Fourth Section</a> </li> <li data-menuanchor="fifthSection"> <a href="#fifthSection" title="First Slide">Fifth Section</a> </li> </ul> </nav> </header> <div id="fullpage"> <section class="vertical-scrolling"> <h2>#1</h2> <h3>This is the first section</h3> </section> <section class="vertical-scrolling"> <h2>#2</h2> <h3>This is the second section</h3> </section> <section class="vertical-scrolling"> <h2>#3</h2> <h3>This is the third section</h3> </section> <section class="vertical-scrolling"> <h2>#4</h2> <h3>This is the fourth section</h3> </section> <section class="vertical-scrolling"> <h2>#5</h2> <h3>This is the fourth section</h3> </section> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ @import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700); * { margin: 0; padding: 0; font-family: 'Alegreya Sans', Arial, sans-serif; text-transform: uppercase; } html { font-size: 62.5%; } body { color: black; letter-spacing: .18em; } a { text-decoration: none; color: white; } ul, li { list-style-type: none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .l-left { float: left; } .l-right { float: right; } .end { margin-top: 30px; font-size: 3em; font-weight: bold; opacity: 0; -webkit-transform: translateY(300px); transform: translateY(300px); transition: opacity, -webkit-transform 1s; transition: opacity, transform 1s; transition: opacity, transform 1s, -webkit-transform 1s; transition-delay: 1s; } .header-top { background: rgba(0, 47, 77, .3); height: 70px; padding: 0 10px; position: fixed; top: 0; width: 100%; z-index: 12; box-sizing: border-box; } h1 { line-height: 70px; height: 70px; } h1 a { display: block; padding: 0 10px; } .toggle-menu { width: 50px; height: 50px; display: inline-block; position: relative; top: 10px; } .toggle-menu i { position: absolute; display: block; height: 2px; background: white; width: 30px; left: 10px; transition: all .3s; } .toggle-menu i:nth-child(1) { top: 16px; } .toggle-menu i:nth-child(2) { top: 24px; } .toggle-menu i:nth-child(3) { top: 32px; } .open-menu i:nth-child(1) { top: 25px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .open-menu i:nth-child(2) { background: transparent; } .open-menu i:nth-child(3) { top: 25px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } nav { height: 0; opacity: 0; box-sizing: border-box; background: rgba(0, 47, 77, .25); position: fixed; top: 70px; width: 100%; transition: all 1s; } .open-menu ~ nav { opacity: 1; padding: 80px 0; z-index: 15; height: calc(90vh - 70px); } nav ul { padding: 0 10px; display: flex; } nav li { flex: 1; } nav li a { font-size: 2em; display: block; padding: 30px; text-align: center; transition: background .3s; } nav li a { background: #ff4b4b; margin-left: 20px; } nav li a:hover { background: #212121; } section { text-align: center; } h2 { font-size: 4em; margin-bottom: 20px; } h3 { font-weight: 300; font-size: 2.8em; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: white; width: 8px; height: 8px; margin: -4px 0 0 -4px; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: transparent; box-sizing: border-box; border: 2px solid #212121; } @media screen and (max-width: 767px) { nav ul { flex-direction: column; } nav li { margin-top: 1px; } nav li a { font-size: 1.5em; } .scroll-icon { display: none; } } @media screen and (max-width: 400px) { html { font-size: 50%; } .open-menu ~ nav { padding: 20px 0; } nav li a { padding: 3px; } } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// Code By Webdevtrick ( https://webdevtrick.com ) var $header_top = $('.header-top'); var $nav = $('nav'); $header_top.find('a').on('click', function() { $(this).parent().toggleClass('open-menu'); }); $('#fullpage').fullpage({ sectionsColor: ['#3dcfa1', '#348899', '#ff8b20', '#ff5757', '#ffd03c'], sectionSelector: '.vertical-scrolling', navigation: true, slidesNavigation: true, controlArrows: false, anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'], menu: '#menu', afterLoad: function(anchorLink, index) { $header_top.css('background', 'rgba(0, 47, 77, .3)'); $nav.css('background', 'rgba(0, 47, 77, .25)'); if (index == 5) { $('#fp-nav').hide(); } }, onLeave: function(index, nextIndex, direction) { if(index == 5) { $('#fp-nav').show(); } }, }); |
That’s It. Now you have successfully created JavaScript Full Page Scrolling Website With CSS, Full Page Scroll JS. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
is there a way to change the height of each section?
how to add background image to sections
very nice, looking for this : )
my getting error fullpage is not a function can u plz tell