[Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over

alancarter10

Nuovo Utente
13 Set 2017
12
0
1
53
Salve sto cercando di realizzare una scritta che si estenda creando l'effetto dell'estensione come un adesivo o un "cerotto" mentre si applica.
Detto questo, vorrei sapere se esiste un metodo che allunghi un div contenente un secondo box con la scritta o l'immagine verso destra all'apertura della pagina web. La proprietà da modificare è width che dovrebbe passare da 10px a 400px gradualmente e come ho detto al richiamo della pagina e non al passaggio del mouse o con altre trasformazioni, ma solo allungarsi verso destra di tot px. Grazie anticipatamente dell'aiuto.
P.s. l'immagine e la scritta non deve deformarsi.
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.081
299
83
Ti sposto in JS con il solo html fai ben poco
 

mtt

Nuovo Utente
12 Set 2017
14
0
1
Ciao.
Per modificare elementi grafici sulla pagina dopo un evento (passaggio mouse, pulsante etc) in javascript ho sempre usato
l'sitruzione getElementById('id della div interessata').style...... in questo caso getElementById('id della div interessata').style.width
ovviamente alla div interessata devi dare un id senno' non la trova.
per quanto riguarda l'immagine che vuoi scalare senza che si alterino le proporzioni allora credo che tu debba usare immagini vettoriali e non raster (credo si dica così) come un bmp o un gif o un jpg.
Spero di essere stato utile.
Saluti
 

alancarter10

Nuovo Utente
13 Set 2017
12
0
1
53
Grazie per l'aiuto, questo pomeriggio provo e penso che sia la strada giusta (stavo impazzendo con il solo html/css. P.s. per fare in modo che il ridimensionamento non sia istantaneo ma lento tipo 2/3 secondi, dando l'effetto di un'anta scorrevole di una finestra che si apre come potrei "temporizzarlo?" Scusa se approfito........... ;-) Grazie di nuovo
 

mtt

Nuovo Utente
12 Set 2017
14
0
1
Se non ho capito male vorresti che questo ridimensionamento avvenga 3 secondi dopo la fine del caricamento della pagina.
Dovrebbe essere così:
Codice:
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function(){
document.getElementById('id della div').style.width=valore;},3000);
}, false);
event listener attiva quello che è tra le paretesi alla fine del caricamento della pagina, il setTimeout ritarda di 3 sec quello che è dentro le sue parentesi.

Se invece vorresti che questo ridimensionamento durasse 3 secondi....allora forse è meglio che guardi se cio' è possibile con jquery.
 

alancarter10

Nuovo Utente
13 Set 2017
12
0
1
53
RISOLTO.....
POSTO I TRE FILE CORRETTI (HTML-CSS-JS) divisi per questioni di "pulizia"

File INDE.HTML.-----------------------------------
[ code] <!DOCTYPE html>
<html>
<style>
</style>

<body>

<div id="Titolopagina"></div>
<link rel="stylesheet" href="Titolopagina.css" type="text/css" media="screen" />

<body onLoad="apertura();">
<script src="apertura.js"></script>

<script>
</script>
</body>
</html>
[ /code]
File Titolopagina.css-----------------------------------------
[ code]
#Titolopagina {
top:50px;
left:400px;
width: 100px;
height: 150px;
position:relative;
background-image: url(scritta.jpg);
background-repeat: no-repeat;
background-color:yellow; <!-- serve per capire dove arriva l'apertuta del DIV -->

}
[ /code]


File apertura.js--------------------------------------------
[ code]
function apertura() {
var elem = document.getElementById("Titolopagina");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
}
else {
width++;
elem.style.width = width + '%';
}
}
}
[ /code]
AGGIUNGERE UN'IMMAGINE CON UNA SCRITTA O ALTRO E IL GIOCO E' FATTO--

PER RALLENTARE LA VELOCITA' DI ESTENSIONE DELLA SCRITTA/IMMAGINA SETTARE
setInterval(frame, 10); MAGARI A (frame,30)...

PER RITARDARE L'INGRESSO DELLA SCRITTA ALL'APERTURA DELLA PAGINA
CAMBIARE
<body onLoad="apertura();">
CON
<body onload="setTimeout('apertura()',4000);"> (ritarda di 4 secondi)

Ciao e grazie.
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.081
299
83
@alancarter10
Quando posti del codice devi usare l'apposito tag [ code]......[ /code] come da regolamento del forum, oppure l'opzione codice dalla barra degli strumenti
box inserisci 2.png.JPG
 

alancarter10

Nuovo Utente
13 Set 2017
12
0
1
53
Grazie Otto9due ma tutto quello che serve per far apparire un'immagina con l'effetto di una finestra scorrevole che si apre da sx a dx e quindi far passare da una situazione di "invisibilita' " l'immagine a quella di una totale visibilità l'ho scritto nel post precedente. Non ho usato i tag [ code]......[ /code] come da regolamento del forum perché non sono pratico del Forum.
Quello che mi hai indicato, è un div che si allarga all'aumentare dei caratteri. Io volevo usare un'immagine con una scritta e per questo ho risolto come ho detto.... Grazie lo stesso. Quello che ho postato comunque è un'ottimo effetto per il titolo di una pagina o altro, sempre usando come scritta un'immagine perché la puoi realizzare con infiniti effetti grafici conservando la trasparenza delle immagini PNG
Alla prossima ;-)
 
Ultima modifica: