effetto

**targetwebdesign** · 07-03-2016, 12.51.45

Buongiorno
Vorrei che dopo 2-3 secondi dall'apertura della homepage entrasse una immagine (con link) per restare poi fissa.
Grazie Matteo

08-03-2016, 10.54.33

Questa immagine dove deve essere piazzata?Ad intenderci vuoi che si apra una finestra con l'immagine fai questo:

Codice HTML:

<!DOCTYPE html>
<html lang="it">
	<head>	
		   
	</head>

	<body onload="visualizzaImmagine()">
        </body>

</html>

<script>
  
   function visualizzaImmagine(){
    	setTimeout(function(){

    		 var url='immagini/nomeImmagine.JPG'; 
		 var finestra = window.open("", "", "width=800, height=800");
		 finestra.open(url,'_self');

    		}, 3000);
   }	
  
</script>

Ma secondo me tu non vuoi quest'effetto, usi Jquery?

08-03-2016, 11.55.06

Altrimenti devi fare così....Però se ti installi fancybox è tutto più bello...Ciao

Codice HTML:

<!DOCTYPE html>
<html lang="it">
	<head>	
		   
	</head>

	<body onload="visualizzaImmagine()">	
		
        <div id="boxOverlay" style="display:none">		
	<div id="lightbox">
	    <div id="content">
	        <img src="immagini/nomeImmagine.JPG" />
	    </div>
	</div>		
</div>
</body>
</html>

<script type="text/javascript"> 	
  
   function visualizzaImmagine(){
    	setTimeout(function(){
		     document.getElementById('boxOverlay').style.display='';		
    		}, 3000);
   }	  
  
</script>

<style type="text/css">

	#lightbox img {
	    box-shadow:0 0 25px #111;
	    -webkit-box-shadow:0 0 25px #111;
	    -moz-box-shadow:0 0 25px #111;
	    max-width:940px;
	}	
	
</style>

Ti ho messo l'effetto online così vedi come viene....Carino, però se usi fancybox puoi fare l'overlay più bello, va behh lo puoi fare anche con i css però ci devi scancherare tu, fancybox è già fatto...Ciauu

http://fractalcosmo.altervista.org/M...inaDefault.php

**alemoppo** · 08-03-2016, 12.36.55

È possibile farlo direttamente in css3 con le transizioni, senza l'utilizzo di javascript:

Codice HTML:

<!doctype html>
<html>
	<head>
		<title> esempio </title>
		<style>
		.ritardata
		{
			opacity:0;
			-moz-animation: animazione 0s linear 2s forwards; /* Firefox */
			-webkit-animation: animazione 0s linear 2s forwards; /* Safari and Chrome */
			-o-animation: animazione 0s linear 2s forwards; /* Opera */
			animation: animazione 0s linear 2s forwards;
		}
		@keyframes animazione {
			to {
				opacity:1;
			}
		}
		@-webkit-keyframes animazione {
			to {
				opacity:1;
			}
		}
		</style>
	</head>
	<body>
		<img src="http://www.nextgen-gallery.com/wp-content/uploads/2008/12/abend.jpg" class='ritardata'>
	</body>
</html>

Ciao!

08-03-2016, 16.15.20

Ciao Alemoppo, ehh ma infatti i CSS hanno una grande potenzialità, però mi sono accorto che prima dei tre secondi occupa lo spazio dell'immagine senza però farla vedere, cioè prima dei tre secondi si vede lo spazio ingrandito senza immagine e dopo tre secondi compare l'immagine in quello spazio lì...Non dovrebbe occupare riassestarsi dinamicamente lo spazio?Ma io non lavoro molto con i css, i css veramente per hobby...Ciau

**targetwebdesign** · 08-03-2016, 17.15.37

La mia idea è di far entrare il logo di un "social" dopo 2-3 secondi dall'apertura della home dall'alto sinistra verso il centro sinistra lentamente.
Grazie Matteo

08-03-2016, 17.42.35

Ehh io userei Jquery....Tu lo usi?
Oppure chiedi ad Alemoppo che farebbe con i CSS :) Si può fare un pò come vuoi...con javascript fai quello che ti ho messo io ma metti l'animazione da sinistra verso il centro, altrimenti fai con i css, si può fare anche con i css animate, ma chiedi ad Alemoppo ;)
Ciao

PS:Guarda adesso come è venuto...ho solo messo l'animation con Jquery
la funzione cambia così...Tu farai da sinistra verso il centro...

Codice:

function visualizzaImmagine(){
	
    setTimeout(function() {
			 $( "#boxOverlay" ).animate({
			height :"toggle"
			}, 5000);
   
    }, 3000);
}

http://fractalcosmo.altervista.org/M...inaDefault.php

08-03-2016, 20.52.14

