/
githubmirror
/
fullPage.js
Обзор
Документация
Войти
/
githubmirror
/
fullPage.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
4.0.25
examples/one-section.html
226 строк
15 KB
Alvaro Trigo López
Examples: updating dropdown list
11 апр 2022, 01:09
11 апр 2022, 01:09
9121fde
Код
Авторство
О чём код?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>One single section - fullPage.js</title> <meta name="author" content="Alvaro Trigo Lopez" /> <meta name="description" content="fullPage One single section." /> <meta name="keywords" content="fullpage,One, Single, Section" /> <meta name="Resource-type" content="Document" /> <link rel="stylesheet" type="text/css" href="../dist/fullpage.css" /> <link rel="stylesheet" type="text/css" href="examples.css" /> <style> /* Style for our header texts * --------------------------------------- */ h1{ font-size: 5em; font-family: arial,helvetica; color: #fff; margin:0; padding:40px 0 0 0; } .intro p{ color: #fff; padding:40px 0 0 0; } .wrap{ margin-left: auto; margin-right: auto; width: 980px; position: relative; padding: 20px 0 20px 0; } .wrap h1{ font-size: 2.3em; color: #333; padding: 30px 0 10px 0; } .wrap p{ font-size: 16px; padding: 0 0 10px 0; } .box{ display: block; background: #f2f2f2; border:1px solid #ccc; padding: 20px; margin:20px 0; } /* Centered texts in each section * --------------------------------------- */ .section{ text-align:center; } /* Bottom menu * --------------------------------------- */ #infoMenu li a { color: #000; } </style> <!--[if IE]> <script type="text/javascript"> var console = { log: function() {} }; </script> <![endif]--> </head> <body> <select id="demosMenu"> <option selected>Choose Demo</option> <option id="simple">Simple</option> <option id="custom-arrows">Custom arrows</option> <option id="hide-sections">Hide sections</option> <option id="scroll-after-fullpage">Scroll after fullpage</option> <option id="observer">Observer</option> <option id="jquery-adapter">jQuery adapter</option> <option id="active-slide">Active section and slide</option> <option id="auto-height">Auto height</option> <option id="autoplay-video-and-audio">Autoplay Video and Audio</option> <option id="backgrounds">Background images</option> <option id="backgrounds-fixed">Fixed fullscreen backgrounds</option> <option id="background-video">Background video</option> <option id="callbacks">Callbacks</option> <option id="continuous-horizontal">Continuous horizontal (premium)</option> <option id="continuous-vertical">Continuous vertical</option> <option id="parallax">Parallax (premium)</option> <option id="cards">Cards 3d (premium)</option> <option id="water-effect">Water effect (premium)</option> <option id="drop-effect">Drop effect (premium)</option> <option id="css3">CSS3</option> <option id="drag-and-move">Drag And Move (premium)</option> <option id="easing-css3">Easing CSS</option> <option id="easing-js">Easing JS</option> <option id="fading-effect">Fading Effect (premium)</option> <option id="fixed-headers">Fixed headers</option> <option id="gradient-backgrounds">Gradient backgrounds</option> <option id="interlocked-slides">Interlocked Slides (premium)</option> <option id="looping">Looping</option> <option id="methods">Methods</option> <option id="navigation-vertical">Vertical navigation dots</option> <option id="navigation-horizontal">Horizontal navigation dots</option> <option id="navigation-tooltips">Navigation tooltips</option> <option id="no-anchor">No anchor links</option> <option id="normal-scroll">Normal scrolling</option> <option id="normalScrollElements">Normal scroll elements</option> <option id="offset-sections">Offset sections (premium)</option> <option id="one-section">One single section</option> <option id="reset-sliders">Reset sliders (premium)</option> <option id="responsive-auto-height">Responsive Auto Height</option> <option id="responsive-height">Responsive Height</option> <option id="responsive-width">Responsive Width</option> <option id="responsive-slides">Responsive Slides (premium)</option> <option id="scrollBar">Scroll bar enabled</option> <option id="scroll-horizontally">Scroll horizontally (premium)</option> <option id="scrollOverflow">Scroll inside sections and slides</option> <option id="scrollOverflow-reset">ScrollOverflow Reset (premium)</option> <option id="lazy-load">Lazy load</option> <option id="scrolling-speed">Scrolling speed</option> <option id="trigger-animations">Trigger animations</option> <option id="vue-fullpage">Vue component</option> <option id="react-fullpage">React component</option> <option id="angular-fullpage">Angular component</option> </select> <div id="fullpage"> <div class="section " id="section0"> <div class="slide"> <h1>One single section</h1> </div> <div class="slide"> <h1>And a normal website under it</h1> </div> <div class="slide"> <h1>A great single slider!</h1> </div> </div> </div> <div class="wrap"> <h1>This is like a normal website.</h1> Just place the rest of your page after the fullpage wrapper and use the option `fitToSection:false` and `autoScrolling:false`. And enjoy a great single slider. <script src="https://gist.github.com/alvarotrigo/368e6d6ad3c5c0e98d3c.js"></script> <script src="https://gist.github.com/alvarotrigo/c74366b59ecba2f9c3da.js"></script> <h1> Rest of your site </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla. Donec sed tellus tempor ligula condimentum placerat. Vivamus placerat magna nisi, eu elementum risus imperdiet sit amet. Nunc varius dictum porttitor. Morbi rhoncus magna in quam fringilla fringilla in in odio. Quisque fringilla ante vitae tellus fringilla, condimentum tristique mi pharetra. Aenean ultricies odio at erat facilisis tincidunt. Fusce tempor auctor justo, nec facilisis quam vehicula vel. Aenean non mattis purus, eget lobortis odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam cursus elit nec aliquam consequat. </p> <p> Nullam sem orci, tincidunt non lorem quis, ultricies blandit nisl. Donec eget sollicitudin tortor. Integer ut orci sit amet ipsum porta feugiat sit amet ut nulla. Vestibulum auctor, tortor sed scelerisque consectetur, nisl tellus placerat tortor, non euismod nisi risus vitae ipsum. Morbi a velit purus. Nam euismod porta sapien, sed scelerisque nulla lacinia vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at eleifend ligula, in eleifend sapien. </p> <div class="box"> In elementum nec quam et eleifend. Ut nec erat fermentum, mattis leo non, fringilla tellus. Integer at dui nibh. Etiam facilisis fermentum turpis. Nulla malesuada iaculis nisl, ac accumsan felis pulvinar ut. Proin porttitor nulla libero, vel tristique erat faucibus quis. Aliquam pharetra enim et sapien bibendum, interdum viverra lectus sagittis. Vivamus pharetra, risus quis malesuada interdum, mi mauris dignissim mi, ac hendrerit orci nulla vel felis. Vivamus dapibus, nisi vel viverra tincidunt, ligula nunc sagittis elit, eget lacinia tellus velit et leo. Curabitur a tortor pretium, aliquam justo gravida, commodo ipsum. In fermentum lorem eu tincidunt consequat. Donec nec blandit ipsum, id scelerisque velit. Aenean vel ultrices ligula, at imperdiet dolor. Sed euismod turpis et nibh adipiscing feugiat. Etiam diam leo, sollicitudin eu suscipit non, laoreet sit amet dui. In augue purus, semper in blandit ut, suscipit vehicula tortor. </div> <p> Praesent id varius neque. Nunc risus elit, tincidunt eu nulla vitae, adipiscing porta nibh. Pellentesque dignissim dolor ligula, eu vestibulum justo elementum ac. In a risus ullamcorper, iaculis lectus non, condimentum elit. Pellentesque ac felis nec mauris venenatis elementum. In porttitor mauris sit amet posuere scelerisque. Nunc interdum arcu sit amet libero fermentum, nec consequat risus dignissim. </p> <p> Curabitur dui elit, tristique eget venenatis et, scelerisque mattis arcu. Pellentesque lectus orci, tempus in enim et, condimentum rutrum magna. Mauris nec eros viverra, facilisis nibh ut, sodales urna. Pellentesque nec neque in ipsum imperdiet egestas vitae vel augue. Integer felis eros, dictum at eleifend aliquet, lacinia non neque. Curabitur eget condimentum urna, eget sodales lectus. Maecenas blandit ac neque id elementum. Phasellus ultricies vestibulum elit ut sagittis. Nam ut porta mi. </p> <h1> Rest of your site </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla. Donec sed tellus tempor ligula condimentum placerat. Vivamus placerat magna nisi, eu elementum risus imperdiet sit amet. Nunc varius dictum porttitor. Morbi rhoncus magna in quam fringilla fringilla in in odio. Quisque fringilla ante vitae tellus fringilla, condimentum tristique mi pharetra. Aenean ultricies odio at erat facilisis tincidunt. Fusce tempor auctor justo, nec facilisis quam vehicula vel. Aenean non mattis purus, eget lobortis odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam cursus elit nec aliquam consequat. </p> <p> Nullam sem orci, tincidunt non lorem quis, ultricies blandit nisl. Donec eget sollicitudin tortor. Integer ut orci sit amet ipsum porta feugiat sit amet ut nulla. Vestibulum auctor, tortor sed scelerisque consectetur, nisl tellus placerat tortor, non euismod nisi risus vitae ipsum. Morbi a velit purus. Nam euismod porta sapien, sed scelerisque nulla lacinia vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at eleifend ligula, in eleifend sapien. </p> <p> In elementum nec quam et eleifend. Ut nec erat fermentum, mattis leo non, fringilla tellus. Integer at dui nibh. Etiam facilisis fermentum turpis. Nulla malesuada iaculis nisl, ac accumsan felis pulvinar ut. Proin porttitor nulla libero, vel tristique erat faucibus quis. Aliquam pharetra enim et sapien bibendum, interdum viverra lectus sagittis. Vivamus pharetra, risus quis malesuada interdum, mi mauris dignissim mi, ac hendrerit orci nulla vel felis. Vivamus dapibus, nisi vel viverra tincidunt, ligula nunc sagittis elit, eget lacinia tellus velit et leo. Curabitur a tortor pretium, aliquam justo gravida, commodo ipsum. In fermentum lorem eu tincidunt consequat. Donec nec blandit ipsum, id scelerisque velit. Aenean vel ultrices ligula, at imperdiet dolor. Sed euismod turpis et nibh adipiscing feugiat. Etiam diam leo, sollicitudin eu suscipit non, laoreet sit amet dui. In augue purus, semper in blandit ut, suscipit vehicula tortor. </p> <p> Praesent id varius neque. Nunc risus elit, tincidunt eu nulla vitae, adipiscing porta nibh. Pellentesque dignissim dolor ligula, eu vestibulum justo elementum ac. In a risus ullamcorper, iaculis lectus non, condimentum elit. Pellentesque ac felis nec mauris venenatis elementum. In porttitor mauris sit amet posuere scelerisque. Nunc interdum arcu sit amet libero fermentum, nec consequat risus dignissim. </p> <div class="box"> Curabitur dui elit, tristique eget venenatis et, scelerisque mattis arcu. Pellentesque lectus orci, tempus in enim et, condimentum rutrum magna. Mauris nec eros viverra, facilisis nibh ut, sodales urna. Pellentesque nec neque in ipsum imperdiet egestas vitae vel augue. Integer felis eros, dictum at eleifend aliquet, lacinia non neque. Curabitur eget condimentum urna, eget sodales lectus. Maecenas blandit ac neque id elementum. Phasellus ultricies vestibulum elit ut sagittis. Nam ut porta mi. </div> <h1> Rest of your site </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla. Donec sed tellus tempor ligula condimentum placerat. Vivamus placerat magna nisi, eu elementum risus imperdiet sit amet. Nunc varius dictum porttitor. Morbi rhoncus magna in quam fringilla fringilla in in odio. Quisque fringilla ante vitae tellus fringilla, condimentum tristique mi pharetra. Aenean ultricies odio at erat facilisis tincidunt. Fusce tempor auctor justo, nec facilisis quam vehicula vel. Aenean non mattis purus, eget lobortis odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam cursus elit nec aliquam consequat. </p> <p> Nullam sem orci, tincidunt non lorem quis, ultricies blandit nisl. Donec eget sollicitudin tortor. Integer ut orci sit amet ipsum porta feugiat sit amet ut nulla. Vestibulum auctor, tortor sed scelerisque consectetur, nisl tellus placerat tortor, non euismod nisi risus vitae ipsum. Morbi a velit purus. Nam euismod porta sapien, sed scelerisque nulla lacinia vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at eleifend ligula, in eleifend sapien. </p> <p> In elementum nec quam et eleifend. Ut nec erat fermentum, mattis leo non, fringilla tellus. Integer at dui nibh. Etiam facilisis fermentum turpis. Nulla malesuada iaculis nisl, ac accumsan felis pulvinar ut. Proin porttitor nulla libero, vel tristique erat faucibus quis. Aliquam pharetra enim et sapien bibendum, interdum viverra lectus sagittis. Vivamus pharetra, risus quis malesuada interdum, mi mauris dignissim mi, ac hendrerit orci nulla vel felis. Vivamus dapibus, nisi vel viverra tincidunt, ligula nunc sagittis elit, eget lacinia tellus velit et leo. Curabitur a tortor pretium, aliquam justo gravida, commodo ipsum. In fermentum lorem eu tincidunt consequat. Donec nec blandit ipsum, id scelerisque velit. Aenean vel ultrices ligula, at imperdiet dolor. Sed euismod turpis et nibh adipiscing feugiat. Etiam diam leo, sollicitudin eu suscipit non, laoreet sit amet dui. In augue purus, semper in blandit ut, suscipit vehicula tortor. </p> <p> Praesent id varius neque. Nunc risus elit, tincidunt eu nulla vitae, adipiscing porta nibh. Pellentesque dignissim dolor ligula, eu vestibulum justo elementum ac. In a risus ullamcorper, iaculis lectus non, condimentum elit. Pellentesque ac felis nec mauris venenatis elementum. In porttitor mauris sit amet posuere scelerisque. Nunc interdum arcu sit amet libero fermentum, nec consequat risus dignissim. </p> <p> Curabitur dui elit, tristique eget venenatis et, scelerisque mattis arcu. Pellentesque lectus orci, tempus in enim et, condimentum rutrum magna. Mauris nec eros viverra, facilisis nibh ut, sodales urna. Pellentesque nec neque in ipsum imperdiet egestas vitae vel augue. Integer felis eros, dictum at eleifend aliquet, lacinia non neque. Curabitur eget condimentum urna, eget sodales lectus. Maecenas blandit ac neque id elementum. Phasellus ultricies vestibulum elit ut sagittis. Nam ut porta mi. </p> </div> <script type="text/javascript" src="../dist/fullpage.js"></script> <script type="text/javascript" src="examples.js"></script> <script type="text/javascript"> var myFullpage = new fullpage('#fullpage', { anchors: ['firstPage'], sectionsColor: ['#4A6FB1'], autoScrolling: false, css3: true, fitToSection: false }); </script> </body> </html>