Template:Team:Aachen/Gallery

From 2014.igem.org

(Difference between revisions)
m
m
Line 5: Line 5:
<style type="text/css">
<style type="text/css">
-
/*------------------------------------*\
+
.gallery .control-operator:target ~ .controls .control-button {
-
    $CAROUSEL
+
  color: #ccc;
-
\*------------------------------------*/
+
  color: rgba(255, 255, 255, 0.4);
-
.carousel{
+
-
    overflow:hidden;
+
-
    width:100%;
+
}
}
-
.panes{
+
 
-
    list-style:none;
+
.gallery .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
-
    position:relative;
+
  color: white;
-
    width:500%; /* Number of panes * 100% */
+
  color: rgba(255, 255, 255, 0.8);
-
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
+
-
       
+
-
    -moz-animation:carousel 30s infinite;
+
-
    -webkit-animation:carousel 30s infinite;
+
-
    animation:carousel 30s infinite;
+
}
}
-
.panes > li{
+
 
-
    position:relative;
+
.gallery .item:first-of-type {
-
    float:left;
+
  position: static;
-
    width:20%; /* 100 / number of panes */
+
  pointer-events: auto;
 +
  opacity: 1;
}
}
-
.carousel img{
+
.gallery .item {
-
    display:block;
+
  position: absolute;
-
    width:100%;
+
  top: 0;
-
    max-width:100%;
+
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  pointer-events: none;
 +
  opacity: 0;
 +
  transition: opacity .5s;
}
}
-
.carousel h2{
+
.gallery .control-operator {
-
    font-size:1em;
+
  display: none;
-
    padding:0.5em;
+
}
-
    position:absolute;
+
.gallery .control-operator:target ~ .item {
-
    right:10px;
+
  pointer-events: none;
-
    bottom:10px;
+
  opacity: 0;
-
    left:10px;
+
  animation: none;
-
    text-align:right;
+
}
-
    color:#fff;
+
.gallery .control-operator:target ~ .controls .control-button {
-
    background-color:rgba(0,0,0,0.75);
+
  animation: none;
}
}
-
</style>
 
 +
@keyframes controlAnimation-2 {
 +
  0% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
  14.3%,
 +
  50% {
 +
    color: white;
 +
    color: rgba(255, 255, 255, 0.8);
 +
  }
 +
 +
  64.3%,
 +
  100% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
}
 +
