Fullpage with auto scrolling with text center with middle

stackui
0

Include these Files

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/jquery.fullPage.css">
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/examples.css"></script>
<script src="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/js/scrolloverflow.js"></script>
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/js/jquery.fullPage.js"></script>

You can click to see demo of full page

Click for Demo

You can add your code into this ID #fullpage

You can create new section by using this class.section here is the below code.

 
   <div id="fullpage"> 
    //Section 1//
    <div class="section" id="section0"> 
     <h1>fullPage.js</h1> 
    </div> 
    
    //Section 2//
    <div class="section" id="section1"> 
     <h1>fullPage.js</h1> 
    </div> 
   </div> 
    


You can make also slider from this .slide

Use the Below code for slider

 
   <div class="section" id="section2">
    <div class="slide "><h1>Simple Demo</h1></div>
    <div class="slide active"><h1>Only text</h1></div>
    <div class="slide"><h1>And text</h1></div>
    <div class="slide"><h1>And more text</h1></div>
   </div>
    

You can use this script for full page.

     
      $(document).ready(function() {
       $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', '3rdPage', 'fourthPage'],
        sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C', '#C63D0F'],
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['First page', 'Second page', 'Third', 'Fourth page'],
        responsiveWidth: 900,
        afterResponsive: function(isResponsive){
        }
       });
      });
    
Click here to Download Code Download

Post a Comment

0Comments

Post a Comment (0)
Demos Buy Now