Comments (9)
+1 ... it would be good to see a sample
from fullpage.js.
Update March 2017
There's now a parallax extension to create parallax effects!
Original answer
It shouldn't be a problem. You can add the needed jquery in the ´afterRender´ event.
What is the problem you are facing?
from fullpage.js.
Update March 2017
There's now a parallax extension to create parallax effects!
Original answer
Here you have an example using fullpage.js with paralax:
http://www.saltaboombox.com.ar/
from fullpage.js.
I'm actually trying to put a parallax in slides,
i found this https://github.com/darsain/sly/wiki/Parallax,
since you can input the scroll source, maybe there is a way to make it work, i don’t really know right now.
Hope someone find a way through this :)
from fullpage.js.
I think this site's paralax has to do more with GASP & their own hand-written code than fullPage.js.
Seems some people expect fullPage to be a feature-rich 'turn-key' solution for all their paralax needs. But fullPage is just a simple slideshow maker, with extras that you can expand upon with the user's hard work.
from fullpage.js.
I've just found something interesting,
since fullpage.js uses slimscroll (there is no good doc about).
I saw on slimscroll source it binds the event slimscrolling, there is also slimscroll (for bottom and top)
So you can use for your parallax code :
$('#fullpage').fullpage({
...
scrollOverflow: true,
...
});
<div id="Sbiographie" class="section">
<h3>my section</h3>
</div>
// On scroll event
$('#Sbiographie').bind('slimscrolling', function(e, pos) {
console.log(e,"Scrollbar at "+pos+"px");
});
// Top and bottom event
$('#Sbiographie').bind('slimscroll', function(e, pos) {
console.log("Reached " + pos");
});
see http://rocha.la/jQuery-slimScroll.
Hope this helps somebody (it would be nice to add to the fullpage.js doc since it uses slimscroll plugin).
EDIT: It would also be nice to have access easily to slimscroll configuration options (like wheelStep for example) :)
from fullpage.js.
Now from version 2.4.4 you can combine fullPage.js with any parallax plugin if you use the option scrollBar:true
as you can see in this demo.
scrollBar: (default false). Determines whether to use scrol bar for the site or not. In case of using scroll bar, the autoScrolling functionallity will still working as expected. The user will also be free to scroll the site with the scroll bar and fullPage.js will fit the section in the screen when scrolling finishes.
This way the plugin will really perform the scroll of the site as all these kind of parallax techniques expect.
from fullpage.js.
Is this to say that using css based parallax is not possible?
from fullpage.js.
There's now a parallax extension to create parallax effects!
from fullpage.js.
Related Issues (20)
- site purchase incompatible files HOT 2
- Continous scrolling HOT 11
- normalScrollElements issue HOT 1
- Remove "Made with Fullpage.js" from website HOT 2
- scrollOverflow overscroll behavior HOT 2
- How to do multiple full pages in webflow? HOT 6
- Internal linking not working in webflow page that use fullpage.js HOT 4
- swipe down event over youtube player HOT 8
- Using fullpage.js with Divi HOT 1
- iPad Scrolling adjusting to section when using autoScrolling:false HOT 11
- when autoScrolling is false and fitToSection is false, does the normalScrollElements is ignored? HOT 2
- Vertical fullpage HOT 3
- The slides are jlittering ( moving to previous or next slide, even without scrolling) HOT 1
- making fullpage.js buttons more responsive HOT 1
- Keyboard navigation broken after calling destroy + init
- normal scrolling vs fullpage scrolling and the address bar HOT 1
- URL access with slide anchors won't slide to correct slide on mobile HOT 3
- Is there a way to change horizontal scrolling to vertical? HOT 1
- Fixed elements within fullpage.js selected sections HOT 1
- Using fadingEffect on isolated sections HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fullpage.js.