Difference between revisions of "Team:UPMC-Paris/homeSlideshow"

 
Line 1: Line 1:
−
/* SLIDER (For Willhelm)*/
+
<html>
−
.simple-ss {
+
<style>
−
  width:800px;
+
.homeMainImage {
−
  height:250px;
+
    transition: opacity 0.5s ease-out;
−
  background-color:red;
+
    position:absolute !important;
−
  margin:auto;
+
    height:100%;
−
  background-image:url("http://www.mediafire.com/convkey/4989/2l919s6cqg2vm826g.jpg");
+
/*    top:0%;
−
  background-position:0;
+
    left:0%;*/
−
  background-repeat:no-repeat;
+
    opacity:0;
−
  background-size:cover;
+
}
 +
#homeImage0 {
 +
    opacity:1;
 +
}
  
−
/* ANIMATING STUFF */
+
</style>
−
  animation-name: slide;
+
<style id="mainState0">
−
  animation-duration: 20s;
+
#homeImage0 {opacity:1;}
−
  animation-direction: normal;
+
</style>
−
  animation-timing-function: ease;
+
 
−
  animation-iteration-count: infinite;
+
<style id="mainState1">
 +
#homeImage1 {opacity:1;}
 +
 
 +
 
 +
</style>
 +
 
 +
<style id="mainState2">
 +
#homeImage2 {opacity:1;}
 +
 
 +
 
 +
</style>
 +
<style id="mainState3">
 +
#homeImage3 {opacity:1;}
 +
 
 +
 
 +
</style>
 +
<style id="mainState4">
 +
#homeImage4 {opacity:1;}
 +
 
 +
</style>
 +
<style id="mainState5">
 +
#homeImage5 {opacity:1;}
 +
 
 +
 
 +
</style>
 +
<style id="mainState6">
 +
#homeImage6 {opacity:1;}
 +
</style>
 +
 
 +
<script>
 +
var homeMainStates = [
 +
    document.getElementById('mainState0'),
 +
    document.getElementById('mainState1'),
 +
    document.getElementById('mainState2'),
 +
    document.getElementById('mainState3'),
 +
    document.getElementById('mainState4'),
 +
    document.getElementById('mainState5')
 +
];
 +
var homeMainCaptions = [
 +
    "<h3>Flip through our slideshow or browse our page to learn about the exciting new way to detect cancer!</h3>",
 +
    "<h3>Blood is extracted from patients with a risk for metastasis. Red blood cells are separated from the blood and the remaining fluid is incubated in sTRAIL to induce apoptosis in circulating tumor cells.</h3>",
 +
    "<h3>Bacteria and human cells are mixed and sent through the chip.</h3>",
 +
    "<h3>Our bacteria express Annexin V on their membranes.</h3>",
 +
    "<h3>Allowing them to bind to phosphatidylserine expressed on the outer membrane of the cancer cells.</h3>",
 +
    "<h3>The bacteria sense this binding through signaling and fluoresce green.</h3>",
 +
    "<h3>A green signal indicates that a cancer cell has been found.</h3>"
 +
];
 +
var curMainState = 0;
 +
var numMainStates = homeMainStates.length;
 +
 
 +
$(function() {
 +
    for (var i=1;i<numMainStates;i++) {
 +
        homeMainStates[i].disabled = true;
 +
    }
 +
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[0];
 +
});
 +
 
 +
function changeState(dir) {
 +
    if (document.getElementById('homeMainContainer').className == "content") {
 +
    document.getElementById('homeMainContainer').className = "content running";
 +
    if (dir==1) {
 +
        if (curMainState == numMainStates-1) {
 +
            curMainState = numMainStates;
 +
            while (curMainState--) {
 +
                homeMainStates[curMainState].disabled = true;
 +
            }
 +
        } else {
 +
            homeMainStates[curMainState+1].disabled = false;
 +
        }
 +
    } else {
 +
        if (curMainState) {
 +
            homeMainStates[curMainState].disabled = true;
 +
        } else {
 +
            curMainState = 1;
 +
        }
 +
    }
 +
    curMainState += dir;
 +
    document.getElementById('homeMainCaption').innerHTML = homeMainCaptions[curMainState];
 +
    setTimeout(function(){document.getElementById('homeMainContainer').className = "content";},700);
 +
    }
 
}
 
}
 +
</script>
  
−
/* NOTE CODEPEN AUTOGENERATING -PREFIXES */
+
<style>
−
@keyframes slide {
+
#homeMainArrowNext, #homeMainArrowPrev {
−
  0% {background-position:0 0;}
+
    position:absolute;
−
  16.66% {background-position:0 0;}
+
    top:50%;
−
  33.32% {background-position:-900px 0;}
+
    font-size:500%;
−
  49.98% {background-position:-900px 0;}
+
    display:none;
−
  66.64% {background-position:-1800px 0;}
+
}
−
  83.30% {background-position:-1800px 0;}
+
#homeMainArrowNext {
−
  100% {background-position:0 0;}
+
    right:0;
 +
}
 +
#homeMainArrowPrev {
 +
    left:0;
 +
}
 +
#homeMainContainer:hover #homeMainArrowNext, #homeMainContainer:hover #homeMainArrowPrev {
 +
    display:block;
 
}
 
}
 
</style>
 
</style>
−
</head>
+
</html>

Latest revision as of 18:33, 3 October 2016