sfondo div in movimento

criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ci provo io con jquery
HTML: 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>entrata div</title>
        <style type="text/css">
            div#boxsx {
                position:absolute;
                top:0;
                left:-200px;
                background-color: yellow;
                width: 200px;
                height: 500px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    </head>

    <body>

        <div id="boxsx">

        </div> 
        <script type="text/javascript">
            $(document).ready(function() {
                $('#boxsx').animate({
                    left: '+=200'
                }, 3000);
            });
        </script>
    </body>
</html>
al posto dello sfondo giallo ci potresti mettere un immagine
è una bozza
 
F

Federica Schiavon

Nuovo Utente
13 Dic 2012
4
0
0
sto facendo un po' di prove, solo che il mio livello di javascript è pressochè nullo, c'è la possibilità di intergare lo script che mi hai dato tu con questo per lo sfondo a schermo intenro o chiedo troppo??? :)

<head>
<meta charset="utf-8" />
<style>
body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container
{
height:600px;
width:990px;
position: absolute;
top:50%;
margin-top:-300px;
left: 50%;
margin-left:-495px;
background: rgb(186, 148, 73);
background: rgba(186, 148, 73, 0.6);
}
pre, code {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
</style>
</head>
<body>
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.backstretch.js" type="text/javascript"></script>

<script>
$.backstretch([

"pot-holder.jpg",
"coffee.jpg",
"dome.jpg"
], {
fade: 750,
duration: 4000
});
</script>
<div class="container">
prova
</div>

</body>
Clicca per allargare...
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non ho avuto modo di testare
HTML: 
<head>
    <meta charset="utf-8" />
    <style>
        body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
        .container
        {
            height:600px;
            width:990px;
            position: absolute;
            top:50%;
            margin-top:-300px;
            left: 50%;
            margin-left:-495px;
            background: rgb(186, 148, 73);
            background: rgba(186, 148, 73, 0.6);
        }
        pre, code {
            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size: 12px;
            color: #333;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
        code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
        div#boxsx {
            position:absolute;
            top:0;
            left:-200px;
            background-color: yellow;
            width: 200px;
            height: 500px;
        }
    </style>
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="script/jquery.backstretch.js" type="text/javascript"></script>
</head>
<body>
    <div id="boxsx">

    </div> 
    <div class="container">
        prova
    </div>
    <script>
        $(document).ready(function() {
            $('#boxsx').animate({
                left: '+=200'
            }, 3000);
        });
        $.backstretch([

            "pot-holder.jpg",
            "coffee.jpg",
            "dome.jpg"
        ], {
            fade: 750,
            duration: 4000
        });
    </script>

</body>
prova tu
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
V javascript - cambiare immagine di sfondo di un div Javascript 3
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
C Div con bordi come sfondo HTML e CSS 6
E Sfondo div Webdesign e Grafica 2
emanuelevt immagine di sfondo del div HTML e CSS 5
F sfondo opaco con div in primo piano Javascript 2
G Sfondo div HTML e CSS 5
Eugene Cambiare colore sfondo DIV HTML e CSS 2
M Sfocare sfondo Photoshop CS6 Photoshop 2
K Sfondo nuovo file Photoshop 0
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
A Immagine decentrata con sfondo trasparente Photoshop 0
Y cambiare sfondo di una pagina Javascript 1
L Non riesco a riprodurre uno sfondo Photoshop 0
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
Cosina Cambio colore sfondo al click Javascript 2
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
G Fare uno sfondo con il prato e degli alberi Photoshop 0
J Info per copia sfondo Photoshop 2
S Scontorno, cambio sfondo, alone Photoshop 1
N sfondo trasparente photoshop 2019 Photoshop 2
Y Colore sfondo testo Javascript 0
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
R [HTML] sfondo header HTML e CSS 0
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
asevenx [HTML]Problemi float e adattamento sfondo HTML e CSS 2
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
O Allo scroll cambiare colore di sfondo jQuery 0
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
dany81 [Photoshop] Eliminare più sfondo possibile... Photoshop 3
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
R Sfondo animato per sito con Adobe Muse Windows e Software 3
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
utente testo scorrevole con sfondo colorato con css esterno HTML e CSS 6
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
S Immagini multiple come sfondo HTML e CSS 3
Q Pubblicità al posto dello sfondo vbulletin 4 HTML e CSS 0
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1

Discussioni simili

Alto Basso