waypoint.js not working in second section - javascript

In my code i want on each section i scroll the elements will visible but which is not happening. In first section it is working perfectly but not in second section,I am actually using the fullpage.js as well.But all is working properly except the waypoint.js at second section
$('.ianimator').waypoint(function() {
$('.ianimator').addClass('animated fadeIn');
},{offset:'90%'});
$('.secmator').waypoint(function() {
$('.secmato').addClass('animated fadeIn');
},{offset:'90%'});
DEMO

If you read the fullPage.js FAQs you'll realise that libraries relying on the scroll event won't work in fullPage.js unless you use the fullPage.js option scrollBar:true or autoScrolling:false.
Personally I would recommend you to make use of fullPage.js state classes or callbacks to achieve those animations. This way you can use any fullPage.js configuration.
Here's a video tutorial I made regarding css3 animations and the use of fullpage.js state classes.

Related

Custom animation between sections by fullpage.js

Is it possible to implement such animation by fullpage.js extension behind sections on scroll (destroyed effect)?
It's not possible at the moment.
The closest you can get is by using the Water Effect extension instead.

CSS animation play only once when section is visible on the screen

I got inspired by this website: https://brittanychiang.com/ especially the animations.
The ones which appear at the header when page is loaded are just typical css animations with delay or something. But when you scroll down and the another sections are visible the animation appears again and only once. Can you do it with pure CSS or you need to include JS?
Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.
Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.

Alternative to Bootstrap Affix

Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.

Trigger function when element in view

I'm using https://github.com/peachananr/onepage-scroll to create a one pager and would like to trigger a function (a modal lightbox) when scrolling to a specific section.
I've tried a few different scripts (appear, waypoint) but so far have come up trumps. Not sure if it's got to do with the fact that onepage scroll isn't actually scrolling but moving the section into the viewpoint.
Any help would be highly appreciated!
You could make use of the callbacks the plugin provides.
Also, if you want to change for a more complete plugin such as fullPage.js, there you have the option scrollBar than when set to true will allow plugins such as waypoint or appear to work as expected.
The reason for it is detailed in fullPage.js FAQs:
Parallax, as well as many other plugins which depends on the
scrolling of the site, listens the scrollTop property of javascript.
fullPage.js doesn't actually scroll the site but it changes the top or
translate3d property of the site. Only when using the fullPage.js
option scrollBar:true or autoScrolling:false it will actually scroll
the site in a way it is accessible for the scrollTop property.
The same principle is applied to onepage-scroll but the difference is that fullPage.js provides a way to deal with it (scrollBar:true) and onepage-scroll doesn't.

full page js slide next section over current

I'm working on a website with the FullPage.JS script.
What I want is that the next section slides over the previous one.
See this example
I tried to make the position fixed in css and changed animation values in the jquery.fullpage.js
It should be something simple but i can't find it.
You can create a similar effect with the backgrounds using the background-position:fixed; property as you can see in the backgroundsFixed.html example in fullPage.js examples folder.
But I think you should better change to pagePiling.js, its brother plugin which allows you to do exactly what you want.

Categories