I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect.
Sample site : http://www.mi.com/shouhuan/#clock
My Code : http://jewel-mahmud.com/demo-site/index.html
var slideIndex = 1,
sliding = false;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed:1000,
css3: true,
onLeave: function(index, nextIndex, direction) {
if(index == 2 && !sliding) {
if(direction == 'down' && slideIndex < 3) {
sliding = true;
$.fn.fullpage.moveSlideRight();
slideIndex++;
return false;
} else if(direction == 'up' && slideIndex > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
slideIndex--;
return false;
}
} else if(sliding) {
return false;
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
}
});
});
These pages talk about adding the fade effect:
Using fade-in effect with fullpage.js slides
How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery
It appears to be mainly a matter using the fullpage.js slide events to trigger jQuery animations.
This jsfiddle seems to do what you want (using sections).
It looks like there's two ways to do this kind of thing and it depends on what you're trying to animate. fullpage.js has two kinds of views built into it, .section and .slide, with slides being children of sections, and they have different callbacks. The examples use slides but you're using sections so I think that's where the confusion is coming in. Converting to a fade effect requires hooking into the right callbacks and applying the correct animations (which are different between sections and slides).
I am using something easy and more efficient to me.
onLeave: function(index, nextIndex, direction) {
if( index == 2 && direction == 'down'){
$('#slide1').fadeOut(700);
$('#slide2').fadeIn(700);
}
if( index == 3 && direction == 'down'){
$('#slide2').fadeOut(700);
$('#slide3').fadeIn(700);
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
},
but the problem is the I cannot fixed the scroll when its sliding.
I tried sir. But I cannot make it adjustment.
Taken from this answer.
Although far from perfect as the defined scrolling speed in fullpage.js won't take effect in here and you have to definen it in the CSS.
Also, it will only work for sections and not horizontal slides.
Just add the following CSS to override the fullpage.js styles.
.section {
text-align: center;
}
.fullpage-wrapper {
width: 100%!important;
transform: none!important;
}
.fp-section {
width: 100%!important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
transition: all .7s ease-in-out;
}
.fp-section.active {
visibility: visible;
opacity: 1;
z-index: 1;
}
Update
It is now possible to do it through a fullpage.js extension.
Related
I am basically trying to change classes of a bootstrap 4 navbar with the following jquery when there is a scroll but this doesnt seem to be working
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".navbar")
.removeClass("navbar-dark")
.fadeOut("fast");
$(".navbar")
.addClass("navbar-light bg-light")
.fadein("slow");
} else {
$(".navbar")
.removeClass("navbar-light bg-light")
.fadeOut("fast");
$(".navbar")
.addClass("navbar-dark")
.fadein("slow");
}
});
You don't need two classes. Only Default styles and a special class.
Don't use jQuery to do animations - Use CSS3 and transition instead
Use jQuery's .toggleClass() Method
Cache your selector Elements! The worst thing you can do is on every scroll-tick query the entire DOM to go search for a .class element/s - that's a too expensive operation.
const $navbar = $('.navbar'); // Cache your elements!!
$(window).on('scroll', function() {
const st = $(window).scrollTop();
$navbar.toggleClass('is-scrolled', st >= 100);
});
body {
margin: 0;
height: 300vh; /* DEMO to force scrollbars */
}
/* DEFAULT STYLE */
.navbar {
position: sticky;
top: 0;
width: 100%;
transition: 0.4s;
background: gold;
}
/* SCROLLED STYLE */
.navbar.is-scrolled {
background: #888;
}
<div class="navbar">NAVBAR</div>Scroll down...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
The .fadeOut() function of jQuery has a duration and a complete parameter. The complete parameter can be a function which is called whenever the fade out is finished. This way you can do something after the fadeOut is finished, like do the fadeIn that you want.
See the example below.
var $navbar = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$navbar
.removeClass("navbar-dark")
.stop(true, true)
.fadeOut("fast", function() {
$navbar
.addClass("navbar-light bg-light")
.fadeIn("slow");
});
} else {
$navbar
.removeClass("navbar-light bg-light")
.stop(true, true)
.fadeOut("fast", function() {
$navbar
.addClass("navbar-dark")
.fadeIn("slow");
});
}
});
But I would encourage to use CSS transitions for this cause since they are way easier to work with and most importantly, more performant than jQuery fade in and out.
Edit
As Roko suggested, you should use the .stop() function to stop any current animation on the element where a fadeIn or fadeOut is running.
I'm working on this site where the product images are being shown with a little "color filtering" feature.
The problem is that both images are visible untill you hover over a color-box, because at that time my Javascript takes over and shows/hides the current image/color (see code in the bottom).
I'm using a plugin called Slimsy to Umbraco 7 which makes the cropUrl's responsive but it doesn't work if I put a display: none on the .categoryImage containers, it must be something within the plugins.
What I need is to NOT use display: none on each .categoryImage container, but somehow hide all the images except the first one so the plugin can determine the width/height/whatever it is it needs.
My javascript:
$(".frameColor").each(function () {
var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
categoryImage.first().show();
if ($(categoryImage).length > 1) {
$(this).on('mouseover', function () {
var color = $(this).data('color').replace('#', '');
$(".frameColor").removeClass("active");
$(this).addClass("active");
$(categoryImage).hide().filter(function () {
return $(this).data('frame-color') === color;
}).show();
});
}
else {
$(this).hide();
}
});
My frame color:
#foreach (var bikeColor in images)
{
string color = bikeColor.GetPropertyValue("frameColor");
string[] colorSplit = color.Split(',');
if (colorSplit.Length == 1)
{
<div class="frameColor" data-color="##color" style="background-color:##colorSplit[0]"></div>
}
else
{
<div class="frameColor" data-color="##color" style="background-image:linear-gradient(-30deg, ##colorSplit[0] 0%, ##colorSplit[0] 50%, ##colorSplit[1] 50%, ##colorSplit[1] 60%);"></div>
}
}
To target all of .frameColor except for the first one, in your $.each() loop, you can do
$(".frameColor:not(:first)").each(function () {});
And to hide them without using display: none; you can use opacity: 0; or visibility: hidden;
By default, menu appears on every page. I want to make the menu not to appear on first page. I did the following:
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 600,
css3: true,
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up'){
$('#menu').css('visibility','hidden');
}
},
afterLoad: function(anchorLink, index){
if (index == 2){
$('#menu').css('visibility','visible');
}
}
Now the menu appears when I scroll to the second page and hides when I scroll to the first page. But in this way the menu is not the part of second page, it just changes visibility depending on position.
I want the following: when it scrolls to the first page, the menu should stay on the second. And conversely, when it scrolls from the first page to the second, the menu should be on the second page.
P.S. Now in html, menu is placed outside the full page wrapper.
P.P.S. The website will have more than two pages and I want to attach menu to the top of the window.
P.P.P.S. I've done what I wanted. But it works bad - http://jsfiddle.net/a3dw6p4w/
I want the following: when it scrolls to the first page, the menu should stay on the second.
Use a fixed position for the menu. That's a thing for CSS, not for jQuery:
#menu{
position:fixed;
top: 30px;
left: 30px;
z-index:999;
}
Here is how you can do it:
Javascript
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 1200,
css3: true,
afterLoad: function(anchorLink, index){
if (index > 1){
$('#menu').fadeTo("slow",1);
}
},
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up') {
$('#menu').fadeTo("slow",0);
}
}
});
});
</script>
It says that if on page load, if you scroll to a section below (index > 1), then the menu will fade in slowly.
Then, if you scroll up from the second section (i.e. to section 1), it will fade out slowly.
I'm just going to build me a website. I thought it would be nice if my header is shrinking a litte bit when I'm scrolling down to 30px. Of course it should enlarge again when I'm scrolling up to the top. And thats my problem. I can not find out how I increase the header again! Here is my jQuery Code for the shrink effect:
$(document).ready(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30) {
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
$("#logoimage").animate({height:40}, 200);
$("#logoimage").delay(20).queue(function() { $(this).css({'margin-top':'20px'});
$(this).dequeue();});
}
})});
I've created a Page on JSFiddle that I can show what i mean: http://jsfiddle.net/Xuryon/s46zzkt2/
I hope somebody knows how to solve that Problem...
This should do it : http://jsfiddle.net/gmdxs42t/
$(document).ready(function() {
var fflag = true;
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 30 && fflag) {
fflag = false; //Will stop re-entry on every px scrolled
$("#header").animate({height:50}, 200);
$("#header").animate({opacity:0.5}, 200);
}
if (top<30 && !fflag){ //Will occur when scroll reached top
fflag=true; //Will enable the above condition entry when top exceeds 30
$("#header").animate({height:100}, 200);
$("#header").animate({opacity:1}, 200);
}
})});
You could simply add a class to the body (or to the #header) and use a css transition for the animations:
http://jsfiddle.net/s46zzkt2/1/
js
if (top > 30) { $('body').addClass('foo'); }
else { $('body').removeClass('foo'); }
css
#header { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.foo #header { height: 50px; }
I have a one page website which makes use of full-screen slides(powered by fullPage.js).
I have this script running to animate some text when the page first loads (the first page is the one with animation)
Im fairly new to JS so I was wondering how I would make it perform the animation every-time the user navigates to the slide?
JS:
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#161616', '#161616'],
anchors: ['', 'Bye']});
$(".test").each(function(i) {
$(this).delay(i*600).animate({ opacity: 1 }, 700)
});
});
</script>
It just animates three spans.
I'd like it to animate them again when I navigate back to the slide. Also how do I get it to set the opacity = 0 when navigated to another slide?(so that it can be reanimated
HTML:
<div class="section active" id="section0">
<h1>?</h1>
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2>
<a onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>
CSS for .test:
.test{
opacity: 0;
}
So here is how I did it. Notice I used fadeOut() to change the opacity, this was because changing the css opacity was unstable sometimes it wouldnt change all the elements.
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['1', '2'],
afterRender: function(){
//For the initial animation, aferLoad does not work.
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
},
afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
//When the first slide is navigated to perform animation.
if(anchorLink == '1'){
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
}
},
onLeave: function(index, direction){
//When navigated away from first slide reset the opacity.
if(index == '1' && direction == 'down'){
$(".test").fadeTo(400,0);
}
}
});
});
</script>