Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
Line 10: Line 10:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' />
 +
</head>
 +
<head>
 +
<script" type="text/javascript">
 +
$.fn.slider = function() {
 +
  $(".loader").show("fade", 300);
 +
  $(".loader").delay(1000).hide("fade", 300);
 +
  $(".slider").delay(1500).show("fade", 300);
 +
  $(".shadow").delay(1800).show("fade", 500);
 +
};
-
<script src="https://2014hs.igem.org/Team:AUC_TURKEY/slide.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
 
 +
$(document).ready( function() {
 +
  $("#slider").slider();
 +
});
 +
</script>
 +
</head>
<style type="text/css">
<style type="text/css">
Line 22: Line 36:
</style>
</style>
<style type="text/css">
<style type="text/css">
 +
/* ## GLOBAL VARIABLES #################### */
 +
@mainColor: red; /* first color on page*/
 +
@secondColor: grey; /* second color on page */
 +
@time: 10s; /* slider animation time */
 +
@width: 800px;
 +
@height: 400px;
 +
 +
/* ## STYLES ############################## */
 +
@-webkit-keyframes progress {
 +
  0%  { width: 0px; height: 5px; }
 +
  5% { width: 0px; height: 5px; }
 +
  85% { width: inherit; height: 5px; }
 +
  89% { width: inherit; height: 5px; }
 +
  91% { width: inherit; height: 0px; }
 +
  100% { width: inherit; height: 0px; }
 +
}
 +
 +
@-webkit-keyframes captions {
 +
  3%  { height: 0px; }
 +
  7% { height: 55px; }
 +
  82% { height: 55px; }
 +
  87% { height: 0px; }
 +
}
 +
 +
@-webkit-keyframes fade {
 +
  4%  { opacity: 0; }
 +
  15% { opacity: 1; }
 +
  74% { opacity: 1; }
 +
  86% { opacity: 0; }
 +
}
 +
 +
@-webkit-keyframes slice-top {
 +
  0%  { -webkit-transform: scale(1) rotate(0deg); opacity: 1; top: 0; left: 0; }
 +
  90%  { -webkit-transform: scale(1) rotate(0deg); opacity: 1; top: 0; left: 0; }
 +
  /*  98%  { opacity: 1; } */
 +
  100% { -webkit-transform: scale(1.116) rotate(-25deg); opacity: 0; top: -300px; left: -100px; }
 +
}
 +
 +
@-webkit-keyframes slice-bottom {
 +
  0%  { -webkit-transform: scale(1) rotate(0deg); opacity: 1; bottom: 0; right: 0; }
 +
  90%  { -webkit-transform: scale(1) rotate(0deg); opacity: 1; bottom: 0; right: 0; }
 +
  /*  98%  { opacity: 1; } */
 +
  100% { -webkit-transform: scale(1.116) rotate(-25deg); opacity: 0; bottom: -300px; right: -100px; }
 +
}
 +
 +
a:link, a:link:before, a:link:after {
 +
  font-weight: normal;
 +
  text-decoration: none;
 +
  color: white;
 +
  content: "";
 +
}
 +
 +
a:visited {
 +
  font-weight: normal;
 +
  text-decoration: none;
 +
  color: grey;
 +
}
 +
 +
a:focus {
 +
  font-weight: bold;
 +
  text-decoration: none;
 +
}
 +
 +
a:hover {
 +
  font-weight: normal;
 +
  text-decoration: none;
 +
  color: lightgrey;
 +
}
 +
 +
a:active {
 +
  font-weight: normal;
 +
  text-decoration: none;
 +
  color: grey;
 +
}
 +
 +
#wrapper {
 +
  width: @width;
 +
  height: @height;
 +
  margin: 20px auto;
 +
  position: relative;
 +
}
 +
