Background dynamique !
Fermé
Deff51
Messages postés
5
Date d'inscription
mardi 16 juillet 2013
Statut
Membre
Dernière intervention
13 septembre 2014
-
18 juil. 2013 à 11:56
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 19 juil. 2013 à 01:39
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 19 juil. 2013 à 01:39
A voir également:
- Background dynamique !
- Tableau croisé dynamique - Guide
- Liste déroulante dynamique excel - Guide
- Background remover - Télécharger - Montage photo
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Word sommaire dynamique - Guide
1 réponse
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
19 juil. 2013 à 01:39
19 juil. 2013 à 01:39
<html>
<head>
<style type="text/css">
body{
background: url('http://www.miglo.net/walls/padded-room-illusion-wallpaper-normal.jpg') no-repeat center center;
background-size: cover;
}
#background3d {
background-color: rgba(256,256,256,.8);
text-align: center;
width: 100%;
height: 100%;
position: relative;
-webkit-perspective: 1000px;
-webkit-perspective : 1000px;
-moz-perspective : 1000px;
-o-perspective : 1000px;
-ms-perspective : 1000px;
perspective : 1000px;
-webkit-perspective-origin : 50% 50%;
-moz-perspective-origin : 50% 50%;
-moz-transform-origin : 50% 50%;
-o-perspective-origin : 50% 50%;
-ms-perspective-origin : 50% 50%;
perspective-origin
}
#cube {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
width: 100%;
height: 100%;
position: relative;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cube figure {
width: 100%;
height: 100%;
display: block;
position: absolute;
opacity:1;
}
#cube figure.left, #cube figure.right{
/*width: 196px;*/
}
#cube .front {
background:url('http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg');
margin-left: 0;
background-repeat: no-repeat;
margin-top: 0;
background-size: contain;
opacity:.9;
}
#click{
position: absolute;
color: red;
}
#thumbs{
position: absolute;
bottom: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="background3d">
<div id="cube">
<figure class="front">1</figure>
</div>
</div>
<div id="thumbs">
<img src="http://nsa29.casimages.com/img/2012/08/10//120810113232257358.jpg" height="100"/>
<img src="http://s.tf1.fr/mmdia/i/89/5/emile-louis-condamne-definitivement-dans-l-affaire-des-disparues-2378895_1713.jpg?v=1" height="100"/>
<img src="http://pics.tobefun.net/29-3-2013/51b4ba92-b81d-494b-9179-bf53709262a7.jpg" height="100"/>
<img src="http://4.bp.blogspot.com/_tX0kLZg2MwU/TA_4vwiblWI/AAAAAAAAAeo/gDSM2rDHcfU/s400/Docteur+Petiot.preview.jpg" height="100"/>
<img src="https://cdn-parismatch.lanmedia.fr/var/news/storage/images/paris-match/actu/societe/patrice-alegre-va-se-marier-en-prison-laurence-140692/1276885-1-fre-FR/Patrice-Alegre-va-se-marier-en-prison_article_landscape_pm_v8.jpg" height="100"/>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var slider = {
x: 0,
z:0,
timer: null,
img: null,
_initialize: function(){
var me = this;
var prefixes = new Array('-webkit-', '-moz-', '-o-', '');
$('#thumbs img').click(function(){
me.img = $(this).attr('src');
me.launchRotate();
});
},
launchRotate: function(){
var _this = this;
_this.x=0;
/*if(_this.x == 180){
var action = (function(){
if(_this.x > 0){
_this.x--;
_this.z--;
}
_this.rotate();
if(_this.x == 90){
$('#cube .front').css('background', 'url("'+_this.img+'") no-repeat center center');
console.log('AHHHHHHHHHHH');
}
if(_this.x == 0 || _this.x == 180){
clearInterval(_this.timer);
}
});
}else{*/
var action = (function(){
if(_this.x < 180){
_this.x++;
_this.z++;
}
if(_this.x == 132){
$('#cube .front').css('background', 'url("'+_this.img+'") no-repeat center center');
$('body').css('background', 'url("'+_this.img+'") no-repeat center center');
console.log('AHHHHHHHHHHH');
}
if(_this.x == 0 || _this.x == 180){
clearInterval(_this.timer);
}
_this.rotate();
});
//}
this.timer = setInterval(action, 10);
},
rotate: function(){
var _this = this;
$('#cube').css('-webkit-transform', 'rotateX('+_this.x+'deg) rotateZ('+_this.x+'deg) rotateY('+ -_this.x+'deg)');
$('#cube').css('-moz-transform', 'rotateX('+_this.x+'deg) rotateZ('+_this.x+'deg) rotateY('+ -_this.x+'deg)');
$('#cube').css('-o-transform', 'rotateX('+_this.x+'deg) rotateZ('+_this.x+'deg) rotateY('+ -_this.x+'deg)');
$('#cube').css('transform', 'rotateX('+_this.x+'deg) rotateZ('+_this.x+'deg) rotateY('+ -_this.x+'deg)');
}
}
var sliderObj = slider._initialize();
</script>
</body>
</html>
