Visualizzazione risultati 1 fino 5 di 5

Discussione: Centrare il contenuto della pagina sotto uno sfondo generato da script

  1. #1
    Data registrazione
    07-09-2016
    Residenza
    Abruzzo
    Messaggi
    26

    Lightbulb Centrare il contenuto della pagina sotto uno sfondo generato da script

    Salve,
    mi servirebbe aiuto per un problema che non riesco a risolvere. In pratica ho "installato" sulla homepage del mio sito questo script che serve per simulare l'effetto matrix come sfondo. Vorrei aiuto per riuscire a capire come centrare la parte effettiva del sito, quindi quella che viene visualizzata sopra l'effetto matrix. Ora ho semplicemente cambiato bottom le caratteristiche di #main (bottom e left) nel css, in modo da centrarlo sul mio monitor 27 pollici. Qualche suggerimento su come adattare tutto il contenuto della pagina ad ogni monitor diverso?
    Grazie in anticipo per l'aiuto.

    Ecco il link alla homepage:
    http://iis2016delcampogiuseppe.altervista.org/

    La parte HTML interessata è la seguente:

    Codice:
     <canvas id="c"></canvas>
          <span id ="main">
    
            ------
            pagina html con tutto il codice relativo
            ------
    
          </span>
          <script src="FunzioniIndex/matrix.js"></script>



    L'ultimo script è quello che genera l'effetto, ed è il seguente:
    Codice:
            // geting canvas by id c
            var c = document.getElementById("c");
            var ctx = c.getContext("2d");
    
            //making the canvas full screen
            c.height = window.innerHeight;
            c.width = window.innerWidth;
    
            //chinese characters - taken from the unicode charset
            var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
            //converting the string into an array of single characters
            matrix = matrix.split("");
    
            var font_size = 10;
            var columns = c.width / font_size; //number of columns for the rain
            //an array of drops - one per column
            var drops = [];
            //x below is the x coordinate
            //1 = y co-ordinate of the drop(same for every drop initially)
            for(var x = 0; x < columns; x++)
                drops[x] = 1; 
    
            //drawing the characters
            function draw()
            {
                //Black BG for the canvas
                //translucent BG to show trail
                ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
                ctx.fillRect(0, 0, c.width, c.height);
    
                ctx.fillStyle = "#0F0"; //green text
                ctx.font = font_size + "px arial";
                //looping over drops
                for( var i = 0; i < drops.length; i++ )
                {
                    //a random chinese character to print
                    var text = matrix[ Math.floor( Math.random() * matrix.length ) ];
                    //x = i*font_size, y = value of drops[i]*font_size
                    ctx.fillText(text, i * font_size, drops[i] * font_size);
    
                    //sending the drop back to the top randomly after it has crossed the screen
                    //adding a randomness to the reset to make the drops scattered on the Y axis
                    if( drops[i] * font_size > c.height && Math.random() > 0.975 )
                        drops[i] = 0;
    
                    //incrementing Y coordinate
                    drops[i]++;
                }
            }
    
            setInterval( draw, 35 );


    Il CSS è il seguente:

    Codice:
                 *{
                    margin: 0;
                    padding: 0;
                }
                
                /* Page settings */
                html {
                    width: 100%;
                    height: 100%;
                    background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
                    overflow-x: hidden;
                    overflow-y: hidden;
                }
                body {
                    text-align:center;
                    display:table;
                    background: black;
                    width: 100%;
                    height: 100%;
                    overflow-x: hidden;
                    overflow-y: hidden;
                    align-items: center;
                }
                canvas {
                display:block;
                }
                #main {
                    position: absolute;
                    bottom: 150px;
                    left: 660px;            // bottom e left sono le parti che ho modificato per spostare momentaneamente la homepage e farla 
                                                             sembrare centrata
                    z-index : 1;
                    vertical-align: middle;
                }
    Ultima modifica di IIS2016DelCampoGiuseppe : 08-09-2018 alle ore 14.56.00

  2. #2
    Data registrazione
    07-09-2016
    Residenza
    Abruzzo
    Messaggi
    26

    Predefinito

    Cerco di aggiungere qualche dettaglio visto che per ora nessuno ha ancora postato nulla..
    in pratica il background è come se fosse una cosa a parte dallo "sfondo" generale della pagina, diciamo come un elemento di essa. Infatti per posizionare sopra il contenuto effettivo della homepage, ho dovuto semplicemente racchiudere tutto in uno span identificato dall'id "main" in modo da farlo apparire sopra l'effetto background. Per fare questo ho impostato bottom e left su questo span in modo da centrarlo apparentemente sulla mia risoluzione, quindi ho spostato in pixel il contenuto della pagina.
    Per spiegarmi meglio, quindi l'effetto del background non è un vero e proprio background come sarebbe un body background=" .. " ma lo considera più un elemento della pagina.. come posso posizionare centrata la mia homepage sopra questo background?
    Prima utilizzavo un semplicissimo align center.. qualche suggerimento ragazzi?

  3. #3
    sylette non è connesso Neofita
    Data registrazione
    24-02-2011
    Messaggi
    1

    Predefinito

    Citazione Originalmente inviato da IIS2016DelCampoGiuseppe Visualizza messaggio
    Cerco di aggiungere qualche dettaglio visto che per ora nessuno ha ancora postato nulla..
    in pratica il background è come se fosse una cosa a parte dallo "sfondo" generale della pagina, diciamo come un elemento di essa. Infatti per posizionare sopra il contenuto effettivo della homepage, ho dovuto semplicemente racchiudere tutto in uno span identificato dall'id "main" in modo da farlo apparire sopra l'effetto background. Per fare questo ho impostato bottom e left su questo span in modo da centrarlo apparentemente sulla mia risoluzione, quindi ho spostato in pixel il contenuto della pagina.
    Per spiegarmi meglio, quindi l'effetto del background non è un vero e proprio background come sarebbe un body background=" .. " ma lo considera più un elemento della pagina.. come posso posizionare centrata la mia homepage sopra questo background?
    Prima utilizzavo un semplicissimo align center.. qualche suggerimento ragazzi?
    hai provato ad utilizzare bootstrap ? https://getbootstrap.com/docs/4.1/ge.../introduction/

  4. #4
    Data registrazione
    07-09-2016
    Residenza
    Abruzzo
    Messaggi
    26

    Predefinito

    Citazione Originalmente inviato da sylette Visualizza messaggio
    hai provato ad utilizzare bootstrap ? https://getbootstrap.com/docs/4.1/ge.../introduction/
    Ciao, grazie per il consiglio. Cos'è e a cosa serve?

  5. #5
    Data registrazione
    07-09-2016
    Residenza
    Abruzzo
    Messaggi
    26

    Predefinito

    Ragazzi ho ripristinato il vecchio stile della mia homepage. Se qualcuno avrà prima o poi l'occasione di aiutarmi ecco la fonte del codice:
    https://code.sololearn.com/Wj7ZWBg5m2OG/?ref=app#html

    Ripeto in poche parole: vorrei semplicemente che lo script fosse un background normale della homepage, come uno sfondo diciamo. E poi vorrei mettere il resto della mia homepage sopra questo sfondo, niente di più. Solo che non sono molto esperto di programmazione web quindi non saprei come fare, ho provato molte cose ma niente. Grazie in ogni caso per l'aiuto ..

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •