Template:CSS/js-image-slider

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
-
#sliderFrame
+
/* Common */
-
{
+
 
-
    position:relative;
+
 
-
    width:700px;
+
.content h1 {
-
    margin:0 auto; /*center-aligned*/
+
font-size:48px;
 +
color:#000;
 +
text-shadow:0px 10px 10px #4796ff;
 +
text-align:center;
 +
alignment-adjust:middle;
 +
padding:60px 0 30px;
}
}
-
#slider, #slider div.sliderInner {
+
/* LAYOUT */
-
    width:700px;height:306px;/* Must be the same size as the slider images */
+
.container {
 +
margin:0 auto;
 +
overflow:hidden;
 +
width:960px;
}
}
 +
/* CONTENT SLIDER */
 +
#content-slider {
 +
width:100%;
 +
height:360px;
 +
margin:10px auto 0;
 +
}
 +
/* SLIDER */
#slider {
#slider {
-
background:#fff url(C:\Users\Shashank Yadav\Documents\Unnamed Site 2\themes\1loading.gif) no-repeat 50% 50%;
+
background:#000;
 +
border:5px solid #4796ff;
 +
border-radius:8px;
 +
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
 +
height:320px;
 +
width:680px;
 +
margin:40px auto 0;
 +
overflow:visible;
position:relative;
position:relative;
-
margin:0 auto; /*center-aligned*/
 
-
    transform: translate3d(0,0,0);
 
-
    box-shadow: 0px 1px 5px #999999;
 
}
}
-
 
+
#mask {
-
/* image wrapper */
+
overflow:hidden;
-
#slider a.imgLink, #slider div.video {
+
height:320px;
-
z-index:2;
+
-
position:absolute;
+
-
top:0px;left:0px;border:0;padding:0;margin:0;
+
-
width:100%;height:100%;
+
}
}
-
#slider .video {
+
#slider ul {
-
background:transparent url(video.png) no-repeat 50% 50%;
+
margin:0;
 +
padding:0;
 +
position:relative;
}
}
-
 
+
#slider li {
-
/* Caption styles */
+
width:680px;
-
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
+
height:320px;
position:absolute;
position:absolute;
-
width:100%;
+
top:-325px;
-
height:auto;
+
list-style:none;
-
padding:10px 0;/* 10px will increase the height.*/
+
-
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
+
-
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
+
-
z-index:3;
+
-
overflow:hidden;
+
-
font-size: 0;
+
}
}
-
#slider div.mc-caption-bg
+
 
-
{
+
#slider li.firstanimation {
-
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
+
-moz-animation:cycle 25s linear infinite;
-
background:Black;/* or any other colors such as White, or: background:none; */
+
-webkit-animation:cycle 25s linear infinite;
}
}
-
#slider div.mc-caption-bg2 {
+
#slider li.secondanimation {
-
    background:none;
+
-moz-animation:cycletwo 25s linear infinite;
 +
-webkit-animation:cycletwo 25s linear infinite;
}
}
-
#slider div.mc-caption {
+
#slider li.thirdanimation {
-
font: bold 14px/20px Arial;
+
-moz-animation:cyclethree 25s linear infinite;
-
color:#EEE;
+
-webkit-animation:cyclethree 25s linear infinite;
-
z-index:4;
+
-
text-align:center;
+
-
    background:none;
+
}
}
-
#slider div.mc-caption a {
+
#slider li.fourthanimation {
-
color:#FB0;
+
-moz-animation:cyclefour 25s linear infinite;
 +
-webkit-animation:cyclefour 25s linear infinite;
}
}
-
#slider div.mc-caption a:hover {
+
#slider li.fifthanimation {
-
color:#DA0;
+
-moz-animation:cyclefive 25s linear infinite;
 +
-webkit-animation:cyclefive 25s linear infinite;
}
}
-
 
+
#slider .tooltip {
-
/* ------ built-in navigation bullets wrapper ------*/
+
background:rgba(0,0,0,0.7);
-
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
+
width:300px;
-
#slider div.navBulletsWrapper  {
+
height:60px;
-
    top:320px;/* Its position is relative to the #slider */
+
-
text-align:center;
+
-
background:none;
+
position:relative;
position:relative;
-
z-index:5;
+
bottom:75px;
 +
left:-320px;
 +
-moz-transition:all 1s ease-in-out;
 +
-webkit-transition:all 1s ease-in-out;
}
}
-
 
+
#slider .tooltip h1 {
-
/* each bullet */
+
color:#fff;
-
#slider div.navBulletsWrapper div
+
font-size:24px;
-
{
+
font-weight:300;
-
    width:11px; height:11px;
+
line-height:30px;
-
    font-size:0;color:White;/*hide the index number in the bullet element*/
+
padding:0 0 0 0px;
-
    background:transparent url("https://static.igem.org/mediawiki/2014/0/0c/Iitd-Bullet.png") no-repeat 0 0;
+
}
-
    display:inline-block; *display:inline; zoom:1;
+
#slider li#first:hover .tooltip,
-
    overflow:hidden;cursor:pointer;
+
#slider li#second:hover .tooltip,
-
    margin:0 6px;/* set distance between each bullet*/
+
#slider li#third:hover .tooltip,
 +
#slider li#fourth:hover .tooltip,
 +
#slider li#fifth:hover .tooltip {
 +
left:0px;
}
}
-
#slider div.navBulletsWrapper div.active {background-position:0 -11px;}
 
 +
/* PROGRESS BAR */
 +
.progress-bar {
 +
position:relative;
 +
top:-5px;
 +
width:680px;
 +
height:5px;
 +
background:#000;
 +
border-radius:8px;
 +
-moz-animation:fullexpand 25s ease-out infinite;
 +
-webkit-animation:fullexpand 25s ease-out infinite;
 +
}
-
/* --------- Others ------- */
 
