CSS - Klatka animacji

Skomplikowany lecz przejrzysty CSS który umożliwia dodanie świetnego efektu do zdjęcia. Na umieszczone na stronie zdjęcie można nałożyć drugie tylko po najechaniu na nie kursorem myszki. Skrypt można wykorzystać zarówno do przeglądania grafiki jak również jako załączenie informacji do danego zdjęcia. Sam skrypt pochodzi ze strony dynamicdrive.com

Oto kod do pliku CSS

<style>

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

< /style>

Do sekcji BODY:

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="/ścieżka do pierwszego zdjęcia" />
<img class="ondemand" src="/ścieżka do nachodzącego zdjęcia" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="/ścieżka do pierwszego zdjęcia" />
<img class="ondemand" src="/ścieżka do nachodzącego zdjęcia" />
</div>

 

Projekt © 2009 - INFOPROG 67920 odwiedzin