CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Thomas Pereira
Thomas Pereira

Reputation: 239

How to ignore an transition based on JavaScript

I am making an site which you can find here for the moment: http://rekenopjetoekomst.nl/test/test.html

When you scroll down the height of the photo under the menu will decrease. But the arrows that you need to navigate through the slideshow have to disappear also. I am doing that by changing the opacity to 0 with a transition.

But my problem is that when you scroll down and then scroll fast up (a second or something) you will still see the arrows (with an opacity of 0.6 or something). So... What I want is: When the arrows are out of the screen the opacity must be 0 without an transition. And if you scroll back to the photo the arrows have to appear with an transition.

Thanks for all your help!

JavaScript (with only the arrows 1 and 2):

function yScroll(){
    pijl1 = document.getElementById('pijl1');
    pijl2 = document.getElementById('pijl2');
    yPos = window.pageYOffset;

    if(yPos > 100 && yPos < 370){
        pijl1.style.opacity = "0.8";
        pijl2.style.opacity = "0.8";
    } else if(yPos > 370){
        pijl1.style.opacity = "0.0";
        pijl2.style.opacity = "0.0";
    } 
}
var animateInterval = setInterval(yScroll,10);

CSS:

#mainbox #foto #pijl1 {
    transition: opacity 1s ease-in 1.3s;
}
#mainbox #foto #pijl2 {
    transition: opacity 1s ease-in 1.3s;
}

Upvotes: 0

Views: 80

Answers (1)

vals
vals

Reputation: 64164

I would use a tri-state setup.

the first state is the visible (normal) one. The second is the fading state, the opacity is set to 0, and there is a transition on it. The third one is the out state. in this one, we set the opacity to 0, but without delay.

To manage this, we create 3 classes, and asign each one according to the scroll level

demo with extended timings so it is easier to see

function yScroll(){
    ele = document.getElementById('test');
    yPos = window.pageYOffset;

    if(yPos > 200){
        ele.className = "out";
    } else if(yPos > 100){
        ele.className = "fading";
    } else {
        ele.className = "normal";
    } 
}
var animateInterval = setInterval(yScroll,10);
#test {
  height: 50px;
  width: 100px;
  margin-top: 300px;
  background-color: green;
}


.pusher {
  margin: 3000px;
}

.out {
  opacity: 0.1;
  transition: opacity 0.1s;
}

.fading {
  opacity: 0.2;
  transition: opacity 20s;
}

.normal {
  opacity: 1;
  transition: opacity 20s;
}
<div id="test"></div>
<div class="pusher"></div>

Upvotes: 2

Related Questions