Streaming live at 10am (PST)

Fading Effect in fullPage.js

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. https://alvarotrigo.com/fullPage/extensions/fading-effect.html#firstPage

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

Someone help me please

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.

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

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

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: https://alvarotrigo.com/fullPage/extensions/fading-effect.html#firstPage

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

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

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.

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

I used https://hello-site.ru/preloader/

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

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

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.