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