Streaming live at 10am (PST)

Fading Effect in fullPage.js


#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. 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


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


#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 https://hello-site.ru/preloader/


#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