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

Discussione in 'Javascript' iniziata da alancarter10, 13 Settembre 2017.

  1. alancarter10

    alancarter10 Nuovo Utente

    Registrato:
    13 Settembre 2017
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 13 Settembre 2017
  2. Max 1

    Max 1 Moderatore Membro dello Staff MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    2.117
    Mi Piace Ricevuti:
    163
    Punteggio:
    63
    Sesso:
    Maschio
    Ti sposto in JS con il solo html fai ben poco
     
  3. mtt

    mtt Nuovo Utente

    Registrato:
    12 Settembre 2017
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    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
     
  4. alancarter10

    alancarter10 Nuovo Utente

    Registrato:
    13 Settembre 2017
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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
     
  5. mtt

    mtt Nuovo Utente

    Registrato:
    12 Settembre 2017
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  6. alancarter10

    alancarter10 Nuovo Utente

    Registrato:
    13 Settembre 2017
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 15 Settembre 2017 alle 18:28
  7. Max 1

    Max 1 Moderatore Membro dello Staff MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    2.117
    Mi Piace Ricevuti:
    163
    Punteggio:
    63
    Sesso:
    Maschio
    @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
     
  8. otto9due

    otto9due Utente Attivo

    Registrato:
    22 Febbraio 2014
    Messaggi:
    433
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    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.
     
  9. alancarter10

    alancarter10 Nuovo Utente

    Registrato:
    13 Settembre 2017
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 15 Settembre 2017 alle 22:15
  10. alancarter10

    alancarter10 Nuovo Utente

    Registrato:
    13 Settembre 2017
    Messaggi:
    5
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Posto il file ZIP con il risultato.
    Grazie a tutti. Saluti.
     

    Files Allegati:

Sto caricando...

Condividi questa Pagina