Zoom
Scritte che si susseguono con un bell'effetto zoomato.
¤ Clicca qui per visualizzare la demo... ¤
<HTML>
<HEAD>
<TITLE073</TITLE>
<STYLE TYPE="text/css">
#parentDiv {
position: absolute;
left: 100px;
top: 175px;
width: 400px;
height: 100px;
clip: rect(0,400,100,0);
}
#childDiv {
position: absolute;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// declare global variables
var NS4 = document.layers;
var IE4 = document.all;
var beg = 10;
var max = 20;
var font_size = beg;
var style_strng = "<STYLE TYPE='text/css'>\n";
var msg = new Array("MorpheusWeb.it", "Risorse per webmaster", "script, manuali, links", "www.morpheusweb.it");
var the_color = new Array("color: red;", "color: green;", "color: blue;", "color: lightseagreen;");
for (var m=0; m<msg.length; m++) // function to build font sizes and color
{
for (var i=beg; i<=max; i++)
{
style_strng += ".f" + i + m + " { font-size:" + i + "pt; " + the_color[m] + " }\n";
}
style_strng += "</STYLE>";
document.write(style_strng);
style_strng = "<STYLE TYPE='text/css'>\n"; // reset for next color
}
function writeIt(id, text) // this function writes the text
{
if (NS4)
{
var the_layer = eval("document.parentDiv.document." + id + ".document");
the_layer.open(); // looks ridiculous doesn't it
the_layer.write(text);
the_layer.close();
}
else
if (IE4)
{
document.all[id].innerHTML = text; // IE can reference it directly
}
}
function scaleMsg(x) // calls function to write text specifying size and color
{
if (font_size <= max) // stop at max size
{
writeIt("childDiv", "<DIV ALIGN='CENTER'><SPAN CLASS='f" + font_size + x + "'>" + msg[x] + "</SPAN></DIV>");
font_size++;
setTimeout("scaleMsg(" + x + ")", 40);
}
else
{
font_size=beg; // reset for next msg
}
}
function startShow()
{
m=0;
scaleMsg(m); // show first msg
m=1;
setTimeout("scaleMsg(" + m + ")", 3000); // show second msg
m=2;
setTimeout("scaleMsg(" + m + ")", 6500); // show third msg
m=3;
setTimeout("scaleMsg(" + m + ")", 10000); // show last msg
}
</SCRIPT>
<TITLE>HTML.it - Dynamic HTML</TITLE>
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
</HEAD>
<BODY bgcolor="white" ONLOAD="self.focus(); startShow()">
<DIV ID="parentDiv">
<DIV ID="childDiv">
<DIV ALIGN="CENTER"><SPAN CLASS="s10">Welcome</SPAN></DIV></DIV> </DIV>
<DIV ID="theHint"></DIV>
</body>
</html>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.