Home C C++ Java Python Perl PHP SQL JavaScript Linux Selenium QT Online Test ☰

Home » Forum » x-Forum » Question

Transition not working on MozillaCppBuzz | Forum

Hello, sorry for asking, behehe. I'm a very beginner so that question might seem verry silly.

I want to make the background of my site changing as i scroll through it. Three different pictures, exactly.
Here's what I've done : 

HTML : 
<body id="bg1" onscroll="changeBg()">

JS : 
function changeBg()
{
     if(window.scrollY < 700)
          {document.body.id = "bg1";}
     if(window.scrollY > 700 && window.scrollY < 1850)
          {document.body.id = "bg2";}
     if(window.scrollY > 1850)
          {document.body.id = "bg3";}
}

CSS : 
#bg1
{
     background-image: url("../media/medOri/oriBackground.jpg");
     background-attachment: fixed;
     background-size: cover;
     transition-duration: 1s;
     -moz-transition-duration:1s;
     -webkit-transition-duration: 1s;
}
 
#bg2
{
     background-image: url("../media/medOri/oriBackgroundbis.jpg");
     background-attachment: fixed;
     background-size: cover;
     transition-duration: 1s;
     -moz-transition-duration:1s;
     -webkit-transition-duration: 1s;
}
 
#bg3
{
     background-image: url("../media/medOri/oriBackgroundter.jpg");
     background-attachment: fixed;
     background-size: cover;
     transition-duration: 1s;
     -moz-transition-duration:1s;
     -webkit-transition-duration: 1s;
}



It works perfectly on Chrome : there is a smooth transition and all.
But the transition is brutal on Firefox. It happens, but there is no smooth transition at all. Have i done something wrong?

Posted by Toxtricity 2020-01-06 14:22:57

No Ans Posted

Please login to comment

Log In


Ask New Question