Effetto fade con css

**centro** · 14-09-2010, 07:53

Ciao a tutti,
dovrei fare un effetfo fade di una foto, che sia visibile anche su iphone.
Un effetto fade che si azioni senza andarci soproa con il mouse...

Ho pensato che il css sia l'unica sluzione, anche se leggevo anche qualcosa a riguardo dell'html5.

qualcuno può indicarmi qualche riferimento o tutorial.

grz

**fcaldera** · 14-09-2010, 09:20

se il target è iphone, ipad, safari e chrome potresti usare le transizioni css -webkit proprietarie

non l'ho testato ma se nella tua pagina devi fare un fadein dell'elemento img potresti iniziare a scrivere qualcosa del tipo

codice:

      @-webkit-keyframes fadein {
       from {
         opacity: 0;
       }
       to {
         opacity: 1;
       }
      }

      img {
       -webkit-animation-name: fadein;
       -webkit-animation-duration: 5s;
       -webkit-animation-iteration-count: 1;
       }

**centro** · 14-09-2010, 11:04

grande fcaldera funge...

ma purtroppo solo su chrome e safari...
posso inserire un script per controllare se sono su iphone faccio vedere questo css altrimenti un'altro?

e poi un'altra cosa... posso fare lo scaling dell'immagine in automatico se sono su iphone?
visto sul browser va bene, con iphone la vedo troppo grande?

grazi ancora
Giuseppe

**fcaldera** · 14-09-2010, 11:47

a me risultano che quelle transizioni siano supportate teoricamente anche su iphone e ipad
ma se così non è credo che l'unica alternativa sia javascript. Sposto la discussione nel forum relativo?

**centro** · 14-09-2010, 14:23

no no.. forse mi son spiegato male...
su iphone e ipad funge alla perfezione l'effetto fade che hai postato.

Ma avevo a tal proposito altre due domande a riguardo, che forse ho formulato male

- Ho visto che il css che hai postato non funziona su firefox ed explorer, chiedevo se era possibile inserire nella pagina più css per le varie compatibilità, o se questo deve essere effettuato con un controllo javascript?

- inoltre siccome l'immagine messa nella pagina web risulta troppo grande per iphone, chiedevo se c'è la possibiltà sempre tramite css di fare uno scaling adatto, per una visualizzazione corretta anche su iphone.

grazie ancora

**fcaldera** · 14-09-2010, 16:51

per mozilla e (credo) opera ci sono analoghe proprietà css (-moz-* e -o-*) dai un occhiata alle reference online

per explorer non esistono transizioni css al momento, in quel caso ti conviene caricare solo per quel browser lo stesso effetto in javascript

per lo scaling puoi settare delle dimensioni diverse sulle immagini via css filtrando gli i-Cosi attraverso le media queries sul max-width (fai una ricerca nel forum)

**centro** · 15-09-2010, 16:06

grazie mille!!!
chiaro e gentile
buona serata

**centro** · 17-09-2010, 14:58

Ciao ragazzi...
ritiro fuori questo treadh di qualche giorno fà perchè ancora ci sto lavorando....

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>Untitled Document</title>
<meta name="viewport" content="width=800"/>
<style type="text/css">
<!--
  @-webkit-keyframes bounce  {
       from {
         opacity: 1;
       }
       to {
         opacity: 0;
       }
	    
      }

      #introduzione {
       -webkit-animation-name: bounce ;
       -webkit-animation-duration: 6s;
       -webkit-animation-iteration-count: 1;
	   -webkit-border-radius: 5px;
	   /*
	   max-width: 320px;
	   max-height:319px;
       */
	   }
	   
	   
	   
	   
.centraimg {
	text-align: center;
}


#introduzione { 
position: absolute; 
z-index: 1; 
width: 100%; 
background-color: white; 
height: auto; 

} 

#immagine_sfondo { 

position: absolute; 
z-index: 0; 

float: left; 

} 


-->
</style>
</head>
<body class="centraimg" onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

<div id="immagine_sfondo">
[img]bg.jpg[/img]
</div>


<div id="introduzione">
[img]intro.jpg[/img]
</div>
</body>
</html>

praticamente con lo script che ha suggerito fcaldera riesco tranquillamente ad ottenere una specie di intro per iphone.. cioè un'immagine che fa il fadeout e poi sotto mi ritrovo il sito. (sito che in questo sarebbe tutto nel contenuto del div "immagine_sfondo")
Lo script funziona, ma dopo aver fatto il fadeout ritorna l'immagine intro visibile
c'è un modo per fermare l'aminazione ad una sola volta, senza farla ripetere?

grazie mille

**Georgias** · 02-01-2012, 16:49

Originariamente inviato da fcaldera

codice:

      @-webkit-keyframes fadein {
       from {
         opacity: 0;
       }
       to {
         opacity: 1;
       }
      }

      img {
       -webkit-animation-name: fadein;
       -webkit-animation-duration: 5s;
       -webkit-animation-iteration-count: 1;
       }

fantastico

quello che cercavo, e come faccio a farlo funzionare su IE, FF, etc?

Discussione: Effetto fade con css

Strumenti discussione

Ricerca discussione

Visualizza

Effetto fade con css

Permessi di invio