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 logo

one page scroll
Display to be created


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.

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

The content on the website is mostly related to website creation

Design • Indonesia

The world of design is also a field that is widely studied at, not only web design, but also other things related to the world of graphic design

For that we invite those of you who are engaged in the world of web design & development or the world of graphic design to contribute knowledge in by becoming a writer.

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.

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:

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

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.