[Css Exo 54] Fullpage.js

Introduction


Le canevas de base pour créer de simples sites scrollables.

Ou trouver ?


Taper Fullpage.js dans Google.

Un exemple ?


 

Cliquer ici

Code :


 


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="bower_components/fullpage.js/dist/jquery.fullpage.css" />
	<script src="bower_components/jquery/dist/jquery.min.js"></script>

	<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
	<!-- <script src="vendors/jquery.easings.min.js"></script>
	 -->
	<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
	<!-- <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> -->
	<script type="text/javascript" src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
	<link rel="stylesheet" type="text/css" href="example3.css?v=3" />
	<script src="jquery.easings.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#fdeadc', '#f9c8ac', '#fdeadc', 'whitesmoke', '#f9c8ac'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
				menu: '#menu',
				css3: true,
				scrollingSpeed: 500
			});

			$('#showExamples').click(function(e){
				e.stopPropagation();
				e.preventDefault();
				$('#examplesList').toggle();
			});

			$('html').click(function(){
				$('#examplesList').hide();
			});
		});
	</script>
</head>


<body>

<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Première section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Deuxième Section</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Troisième section</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">4ème</a></li>
</ul>


<div id="fullpage">

    <div class="section active" id="section0">
        <h1>fullPage.js</h1>
        <h2>Create Beautiful Fullscreen Scrolling Websites</h2>
       

    </div>
    <div class="section" id="section1">
        <div class="slide active">
            <div class="intro">
                <h1>Create Sliders</h1>
                <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
              
            </div>

        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Simple</h1>
                <p>Easy to use. Configurable and customizable.</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Cool</h1>
                <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
               
                <h1>Compatible</h1>
                <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Easy to use plugin</h1>
            <p>HTML markup example to define 4 sections.</p>
           
        </div>
    </div>
    <div class="section" id="section3">
        <div class="intro">
            <h1>Working On Tablets</h1>
            <p>
                Designed to fit to different screen sizes as well as tablet and mobile devices.
                <br /><br /><br /><br /><br /><br />
            </p>
        </div>
      
    </div>
</div>

<div id="infoMenu">
    <ul>
        <li><a href="https://goo.gl/HuFudq">Wordpress theme</a></li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js/archive/master.zip">Download</a></li>
        <li>
            <a href="#" id="showExamples">Examples</a>
            <div id="examplesList">
                <div class="column">
                    <h3>Navigation</h3>
                    <ul>
                    <li><a href="examples/scrollBar.html">Scroll Bar Enabled</a></li>
                    <li><a href="examples/normalScroll.html">Normal scrolling</a></li>
                    <li><a href="examples/continuous.html">Continuous vertical</a></li>
                    <li><a href="examples/noAnchor.html">Without anchor links (same URL)</a></li>
                    <li><a href="examples/navigationV.html">Vertical navigation dots</a></li>
                    <li><a href="examples/navigationH.html">Horizontal navigation dots</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Design</h3>
                    <ul>
                        <li><a href="examples/responsive.html">Responsive</a></li>
                        <li><a href="examples/backgrounds.html">Full backgrounds</a></li>
                        <li><a href="examples/videoBackground.html">Full background videos</a></li>
                        <li><a href="examples/autoHeight.html">Auto-height sections</a></li>
                        <li><a href="examples/gradientBackgrounds.html">Gradient backgrounds</a></li>
                        <li><a href="examples/scrolling.html">Scrolling inside sections and slides</a></li>
                        <li><a href="examples/fixedHeaders.html">Adding fixed header and footer</a></li>
                        <li><a href="examples/oneSection.html">One single section</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Other</h3>
                    <ul>
                        <li><a href="examples/apple.html">Animations on scrolling</a></li>
                        <li><a href="examples/callbacks.html">Callbacks</a></li>
                        <li><a href="examples/methods.html">Functions and methods</a></li>
                    </ul>
                </div>
            </div>

        </li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js#fullpagejs">Documentation</a></li>
        <li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
    </ul>
</div>
</body>






	

Publicités