M index.html → index.html

@@ -22,7 +22,8 @@ <![endif]-->
   </head>
   <body onload='OnLoadIndex();'>
       <div class='own-container'>
-        <img id='backgroundImage' class='own-indexBackgroundImage' src='imatges/mainBackground.jpg' />
+        <img id='backgroundImage0' class='own-indexBackgroundImage' src='imatges/mainBackground.jpg' />
+        <img id='backgroundImage1' class='own-indexBackgroundImage opacity0' src='imatges/background/background0.jpg' />
         <div class='own-lang own-whiteText'>
           <a href="#">CAT</a>
           <a href='#'>CAST</a>

M index.js → index.js

@@ -16,8 +16,18 @@
 function OnLoadIndex(){
   OnLoadDefault();
   var numImg=0;
+  var visibleImg=0;
   setInterval(function(){
-    document.getElementById("backgroundImage").src="imatges/background/background"+numImg+".jpg";
+
+    document.getElementById("backgroundImage"+visibleImg).className="own-indexBackgroundImage";
+    if(visibleImg==0){
+      visibleImg=1;
+    }else{
+      visibleImg=0;
+    }
+    document.getElementById("backgroundImage"+visibleImg).className+=" own-opacity0";
+    document.getElementById("backgroundImage"+visibleImg).src="imatges/background/background"+numImg+".jpg";
+
     numImg++;
     if(numImg>9)
     {

M own.css → own.css

@@ -36,6 +36,10 @@ position: fixed;
     left: 0px;
     top: 0px;
 
+    -webkit-transition: opacity 1s ease-in-out;
+    -moz-transition: opacity 1s ease-in-out;
+    -o-transition: opacity 1s ease-in-out;
+    transition: opacity 1s ease-in-out;
   }
 }
 
@@ -48,7 +52,14 @@ position: fixed;
     left: 0px;
     top: 0px;
 
+    -webkit-transition: opacity 1s ease-in-out;
+    -moz-transition: opacity 1s ease-in-out;
+    -o-transition: opacity 1s ease-in-out;
+    transition: opacity 1s ease-in-out;
   }
+}
+.own-opactity0{
+  opacity: 0;
 }
 .own-langIndex{
   text-align: right;