--- title: Designing a simple Home Page published: true description: Steps to create a simple tags: home page, auto scroll, parallax scroll, parallax effect --- ![Preview of design](https://thepracticaldev.s3.amazonaws.com/i/20o6mrz0t1783qb63mgd.PNG)

See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.

Firstly, there is no specific way a homepage should look it all depends on personal taste and the purpose of making the website. Even though some features tend to remain more or less constant. Like all home pages have a navigation bar, a hero area, call to action buttons, gorgeous background image and perhaps a tag line. So, we first need to decide how much content we want on our home-page. According to that we can determine how many tabs we need in the navigation bar do we need a search box or perhaps a drop-down list etc. Other deciding factors are the call to action buttons (like Log-in, Sign-up, Explore etc). After deciding on all the 'primary requirements' there are still some simple yet cool effects that we can use to make our **Home Page** look great and can be incorporated in almost all design scenarios. A few of these I will describe here. #Navbar The most important part of our home page. Sometimes we want the nav-bar to stick on top of our page or maybe change the font size of nav-bar links (For example - the font size is bigger initial at the top of the and as the user scrolls down it gradually becomes smaller etc). ```javascript $(document).scroll(function() { scroll_position = $(this).scrollTop(); //current vertical position of the scroll bar if(scroll_position > threshold) { //style of navbar after crossing 'threshold' } else { //style of navbar before crossing 'threshold' } }); ``` Here, the `threshold` can be a value in pixels or something like `$('#threshold__element_id').offset().top` such that crossing a particular element triggers the change in style. Using the *Bootstrap* frame work makes the life a lot more easier because we can easily resize the nav-bar to a *Hamburger menu* button for mobile devices. Note : for a more gradual effect we can use `if` `else if` .. `else` ladder andd change the styling step by step. #Background Certainly a beautiful and appropriate background image or graphics works nicely be adding a subtle effect like *parallax effect*. Parallax effect when the background image moves at a different speed than the foreground content while scrolling and the background image smoothly transforms. The trick is to keep the foreground content's height much smaller than the actual viewpoint height. #Scroll Assist or Auto Scroll Again this is very common because most of the webpages features some sort of buttons or icons like 'Top' or 'Back to Top'. This can be done easily be using an anchor element `Auto Scroll`. But this makes the scroll abrupt what we can do to make it more elegant is by adding a simple animation to the click event handler of the desired element. `$('html, body').animate({ scrollTop: $('#scroll_to_id').offset().top }, 1000);` 1000 is nothing but the time period of animation in miliseconds (i.e. 1s). For the entire code and explanation...

See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.

parallaxeffect

Designing a simple Home Page

Join Our Newsletter. No Spam, Only the good stuff.