fullpage.js

问题 I have a fullpage.js site setup here. The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes), for it to be a scrollable section. The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section. Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in

问题 Following on from a solution posted here: Velocity.js/Blast.js starting opacity at 0 I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2. I am also using fullpage.js, so sometimes a text slide might be the first slide, so is it possible to do the same thing on sliding down? If the text slide, with the animation, is also the first slide, to trigger the animation from opacity:0 just as it does

问题 I'm developing a project in AngularJS and I am using the Fullpage.js to scroll the page. So far so good, the problem is as follows: As I have inside pages, must also use the scroll script these pages. But even creating the function as Scope to work on all pages or creating it with different name and starting in each of the FullPage returns the following error: FullPage: Fullpage.js can only be initialized once and you are doing it multiple times ! Does anyone know how can I do so that when I

问题 I have multiple HTML videos on my page, and want to apply this custom video player to them. The thing is, this only works for the first video, and not for the second, third and fourth. I have no idea where to start. I made a fiddle of the current state: JSFiddle My Javascript /* Get Our Elements */ const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progressBar = player.querySelector('

问题 I'm using fullpage.js and the slimscroll.js plugin, which is required to allow scrolling in a section which has content that exceeds the height it's container section. I've noticed that the experience is quite bad on touch devices. Whereas normally you can swipe, release and watch the page still scroll, on a slimscroll div as soon as your finger leaves the touch area, the scrolling stops. So what I'd like to do is disable fullpage.js on mobiles and tablets, but still enable it on desktops. I

问题 I use fullpage.js and I want to change background-color smoothly of body while scrolling. I saw this effect here. This site also use Fullpage.js and I want to add this effect to my site. I create a jsFiddle with fullpage example here. Site with smooth color uses mt-data-slide-bg-color="#f4efec" and some javascript code to fullpage function. This function locates here (link in comments). So but if I add this code to my example it doesn't work. Please help me. 回答1: You can animate colours using

问题 I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect. Sample site : http://www.mi.com/shouhuan/#clock My Code : http://jewel-mahmud.com/demo-site/index.html var slideIndex = 1, sliding = false; $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], scrollingSpeed:1000

问题 I can't quite get my head around this option and how it works, the document provides an explanation but what is an example of this in practice? From docs: normalScrollElementTouchThreshold : (default 5) Defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3 ) 回答1: The option normalScrollElements works quite

问题 I have a page with normal scrolling. There is an anchor on the page that pops open a modal in which I am initializing fullpage.js. This works fine so far, but when the user clicks a close icon, I want the modal window to close and for fullpage.js to pause or stop, so that the fullpage scrolling effect is disabled unless the user clicks the anchor again. I've tried using the destroy method to do this, but fullpage says that it can only be initialized once, so when the user clicks the anchor a

问题 I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. However when trying to change the arrow style: .controlArrow.prev { left: 50px; background: url(left.png); background-repeat: no-repeat; } .controlArrow.next { right: 50px; } It doesn't work, can anyone explain why? 回答1: Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow: .fp-controlArrow.fp-prev { left: 0; border: none; width: 50px; height: 101px;