Blocage affichage image

/* General */
body {
  margin: 0;
  padding: 0;
  color:#fff;
  font: normal "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: #000;
}

h2 {
  margin-top:0;
  font-size: 2em;
  font-weight:bold;
  color: #eca603;
}

a {
  font-weight:bold;
  color:#fff;
}


/* Wrapper */
#wrap {
  position: relative;
  top:0;
  -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
  -moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  -ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  -o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
  transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}


/* Nav */
#nav {
  position: fixed;
  top: 0; left:0; right: 0;
  padding: 1em 0;
  margin:0;
  background: #000;
  text-align:center;
  font-size: 1em;
  z-index:10;
}
#nav li {
  display: inline;
  margin:0;
}
#nav a {
  display: inline-block;
  margin: 0 3em;
  color: #eee;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 0 5px #fff;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}


/* slides */
#slide1, #slide2, #slide3 {
  height: 1000px;
  padding-top:100px;
  -webkit-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1);
  -moz-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
  -ms-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
  -o-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
  transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}

/* attribution des images de fond */
#slide1 { background-image: url("style/media/clone.jpg") center 0 no-repeat fixed; }
#slide2 { background-image: url("style/media/le-mal.jpg") center 0 no-repeat fixed; }
#slide3 { background-image: url("style/media/logo-star-wars.jpg") center 0 no-repeat fixed; }


/* Slides contents */
.slide_inside {
  width: 770px;
  margin: 0 auto;
  position: relative;
  background-color: rgba(0, 0, 0, .6);
  padding: 50px;
}

#slide1 .slide_inside {
  text-align: center;
  background-color: transparent;
}
#slide2 .slide_inside p {
  width: 500px;
  text-align: justify;
}
#slide3 .slide_inside {
  margin-top: 50px;
}


/* Troopers & clone */

#trooper, #clone {
  position: absolute;
  left:-180px; top: 300px;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
  transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#clone {
  left: -280px;
  top: 400px;
}


/* targeted elements */

#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: -280px; top: 300px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }

#s2:target ~ #wrap { top:-1000px; }
#s2:target ~ #wrap #nav li:first-child + li a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
#s2:target ~ #wrap #trooper { left: -180px; top: -100px; -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg); }
#s2:target ~ #wrap #clone { left: -350px; top: 50px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg); }


#s3:target ~ #wrap { top:-2150px; }
#s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -800px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg); }


/* some social styles */

.fb-like { top: -5px; }
.or_follow { display: inline-block; vertical-align:top; margin-left: 135px; margin-right: 5px; }