fullpage.js | 易学教程

jQuery全屏滚动插件FullPage.js中文API文档

阅读更多关于 jQuery全屏滚动插件FullPage.js中文API文档

现在有很多网站都做了全屏滚动的特效，效果也很好看，今天就给大家说说fullPage.js的使用方法和设置。简介 fullPage.js是一个基于<span class="tag-span"> jQuery </span>的全屏滚动<span class="tag-span"> 插件 </span>，它能够很方便、很轻松的制作出全屏网站主要功能支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等兼容性 fullPage.js 支持 IE8+ 及其他现代浏览器。使用方法引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.fullPage.js"></script> HTML结构 <div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏</div> <div

Fade transition in fullpage.js

阅读更多关于 Fade transition in fullpage.js

问题 I want to use fullpage for makeing pesonal site.How can i replace fade transition instead of slide effect for changing between to section? Fullpage.js demo: http://alvarotrigo.com/fullPage 回答1: you have to override the fullpage transitions with below css, Let me know if works .fullpage-wrapper { width: 100%!important; transform: none!important; } .fp-section { width: 100%!important; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: 0; transition: all .7s ease-in

Fade transition in fullpage.js

阅读更多关于 Fade transition in fullpage.js

jQuery windows scroll event not working in fullpage.js

阅读更多关于 jQuery windows scroll event not working in fullpage.js

问题 I've created a single page with each page is a full page. I'm using jQuery library fullpage.js to do that. My problem is: I want to change the CSS when the scroll event is active. At Second Slide and Four Slide I want to change the position of 'nav.nav-next' from 35% to 65% to straight in the line. When I scroll the page it doesn't do anything. Will be my JS code apply with Four Slide ? Currently, my JS code like this: var $navscroll = $('nav.nav-next'); $(document).scroll(function() { alert(

Block scroll on Modal open

阅读更多关于 Block scroll on Modal open

问题 I'm working on this website, (Built using Fullpage.js plugin). In the first section I have a modal window (by clicking on the orange + symbol). As you can see, if you scroll with the mouse when the Modal is open, you can scroll to the next page. How can I block this? I need to make it scrollable ONLY when you close the Modal. PS: I am using Wordpress if this could help... EDIT: i tried this JS <script type="text/javascript"> $(document).on('click', '.ts-awesome-plus', function() { $.fn

fullpage.js how to create slide anchors and scroll to them?

阅读更多关于 fullpage.js how to create slide anchors and scroll to them?

问题 Using fullpage.js, how can I create anchors for slides as oppose to section anchors that are defined in the options.anchors? The documentation says to use data-anchors but its not doing anything with the following setup. The <a> links just works normally by jumping to the <div> with the id and there is no scrolling. $(document).ready(function() { $('#fullpage').fullpage(); // initialization }); <div id="fullpage"> <div class="section"> <div id="slide1" class="slide" data-anchor="slide1"

Dynamically making an element fixed (header) in fullpage.js

阅读更多关于 Dynamically making an element fixed (header) in fullpage.js

问题 I'm building a page in fullpage.js. On the first slide is an image that consumes 90% of the height of the viewport. The other 10% is a navigation bar at the below the image. The image below demonstrates it. As I scroll to the next slide, I want the navigation bar to become a fixed header for the remainder of the slides. I tried making the element fixed once it's offset().top value is 0 against $(window).top() using jQuery. This did not work for me. $(window).scroll(function () { var nav = $('

How can I have one background for all slides in fullPage.js?

阅读更多关于 How can I have one background for all slides in fullPage.js?

问题 I am trying to achieve something similar to this https://neonunicorns.com/html/noise/ The example above is using fullPage.js . Notice how the background image stays the same as you navigate to different sections. I searched for examples and checked the plugin's documentation but couldn't find anything about it. At the moment, all I can is add the same bg img to all the slides but when you're sliding through the slides, you can clear see the background images being changed. I tried creating a

fullpage.js horizontal slider dots with tooltips

阅读更多关于 fullpage.js horizontal slider dots with tooltips

问题 I'm playing around with fullpage.js and would like to use the built-in horizontal slider which works like a charm. What I am missing is the possibility to show a tooltip on each active dot (and when hovering them) as it does on the vertical section menu. I found a brief guide to realize this feature in following question, comment from jfoutch at the very end: horizontal slider using full page.js. I don't know how to use the jQuery.text() method or rather where to start exactly. Any help is

With Fullpage.js, can y-position inside sections be reported during scrollOverflow scrolling? (using iscroll-probe)

阅读更多关于 With Fullpage.js, can y-position inside sections be reported during scrollOverflow scrolling? (using iscroll-probe)

问题 I'm using the latest version of fullpage.js with the scrollOverflow option set to true. Like this example... http://alvarotrigo.com/fullPage/examples/scrolling.html Fullpage.js uses iscroll.js for this option, and I have included the "probe" version of iscroll. Like this example... http://lab.cubiq.org/iscroll5/demos/probe/ Can iscroll-probe report the y position of whichever fullpage "section" is currently being scrolled ? 回答1: It is indeed possible. Although the iScroll library has some