Ciao Karl ,Alemoppo, potete postare il codice, per favore, di come si farebbe con i css? ovviamente lo spazio del div deve essere a zero prima dell'animazione e poi deve occupare lo spazio dinamicamente, come si vede dal mio sito...Ciao grazie della risposta.

**karl94** · 08-03-2016, 21.21.25

Originalmente inviato da targetwebdesign

La mia idea è di far entrare il logo di un "social" dopo 2-3 secondi dall'apertura della home dall'alto sinistra verso il centro sinistra lentamente.

Una cosa così?
https://codepen.io/anon/pen/bppEVb?editors=1100

**targetwebdesign** · 09-03-2016, 10.10.21

Grazie karl94, questo è proprio quello che pensavo, ho notato però che non funziona con Safari (si può correggere?).
Mi piacerebbe se possibile vedere questa azione usando Jquery.

Grazie a fractalcosmo e alemoppo

09-03-2016, 10.43.29

Io quando devo caxxeggiare mi diverto a fare queste cose :) Ho fatto una modifica ti posto il codice, ciao alla prox..

Ps:Se vuoi fare da top at bottom invece di moveP left è moveP top...

Qui l'effetto aggiornato....

http://fractalcosmo.altervista.org/M...inaDefault.php

Codice HTML:

<!DOCTYPE html>
<html lang="it">
	<head>	   
	</head>

	<body onload="visualizzaImmagine()">
	
        <div id="boxOverlay" style="display:none">		
		<div align="center" id="lightbox">
		    <div id="content">
		        <img src="immagini/nomeImmagine.jpg" />
		    </div>
		</div>	
		</div><br><br>
        
        <div id="prova"><p id="moveP"><b>FractalCosmo</b></p></div>

        </body>

<script type="text/javascript">  
  
$(document).ready(function() {
	setInterval(function(){
        $("#moveP").delay(1000).animate({
            left : '40%',
        }, 3000); 	
	},3000);
});


function visualizzaImmagine(){

	setTimeout(function() {	
	 	$( "#boxOverlay" ).animate({
			height: "toggle",
		},5000);
	}, 3000);
}
  
</script>

<style type="text/css">

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}	
	
 #moveP{
        color: #000000;
        background-color: #BCE8F1;;
        width: 100px;
        height: 20px;
        position: relative;
        border-width: 2px;
        border: 1px solid #000000;
        text-align: center;
        box-shadow: 5px 5px 2px #888888;
    }	
 	
</style>

**alemoppo** · 09-03-2016, 15.58.49

Originalmente inviato da targetwebdesign

Grazie karl94, questo è proprio quello che pensavo, ho notato però che non funziona con Safari (si può correggere?).

Provalo così (non ho safari con cui testarlo):

Codice HTML:

<!doctype html>
<html>
	<head>
		<title> esempio </title>
		<style>
		#social{
		  width: 30px;
		  height: 30px;
		  background: black;
		  position: fixed;
		  left: 0;
		  top: -30px;
		  margin-top: -15px;
		  -webkit-animation: social-animation 10s 2s both;
		  animation: social-animation 10s 2s both;
		}

		@-webkit-keyframes social-animation{
		  to {
			top: 50%;
		  }
		}
		@keyframes social-animation{
		  to {
			top: 50%;
		  }
		}
		</style>
	</head>
	<body>
		<div id="social"></div>
	</body>
</html>

Originalmente inviato da targetwebdesign

Mi piacerebbe se possibile vedere questa azione usando Jquery.

A meno che tu non voglia fare cose elaborate, se è possibile farlo tramite css ti consiglio questi ultimi, ecco perché.

Ciao!

09-03-2016, 17.55.23

Vantaggi, il linguaggio con cui i CSS vengono processati è C++ il linguaggio con cui viene processata l'animazione Javascript/Jquery è Javascript, la velocità di elaborazione di 1000 animazioni(non nel nostro caso) ovviamente processate da un linguaggio server side che da un linguaggio client, behh non c'è paragone.
Svantaggi IE9 non supporta i CSS3 quindi chiunque guardi il sito, come me, dal lavoro con un browser IE su windows7 professional che non sia uno degli ultimi, e questo nelle ditte è all'ordine del giorno non vedranno le animazioni mentre supportano tranquillamente Javascript.
Conclusioni, se necessitiamo di fare tante animazioni e pensiamo che i browser che guarderanno il nostro sito sono moderni facciamo con i CSS, se dobbiamo fare una comparsa di un div e ci interessa la sicurezza che sia visibile da tutti o comunque la stramaggioranza e non ci preoccupano i millisecondi del processo dell'animazione usiamo Javascript.
Ai posteri l'ardua sentenza

http://www.html.it/pag/19470/animazioni-css3/

**targetwebdesign** · 10-03-2016, 23.26.03

Grazie per gli esempi, per adesso userò i css.

Discussione: effetto

LinkBack

Strumenti discussione

Display

effetto

Regole di scrittura