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

alancarter10 · 13 Set 2017

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.

Max 1 · 13 Set 2017

Ti sposto in JS con il solo html fai ben poco

mtt · 14 Set 2017

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 · 14 Set 2017

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 · 14 Set 2017

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 · 15 Set 2017

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; 

}
[ /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.

Max 1 · 15 Set 2017

@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

otto9due · 15 Set 2017

Provo a darti un altro suggerimento, sempre se ho capito bene quale risultato vuoi raggiungere.
Dai un'occhiata a questo plugin..
https://macarthur.me/typeit/

Saluti G.G.

alancarter10 · 15 Set 2017

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 ;-)

alancarter10 · 15 Set 2017

Posto il file ZIP con il risultato.
Grazie a tutti. Saluti.

Cerca

Cerca

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

alancarter10

Nuovo Utente

Max 1

Super Moderatore

mtt

Nuovo Utente

alancarter10

Nuovo Utente

mtt

Nuovo Utente

alancarter10

Nuovo Utente

Max 1

Super Moderatore

otto9due

Utente Attivo

alancarter10

Nuovo Utente

alancarter10

Nuovo Utente

Allegati

Discussioni simili