November 17, 2015

Smooth scrolling full width page

Smooth scrolling full width page

Responsive smooth scrolling full width page. It is done with the help of fullpage jquery.

HTML

<div class="page-container body">
  <div class="section" id="section1">
    <div class="section-content">
      <p><i class="fa fa-home"></i></p>
      <p>Home</p>
    </div>
  </div>
  <div class="section" id="section2">
    <div class="section-content">
      <p><i class="fa fa-user"></i></p>
      <p>About</p>
    </div>
  </div>
  <div class="section" id="section3">
    <div class="section-content">
      <p><i class="fa fa-image"></i></p>
      <p>Portfolio</p>
    </div>
  </div>
  <div class="section" id="section4">
    <div class="section-content">
      <p><i class="fa fa-pencil"></i></p>
      <p>Tutorial</p>
    </div>
  </div>
  <div class="section" id="section5">
    <div class="section-content">
      <p><i class="fa fa-phone"></i></p>
      <p>Contact</p>
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lobster);

.body {
  font-family: 'Lobster', cursive;
}

p {
  margin: 0;
}

.section {
  background-size: cover;
  background-position: center;
}

.section-content {
  text-align: center;
  font-size: 3em;
  color: #fff;
}

#section1 {
  background-color: #FF82A9;
}

#section2 {
  background-color: #7F95D1;
}

#section3 {
  background-color: #F2BB05;
}

#section4 {
  background-color: #26A65B;
}

#section5 {
  background-color: #E35101;
}

jQuery

$(function(){
  $('.page-container').fullpage({
    navigation: true,
    navigationPosition: 'right'
  });
});

Attachments:

I have used external attachments.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css

https//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js
demo

No comments:

Post a Comment

Popular Posts

Views