Create a Flat Design One Page Website with Scroll Effect

Creating a landing page website with scrolling pages using jquery will be discussed in this tutorial.

The website model that will be created can be used for a company profile website, just adjust it to your needs. The website design in this demo may look like a website with a flat design theme, because the colors used are similar to the colors commonly used in flat design, the colors used in the demo that we will make are taken from the colors in the tutorial-webdesign.com logo

one page scroll
Display to be created

Inspiration

What we are going to make is actually inspired by Apple’s iPhone 5s and iPhone 5c website, where on the website every time we scroll, the page will move pages by detecting the mouse when scrolling. And that’s the effect we’re going to try to create.

HTML
We start by creating an HTML structure for the website layout that will be created

If we see that there is nothing special about the markup, there we only create a header and three for sections which will later function as pages, so there are 3 pages.

Website headers

In the head and /head sections we insert Jquery (javascript framework), OnePageScroll.js (jquery plugin), and the Righteous & Voltaire font that we embed from Google Web Fonts.

Javascript(Jquery)
because we use jquery one page scroll as a plugin to make it easier for us to make the layout effect change per page when scrolling. So at the end of the html code we insert the following code:

$(“.main”).onepage_scroll({
sectionContainer: “section”
});
There it is clear if we specify the section tags in the .main class which will be used as website pages.
besides the sectionContainer option, there are other options like:
easing to define the slide effect,
animationTime for the animation time,
pagination to show page number or not

More options can be seen in full on the OnePageScroll.js github page

CSS
So that the page looks neat, we beautify it with CSS, here we deliberately create three sections so that it is easy for you to change according to the needs of each page.