-
#slider div.loading
+
@-moz-keyframes cycle {
-
{
+
0% { top:0px; }
-
    width:100%; height:100%;
+
4% { top:0px; }
-
    background:transparent url(loading.gif) no-repeat 50% 50%;
+
16% { top:0px; opacity:1; z-index:0; }
-
    filter: alpha(opacity=60);
+
20% { top:325px; opacity:0; z-index:0; }
-
    opacity:0.6;
+
21% { top:-325px; opacity:0; z-index:-1; }
-
    position:absolute;
+
92% { top:-325px; opacity:0; z-index:0; }
-
    left:0;
+
96% { top:-325px; opacity:0; }
-
    top:0;  
+
100%{ top:0px; opacity:1; }
-
    z-index:9;
+
}
}
-
 
+
@-moz-keyframes cycletwo {
-
#slider img, #slider>b, #slider a>b {
+
0%  { top:-325px; opacity:0; }
-
position:absolute; border:none; display:none;
+
16% { top:-325px; opacity:0; }
 +
20% { top:0px; opacity:1; }
 +
24% { top:0px; opacity:1; }
 +
36% { top:0px; opacity:1; z-index:0; }
 +
40% { top:325px; opacity:0; z-index:0; }
 +
41% { top:-325px; opacity:0; z-index:-1; }
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-moz-keyframes cyclethree {
 +
0%  { top:-325px; opacity:0; }
 +
36% { top:-325px; opacity:0; }
 +
40% { top:0px; opacity:1; }
 +
44% { top:0px; opacity:1; }
 +
56% { top:0px; opacity:1; }
 +
60% { top:325px; opacity:0; z-index:0; }
 +
61% { top:-325px; opacity:0; z-index:-1; }
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-moz-keyframes cyclefour {
 +
0%  { top:-325px; opacity:0; }
 +
56% { top:-325px; opacity:0; }
 +
60% { top:0px; opacity:1; }
 +
64% { top:0px; opacity:1; }
 +
76% { top:0px; opacity:1; z-index:0; }
 +
80% { top:325px; opacity:0; z-index:0; }
 +
81% { top:-325px; opacity:0; z-index:-1; }
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-moz-keyframes cyclefive {
 +
0%  { top:-325px; opacity:0; }
 +
76% { top:-325px; opacity:0; }
 +
80% { top:0px; opacity:1; }
 +
84% { top:0px; opacity:1; }
 +
96% { top:0px; opacity:1; z-index:0; }
 +
100%{ top:325px; opacity:0; z-index:0; }
}
}
-
#slider div.sliderInner {
+
@-webkit-keyframes cycle {
-
overflow:hidden;  
+
0%  { top:0px; }
-
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
+
4%  { top:0px; }
-
position:absolute; top:0; left:0;
+
16% { top:0px; opacity:1; z-index:0; }
 +
20% { top:325px; opacity:0; z-index:0; }
 +
21% { top:-325px; opacity:0; z-index:-1; }
 +
50% { top:-325px; opacity:0; z-index:-1; }
 +
92% { top:-325px; opacity:0; z-index:0; }
 +
96% { top:-325px; opacity:0; }
 +
100%{ top:0px; opacity:1; }
 +
 +
}
 +
@-webkit-keyframes cycletwo {
 +
0%  { top:-325px; opacity:0; }
 +
16% { top:-325px; opacity:0; }
 +
20% { top:0px; opacity:1; }
 +
24% { top:0px; opacity:1; }
 +
36% { top:0px; opacity:1; z-index:0; }
 +
40% { top:325px; opacity:0; z-index:0; }
 +
41% { top:-325px; opacity:0; z-index:-1; } 
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-webkit-keyframes cyclethree {
 +
0%  { top:-325px; opacity:0; }
 +
36% { top:-325px; opacity:0; }
 +
40% { top:0px; opacity:1; }
 +
44% { top:0px; opacity:1; }
 +
56% { top:0px; opacity:1; z-index:0; }
 +
60% { top:325px; opacity:0; z-index:0; }
 +
61% { top:-325px; opacity:0; z-index:-1; }
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-webkit-keyframes cyclefour {
 +
0%  { top:-325px; opacity:0; }
 +
56% { top:-325px; opacity:0; }
 +
60% { top:0px; opacity:1; }
 +
64% { top:0px; opacity:1; }
 +
76% { top:0px; opacity:1; z-index:0; }
 +
80% { top:325px; opacity:0; z-index:0; }
 +
81% { top:-325px; opacity:0; z-index:-1; }
 +
100%{ top:-325px; opacity:0; z-index:-1; }
 +
}
 +
@-webkit-keyframes cyclefive {
 +
0%  { top:-325px; opacity:0; }
 +
76% { top:-325px; opacity:0; }
 +
80% { top:0px; opacity:1; }
 +
84% { top:0px; opacity:1; }
 +
96% { top:0px; opacity:1; z-index:0; }
 +
100%{ top:325px; opacity:0; z-index:0; }
}
}
-
#slider>a, #slider video, #slider audio {display:none;}
+
/* ANIMATION BAR */
 +
@-moz-keyframes fullexpand {
 +
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
 +
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
 +
  16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
 +
  17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
 +
  18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
 +
}
 +
@-webkit-keyframes fullexpand {
 +
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
 +
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
 +
  16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
 +
  17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
 +
  18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
 +
}
</style>
</style>
</html>
</html>

Revision as of 13:47, 30 May 2014

Retrieved from "http://2014.igem.org/Template:CSS/js-image-slider"