andbin
29-09-2007, 16:17
Sto facendo un sito web per un amico. Nella testata che è comune a tutte le pagine, ci dovrebbe poi essere una area rettangolare larga 100% e alta un tot di pixel in cui ci sono delle immagini che scorrono in continuazione da destra verso sinistra.
So che a parole potrebbe non risultare molto chiaro, provate la pagina web che riporto più sotto (la immagine è linkata sul web). Al momento l'unica soluzione che mi è venuta in mente è quella di mettere un <div> con una immagine di sfondo (pre-costruita con più immagini) e di sfruttare le proprietà CSS di background-repeat con valore repeat-x e background-position. Tramite Javascript, in modo temporizzato, aggiorno il background-position in modo da "simulare" lo scrolling continuo.
Tecnicamente, per funzionare .... funziona. Ma ci sono degli aspetti che non mi piacciono:
- Devo creare una immagine unica componendo insieme più immagini. Questo comunque sarebbe il male minore, visto che è una operazione da fare una-tantum.
- La temporizzazione fatta in Javascript comporta il fatto che ad esempio se la finestra viene trascinata o comunque se lo scrolling viene temporaneamente bloccato, gli eventi si accumulano e quando lo scrolling riparte, beh, subisce una accelerazione per breve tempo. E non è granché bello da vedere.
Tra l'altro ho altri problemi specialmente con IE per questioni relative al layout complessivo e che non sto a spiegarvi.
Domanda:
Stavo pensando: si può fare uno scrolling del genere in Flash? Purtroppo sono davvero poco competente su Flash e oltretutto non possiedo strumenti come SwishMax o Macromedia Flash MX.
Ho già avuto modo di fare qualcosina con OpenLaszlo ma lo conosco abbastanza poco. So che esiste una libreria "Ming" per generare contenuti Flash ma non l'ho mai usata.
Qualcuno saprebbe dirmi se si può fare uno scrolling del genere in Flash con OpenLaszlo, con la libreria Ming o magari con un altro tool free/opensource?
Se avete suggerimenti, link, codice di esempio, fatemi sapere.
Ringrazio naturalmente in anticipo! :)
Pagina di prova fatta con CSS/JS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Scroll</title>
<script type="text/javascript">
<!--
var imgscroll_width = 450;
var imgscroll_x = 0;
var imgscroll_divobj;
var imgscroll_step = 2;
var imgscroll_interval = 60;
function imgscroll_setup ()
{
imgscroll_divobj = document.getElementById ("imgscroll1");
window.setInterval (imgscroll_move, imgscroll_interval);
}
function imgscroll_move ()
{
imgscroll_x = (imgscroll_x - imgscroll_step) % imgscroll_width;
imgscroll_divobj.style.backgroundPosition = imgscroll_x + "px 0px";
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#imgscroll1 {
width: 100%;
height: 112px;
background: url("http://img513.imageshack.us/img513/4880/imgyz1.jpg");
background-repeat: repeat-x;
background-position: 0px 0px;
}
-->
</style>
</head>
<body onload="imgscroll_setup()">
<div id="imgscroll1"></div>
</body>
</html>
So che a parole potrebbe non risultare molto chiaro, provate la pagina web che riporto più sotto (la immagine è linkata sul web). Al momento l'unica soluzione che mi è venuta in mente è quella di mettere un <div> con una immagine di sfondo (pre-costruita con più immagini) e di sfruttare le proprietà CSS di background-repeat con valore repeat-x e background-position. Tramite Javascript, in modo temporizzato, aggiorno il background-position in modo da "simulare" lo scrolling continuo.
Tecnicamente, per funzionare .... funziona. Ma ci sono degli aspetti che non mi piacciono:
- Devo creare una immagine unica componendo insieme più immagini. Questo comunque sarebbe il male minore, visto che è una operazione da fare una-tantum.
- La temporizzazione fatta in Javascript comporta il fatto che ad esempio se la finestra viene trascinata o comunque se lo scrolling viene temporaneamente bloccato, gli eventi si accumulano e quando lo scrolling riparte, beh, subisce una accelerazione per breve tempo. E non è granché bello da vedere.
Tra l'altro ho altri problemi specialmente con IE per questioni relative al layout complessivo e che non sto a spiegarvi.
Domanda:
Stavo pensando: si può fare uno scrolling del genere in Flash? Purtroppo sono davvero poco competente su Flash e oltretutto non possiedo strumenti come SwishMax o Macromedia Flash MX.
Ho già avuto modo di fare qualcosina con OpenLaszlo ma lo conosco abbastanza poco. So che esiste una libreria "Ming" per generare contenuti Flash ma non l'ho mai usata.
Qualcuno saprebbe dirmi se si può fare uno scrolling del genere in Flash con OpenLaszlo, con la libreria Ming o magari con un altro tool free/opensource?
Se avete suggerimenti, link, codice di esempio, fatemi sapere.
Ringrazio naturalmente in anticipo! :)
Pagina di prova fatta con CSS/JS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image Scroll</title>
<script type="text/javascript">
<!--
var imgscroll_width = 450;
var imgscroll_x = 0;
var imgscroll_divobj;
var imgscroll_step = 2;
var imgscroll_interval = 60;
function imgscroll_setup ()
{
imgscroll_divobj = document.getElementById ("imgscroll1");
window.setInterval (imgscroll_move, imgscroll_interval);
}
function imgscroll_move ()
{
imgscroll_x = (imgscroll_x - imgscroll_step) % imgscroll_width;
imgscroll_divobj.style.backgroundPosition = imgscroll_x + "px 0px";
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#imgscroll1 {
width: 100%;
height: 112px;
background: url("http://img513.imageshack.us/img513/4880/imgyz1.jpg");
background-repeat: repeat-x;
background-position: 0px 0px;
}
-->
</style>
</head>
<body onload="imgscroll_setup()">
<div id="imgscroll1"></div>
</body>
</html>