Fading Effect in fullPage.js

Design help Custom code
1

I added the necessary code fullPage.js from GitHub to my site. I want to have a Fading Effect for smooth mixing of slides with scrolls. Fading Effect Extension - fullPage.js

But this effect not work. :disappointed_relieved:

Please, look my project in webflow and tell me, where I did wrong https://preview.webflow.com/preview/2017?preview=07dc4278dd70a178b7c02d7384c4d1d9

1 Like
2

Someone help me please

3

You may want to check what was discussed in this thread here to make sure you didn’t miss something along the way.

For reference, this is the implemented test website that @EvanJones was able to come up with.

4

I don’t see any fullpage script in your project: http://2017.webflow.io

5

Sorry, I just don’t post changes on the website
He added. He works. But not working in particular Fading Effect

6

I have this code Inside <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css">

And this code before </body>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script> $(document).ready(function() { $('#fullpage').fullpage({
    
    		slidesNavigation: true,
        fadingEffect: true,
        
        });
      
});</script>

Result this: http://2017.webflow.io/

But not this: Fading Effect Extension - fullPage.js

7

There is a link on that page to download the extension, did you try to get it and put it in your project?

8

Hi @Barsik,

first of all really great design. I like the use of fullpage.js in this project. This makes the site more comfortable to read in contrast through the slider.

Can you please tell me how you did the preloader-animation?

Best
Maurice

9

I got it!!!

I just added some code before </body>

<style type="text/css">
.fullpage-wrapper {
	width: 100%!important;
	transform: none!important;
}

.fp-section {
	width: 100%!important;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	transition: all .7s ease-in-out;
}

.fp-section.active {
	visibility: visible;
	opacity: 1;
}
  
  fp-slidesContainer {
	width: 100%!important;
	transform: none!important;
}

.fp-slide {
	width: 100%!important;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	opacity: 0;
	transition: all .7s ease-in-out;
}

.fp-slide.active {
	visibility: visible;
	opacity: 1;
}
</style>

But now it remains to create the show of sections in a circle. That is, when I am leaf through to the last section, after him must be again first section.

10

Dear @Maurice, I’m glad that you like the site

I used Прелоадер для сайта на javascript

11

Thanks for the fast reply @Barsik. This library looks similar to pace.js, but can you switch the loading icon with your logo for example?

Best
Maurice

12

I haven’t tried, but I think it can be done

13

Did you purchase the extension?
Because otherwise the file you get on the example page you linked is limited and won’t work in any other site.

Once you get the right file you just have to include it the same way you include fullpage.js script.

Then use the fadingEffect option and the fadingEffectKey one.

This assures you that:

  • Your fading effect will keep working after any fullPage.js update. (important to fix fullpage.js bugs)
  • You can configure scrollingSpeed from the fullpage.js options
  • You can get support for it.