Ho provato questo tutorial dalla rivista di web designer con i css3 e javascript.
Tutto funzionante ma qualcosa non mi è chiaro..
Al clic nella finestra del browser dovrebbe eseguire una transizione tra immagini con una dissolvenza (funzionante con Firefox) in uscita e l'entrata dell'immagine succcessiva.
Ecco cosa succede:
al caricamento della pagina appare la prima foto, al clic dalla prima passa alla successiva ma senza effetto dissolvenza. Successivamente al clic, dalla seconda immagine esegue la transizione con la dissolvenza in uscita e così si comporta per tutte le immagini successive e tutti i cicli successivi.
La mia domanda è: perchè l'effetto dissolvenza compare solo dalla seconda transizione in poi, non dovrebbe essere tutto uguale e inoltrer, ci sarebbe qualche modifica da apportare al codice per renderla uniforme?
Ecco il codice
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beautiful Food Photos Slideshow</title>
<script src="Slideshow.js"></script>
<link href="Slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="photo">
<img id="one" >
<img class="transparent" id="two" >
</div>
<div id="description"></div>
</body>
</html>
// JavaScript Document
var photos = [
"images/Pears.jpg",
"images/Salad.jpg",
"images/Cauliflower.jpg"
];
var descriptions = [
"Asian Pears",
"Spinach Salad",
"Romanesque Cauliflower"
];
var current = "one";
var photoIndex = 0;
function init(){
var img = document.getElementById("one");
img.src = photos[photoIndex];
var div = document.getElementById("description");
div.innerHTML = descriptions[photoIndex];
}
window.onload = init;
function transition() {
photoIndex = photoIndex + 1;
if (photoIndex >= photos.length) {
photoIndex = 0;
}
var currentImg = document.getElementById(current);
if (current == "one") {
current = "two";
} else {
current = "one";
}
var newImg = document.getElementById(current);
newImg.src = photos[photoIndex];
var div = document.getElementById("description");
div.innerHTML = descriptions [photoIndex];
currentImg.setAttribute("class", "transparent");
newImg.setAttribute("class", "");
}
window.onclick = transition;
@charset "utf-8";
/* CSS Document */
html,body,div.photo
{ width:100%;
height:100%;
padding:0px;
margin:0px;}
div.photo
{position:relative;}
img
{min-height:100%;
min-width:100%;
width:auto;
height:auto;
position:fixed;
top:0px;
left:0px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
img.transparent
{opacity:0;}
div#description
{position:absolute;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:600%;
font-weight:bold;
color:#FFF;
text-shadow:1px 1px 3px #373737;
left:30px;
bottom:30px;}
13-04-2012 15:52
