sfondo div in movimento

Federica Schiavon · 13 Dic 2012

Buongiorno a tutti!!!
per caso qualcuno sa come si fa a fare una cosa del genere http://sicisjewels.com/ita/Contatti , cioè far entrare due immagini dai lati del sito come sfondo??

ho provato a cercare un po' in rete ma non ho trovato niente!

Grazie mille, Federica
:byebye:

criric · 14 Dic 2012

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

Federica Schiavon · 17 Dic 2012

Grazie mille!!!!!!!!! :mavieni:
mi hai salvata!!!!!
Buona giornata!

Federica Schiavon · 17 Dic 2012

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>

criric · 17 Dic 2012

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

Federica Schiavon · 18 Dic 2012

Provo,
grazie mille!!!!

Cerca

Cerca

sfondo div in movimento

Federica Schiavon

Nuovo Utente

criric

Super Moderatore

Federica Schiavon

Nuovo Utente

Federica Schiavon

Nuovo Utente

criric

Super Moderatore

Federica Schiavon

Nuovo Utente

Discussioni simili