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

alancarter10

Nuovo Utente
13 Set 2017
12
0
1
57
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.449
338
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
57
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
57
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.449
338
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
57
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:
Discussioni simili
Autore Titolo Forum Risposte Data
F Creare elementi html con javascript Javascript 3
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
K [Javascript] [HTML] Invertire colori alternati in tabella Javascript 3
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
M [Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone Javascript 1
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 13
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13
A eseguire codice html da funzione javascript Javascript 2
P text/ javascript in html Javascript 3

Discussioni simili