Buongiorno
Vorrei che dopo 2-3 secondi dall'apertura della homepage entrasse una immagine (con link) per restare poi fissa.
Grazie Matteo
Printable View
Buongiorno
Vorrei che dopo 2-3 secondi dall'apertura della homepage entrasse una immagine (con link) per restare poi fissa.
Grazie Matteo
Questa immagine dove deve essere piazzata?Ad intenderci vuoi che si apra una finestra con l'immagine fai questo:
Ma secondo me tu non vuoi quest'effetto, usi Jquery?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>
Altrimenti devi fare così....Però se ti installi fancybox è tutto più bello...Ciao
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...CiauuCodice 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>
http://fractalcosmo.altervista.org/M...inaDefault.php
È possibile farlo direttamente in css3 con le transizioni, senza l'utilizzo di javascript:
Ciao!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 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
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
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...
http://fractalcosmo.altervista.org/M...inaDefault.phpCodice:function visualizzaImmagine(){
setTimeout(function() {
$( "#boxOverlay" ).animate({
height :"toggle"
}, 5000);
}, 3000);
}
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.
Una cosa così?Citazione:
Originalmente inviato da targetwebdesign
https://codepen.io/anon/pen/bppEVb?editors=1100
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
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>
Provalo così (non ho safari con cui testarlo):Citazione:
Originalmente inviato da targetwebdesign
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>
A meno che tu non voglia fare cose elaborate, se è possibile farlo tramite css ti consiglio questi ultimi, ecco perché.Citazione:
Originalmente inviato da targetwebdesign
Ciao!
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 :lol:
http://www.html.it/pag/19470/animazioni-css3/
Grazie per gli esempi, per adesso userò i css.