.slider {
.slider {
-
position: relative;
+
  width: @width;
-
overflow: auto;
+
  height: @height;
-
width: 80%;
+
  background-color: @secondColor;
-
margin: 1em auto;
+
  overflow: hidden;
 +
  display: none;
 +
  position: absolute;
}
}
-
.js .slider {
+
 
-
overflow: hidden;
+
.shadow {
 +
  display: block;
 +
  height: 100px;
 +
  border-radius: 50%;
 +
  width: 112%;
 +
  box-shadow: #000 0px 150px 130px;
 +
  position: absolute;
 +
  bottom: 80px;
 +
  left: -6%;
 +
  z-index: -1;
 +
  display: none;
}
}
-
.slider > ul {
+
 
-
position: relative;
+
.controls {
-
list-style: none;
+
  position: absolute;
-
margin: 0;
+
  width: inherit;
-
padding: 0;
+
  height: inherit;
-
font-size: 0;
+
  z-index: 999;
-
word-spacing: -.3em;
+
  overflow: hidden;
-
white-space: nowrap;
+
}
}
-
.slider > ul > li {
+
.left {
-
position: relative;
+
  float: left;
-
display: inline-block;
+
  -moz-transform:rotate(-45deg);
-
*display: inline;
+
  -webkit-transform:rotate(-45deg);
-
*zoom: 1;
+
  -o-transform:rotate(-45deg);
-
vertical-align: top;
+
  -ms-transform:rotate(-45deg);
-
font-size: 14px;
+
  transform:rotate(-45deg);
-
word-spacing: 0;
+
-
white-space: normal;
+
}
}
-
.slider > ul > .next:first-child {
+
.right {
-
left: 100%;
+
  float: right;
 +
  -moz-transform:rotate(135deg);
 +
  -webkit-transform:rotate(135deg);
 +
  -o-transform:rotate(135deg);
 +
  -ms-transform:rotate(135deg);
 +
  transform:rotate(135deg);
}
}
-
.slider > ul > .prev.last-child {
+
 
-
right: 100%;
+
.arrow {
 +
  height: 50px;
 +
  width: 50px;
 +
  border-top: 10px solid;
 +
  border-left: 10px solid;
 +
  border-color: rgba(255,255,255,0.3);
 +
  margin: 19.5% 30px;
 +
  cursor: pointer;
 +
  opacity: 0;
 +
  -webkit-animation: fade @time infinite;
 +
  -webkit-transition:border-color 0.2s;
 +
  -moz-transition:border-color 0.2s;
 +
  -o-transition:border-color 0.2s;
 +
  transition:border-color 0.2s
}
}
-
.slider > ul > .target:first-child,
+
 
-
.slider > ul > .target.last-child {
+
.fade {
-
left: 0;
+
  -webkit-animation: fade @time;
-
right: 0;
+
}
}
-
.slider > ul > li > img {
+
.arrow:hover {
-
display: block;
+
  border-color: rgba(255,255,255,0.7);
-
width: 100%;
+
}
}
-
.slider .nav {
+
.progressbar {
-
z-index: 1;
+
  position: absolute;
-
background: #fff;
+
  bottom: 0px;
-
text-align: center;
+
  height: 5px;
-
transition: opacity 2s;
+
  background-color: @mainColor;
-
opacity: 0;
+
  z-index: 999;
 +
  -webkit-animation: progress @time linear infinite;
}
}
-
.slider.ready .nav {
+
 
-
opacity: 1;
+
.captions {
 +
  position: absolute;
 +
  bottom: 0px;
 +
  width: inherit;
 +
  height: 0px;
 +
 
 +
  background-color: rgba(0,0,0,0.4);
 +
  -webkit-animation: captions @time infinite;
 +
  -webkit-transition: background-color 0.2s;
 +
  -moz-transition: background-color 0.2s;
 +
  -o-transition: background-color 0.2s;
 +
  transition: background-color 0.2s
}
}
-
.slider .nav a {
+
 
-
display: inline-block;
+
.captions:hover {
-
margin: 1em .5em;
+
  background-color: rgba(0,0,0,0.8);
-
padding: 0;
+
  cursor: pointer;
-
border: none;
+
 
-
width: 2em;
+
-
line-height: 2em;
+
-
background: #999;
+
-
color: #fff;
+
-
text-decoration: none;
+
-
text-align: center;
+
-
border-radius: 999px;
+
-
cursor: pointer;
+
-
-webkit-transition: all .2s;
+
-
transition: all .2s;
+
}
}
-
.slider .nav a:hover {
+
 
-
background: #666;
+
.captions span {
 +
  position: absolute;
 +
  z-index: 999;
 +
  bottom: 5px;
 +
  font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
 +
  color: white;
 +
  font-weight: lighter;
 +
  opacity: 0;
 +
  font-size: large;
 +
  padding: 0px 20px;
 +
  line-height: 50px;
 +
  cursor: pointer;
 +
  -webkit-font-smoothing: antialiased;
 +
  -webkit-animation: fade @time infinite;
}
}
-
.slider .nav a.active {
+
 
-
background: #000;
+
.images {
 +
display: none;
 +
  position: absolute;
 +
  width: inherit;
 +
  height: inherit;
}
}
-
/* position nav items above slideshow with arrows on left/right side */
+
.images img {
-
.slider .nav > span {
+
   position: absolute;
   position: absolute;
-
   bottom: 10px;
+
   display: none;
-
   left: 0;
+
   width: inherit;
-
   right: 0;
+
   height: inherit;
}
}
-
.slider .nav > a {
+
 
 +
.image {
 +
  position: absolute;
 +
  width: inherit;
 +
}
 +
 
 +
.slice-top {
 +
  top: 0;
 +
  height: 50%;
 +
  background-color: green;
 +
  -webkit-transform-origin: top center;
 +
  -webkit-animation: slice-top @time infinite;
 +
}
 +
 
 +
.slice-bottom {
 +
  bottom: 0;
 +
  height: 50%;
 +
  background-color: green;
 +
  -webkit-transform-origin: bottom center;
 +
  -webkit-animation: slice-bottom @time infinite;
 +
}
 +
 
 +
/*
 +
#slider:hover .progressbar, #slider:hover .arrow, #slider:hover .fade, #slider:hover .slice-top, #slider:hover .slice-bottom, #slider:hover .captions, #slider:hover .captions span {
 +
  -webkit-animation-play-state: paused;
 +
}
 +
 
 +
#slider div, #slider span {
 +
  -webkit-animation-iteration-count: 1 !important;
 +
} */
 +
 
 +
/* LOADER */
 +
@-webkit-keyframes rotate {
 +
  0% { opacity: .2; -webkit-transform: rotateZ(-360deg); }
 +
  50% { opacity: 1; -webkit-transform: rotateZ(0deg); }
 +
  100% { opacity: .2; -webkit-transform: rotateZ(360deg); }
 +
}
 +
 
 +
.loader {
 +
  top: ~"calc(50% - 53px)";
 +
  left: ~"calc(50% - 53px)";
 +
  height: 100px;
 +
  width: 100px;
 +
  display: none;
 +
}
 +
 
 +
.loader, .loader:before, .loader:after {
   position: absolute;
   position: absolute;
-
   top: 50%;
+
   border: 3px solid transparent;
-
   margin-top: -21px;
+
  border-top: 3px solid @mainColor;
-
   font-size: 1.5em;
+
  border-radius: 50%;
 +
   -webkit-animation: rotate linear infinite;
 +
   -webkit-animation-duration: 1.05s;
 +
  content: '';
}
}
-
.slider .nav > .back {
+
 
-
   left: 20px;
+
.loader:before {
 +
  height: 75px;
 +
  width: 75px;
 +
  top: 10px;
 +
   left: 10px;
 +
  -webkit-animation-duration: 6s;
}
}
-
.slider .nav > .forth {
+
 
-
   right: 20px;
+
.loader:after {
 +
   height: 50px;
 +
  width: 50px;
 +
  top: 22px;
 +
  left: 22px;
 +
  -webkit-animation-duration: 3s;
}
}
</style>
</style>
Line 192: Line 390:
<body>
<body>
-
<div class="slider js_slider" data-autorotate="5">
+
<div id="wrapper">
-
<ul>
+
  <div class="loader"></div>