@keyframes galleryAnimation-2 {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  14.3%,
 +
  50% {
 +
    opacity: 1;
 +
  }
 +
 +
  64.3%,
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
 +
.items-2.autoplay .control-button {
 +
  animation: controlAnimation-2 14s infinite;
 +
}
 +
.items-2.autoplay .item {
 +
  animation: galleryAnimation-2 14s infinite;
 +
}
 +
.items-2 .control-button:nth-of-type(1),
 +
.items-2 .item:nth-of-type(1) {
 +
  animation-delay: -2s;
 +
}
 +
.items-2 .control-button:nth-of-type(2),
 +
.items-2 .item:nth-of-type(2) {
 +
  animation-delay: 5s;
 +
}
 +
 +
@keyframes controlAnimation-3 {
 +
  0% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
 +
  9.5%,
 +
  33.3% {
 +
    color: white;
 +
    color: rgba(255, 255, 255, 0.8);
 +
  }
 +
 +
  42.9%,
 +
  100% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
}
 +
@keyframes galleryAnimation-3 {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  9.5%,
 +
  33.3% {
 +
    opacity: 1;
 +
  }
 +
 +
  42.9%,
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
 +
.items-3.autoplay .control-button {
 +
  animation: controlAnimation-3 21s infinite;
 +
}
 +
.items-3.autoplay .item {
 +
  animation: galleryAnimation-3 21s infinite;
 +
}
 +
.items-3 .control-button:nth-of-type(1),
 +
.items-3 .item:nth-of-type(1) {
 +
  animation-delay: -2s;
 +
}
 +
.items-3 .control-button:nth-of-type(2),
 +
.items-3 .item:nth-of-type(2) {
 +
  animation-delay: 5s;
 +
}
 +
.items-3 .control-button:nth-of-type(3),
 +
.items-3 .item:nth-of-type(3) {
 +
  animation-delay: 12s;
 +
}
 +
 +
@keyframes controlAnimation-4 {
 +
  0% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
 +
  7.1%,
 +
  25% {
 +
    color: white;
 +
    color: rgba(255, 255, 255, 0.8);
 +
  }
 +
 +
  32.1%,
 +
  100% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
}
 +
@keyframes galleryAnimation-4 {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  7.1%,
 +
  25% {
 +
    opacity: 1;
 +
  }
 +
 +
  32.1%,
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
 +
.items-4.autoplay .control-button {
 +
  animation: controlAnimation-4 28s infinite;
 +
}
 +
.items-4.autoplay .item {
 +
  animation: galleryAnimation-4 28s infinite;
 +
}
 +
.items-4 .control-button:nth-of-type(1),
 +
.items-4 .item:nth-of-type(1) {
 +
  animation-delay: -2s;
 +
}
 +
.items-4 .control-button:nth-of-type(2),
 +
.items-4 .item:nth-of-type(2) {
 +
  animation-delay: 5s;
 +
}
 +
.items-4 .control-button:nth-of-type(3),
 +
.items-4 .item:nth-of-type(3) {
 +
  animation-delay: 12s;
 +
}
 +
.items-4 .control-button:nth-of-type(4),
 +
.items-4 .item:nth-of-type(4) {
 +
  animation-delay: 19s;
 +
}
 +
 +
@keyframes controlAnimation-5 {
 +
  0% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
 +
  5.7%,
 +
  20% {
 +
    color: white;
 +
    color: rgba(255, 255, 255, 0.8);
 +
  }
 +
 +
  25.7%,
 +
  100% {
 +
    color: #ccc;
 +
    color: rgba(255, 255, 255, 0.4);
 +
  }
 +
}
 +
@keyframes galleryAnimation-5 {
 +
  0% {
 +
    opacity: 0;
 +
  }
 +
 +
  5.7%,
 +
  20% {
 +
    opacity: 1;
 +
  }
 +
 +
  25.7%,
 +
  100% {
 +
    opacity: 0;
 +
  }
 +
}
 +
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
 +
  pointer-events: auto;
 +
  opacity: 1;
 +
}
 +
 +
.items-5.autoplay .control-button {
 +
  animation: controlAnimation-5 35s infinite;
 +
}
 +
.items-5.autoplay .item {
 +
  animation: galleryAnimation-5 35s infinite;
 +
}
 +
.items-5 .control-button:nth-of-type(1),
 +
.items-5 .item:nth-of-type(1) {
 +
  animation-delay: -2s;
 +
}
 +
.items-5 .control-button:nth-of-type(2),
 +
.items-5 .item:nth-of-type(2) {
 +
  animation-delay: 5s;
 +
}
 +
.items-5 .control-button:nth-of-type(3),
 +
.items-5 .item:nth-of-type(3) {
 +
  animation-delay: 12s;
 +
}
 +
.items-5 .control-button:nth-of-type(4),
 +
.items-5 .item:nth-of-type(4) {
 +
  animation-delay: 19s;
 +
}
 +
.items-5 .control-button:nth-of-type(5),
 +
.items-5 .item:nth-of-type(5) {
 +
  animation-delay: 26s;
 +
}
 +
</style>
-
<div class=carousel>
 
-
   <ul class=panes>
+
<div class="gallery items-3">
 +
   <div id="item-1" class="control-operator"></div>
 +
  <div id="item-2" class="control-operator"></div>
 +
  <div id="item-3" class="control-operator"></div>
-
    <li>
+
  <figure class="item">
-
      <h2>Pane 01 title</h2>
+
    <h1>1</h1>
-
      <img src=https://static.igem.org/mediawiki/2014/thumb/d/d0/Aachen_MakerFaire_09.jpg  alt="">
+
  </figure>
-
    </li>
+
-
    <li>
+
  <figure class="item">
-
      <h2>Pane 02 title</h2>
+
    <h1>2</h1>
-
      <img src=https://static.igem.org/mediawiki/2014/thumb/d/d0/Aachen_MakerFaire_09.jpg  alt="">
+
  </figure>
-
    </li>
+
-
   </ul>
+
   <figure class="item">
 +
    <h1>3</h1>
 +
  </figure>
 +
  <div class="controls">
 +
    <a href="#item-1" class="control-button">•</a>
 +
    <a href="#item-2" class="control-button">•</a>
 +
    <a href="#item-3" class="control-button">•</a>
 +
  </div>
</div>
</div>
</html>
</html>

Revision as of 21:39, 9 October 2014

1

2

3

• • •

Retrieved from "http://2014.igem.org/Template:Team:Aachen/Gallery"