-
<li>
+
  <div class="slider">
-
        <img src="http://dummyimage.com/800x400/eee/000&amp;text=Slide+1">
+
    <div class="images">
-
</li>
+
      <img id="1" src="http://placehold.it/1000x450&text=Bild+1" data-href="http://google.de" data-caption="Test-Bild 1 (GOOGLE)" />
-
<li>
+
<img id="2" src="http://placehold.it/1000x450&text=Bild+2" data-href="http://bing.com" data-caption="Test-Bild 2 (BING)" />
-
<img src="http://dummyimage.com/800x400/ddd/000&amp;text=Slide+2">
+
<img id="3" src="http://placehold.it/1000x450&text=Bild+3" data-href="http://facebook.com" data-caption="Test-Bild 3 (FACEBOOK)" />
-
</li>
+
</div>
-
<li>
+
<div class="controls">
-
<img src="http://dummyimage.com/800x400/ccc/000&amp;text=Slide+3">
+
<div class="arrow left"></div>
-
</li>
+
<div class="arrow right"></div>
-
<li>
+
<div class="progressbar"></div>
-
<img src="http://dummyimage.com/800x400/bbb/000&amp;text=Slide+4">
+
<div class="captions">
-
</li>
+
<span>Bildunterschrift</span>
-
<li>
+
</div>
-
<img src="http://dummyimage.com/800x400/ccc/000&amp;text=Slide+5">
+
</div><!--
-
</li>
+
<div class="image slice-top"></div>
-
<li>
+
<div class="image slice-bottom"></div>-->
-
<img src="http://dummyimage.com/800x400/ddd/000&amp;text=Slide+6">
+
</div>
-
</li>
+
  <div class="shadow"></div>
-
<li>
+
-
<img src="http://dummyimage.com/800x400/eee/000&amp;text=Slide+7">
+
-
</li>
+
-
</ul>
+
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 15:02, 11 June 2014

Back to top Take a Tour




$.fn.slider = function() { $(".loader").show("fade", 300); $(".loader").delay(1000).hide("fade", 300); $(".slider").delay(1500).show("fade", 300); $(".shadow").delay(1800).show("fade", 500); }; $(document).ready( function() { $("#slider").slider(); });

sdasd

Bildunterschrift

Retrieved from "http://2014hs.igem.org/Team:AUC_TURKEY"