MEGAN RIEL-MEHAN
  • Home
  • Science Visualization
  • Research
    • Initial findings
    • Image processing
  • Civic Tech
  • Fine Art
  • News
  • Methods and Notes
  • CV and Resume

Responsive CSS slider

9/29/2016

1 Comment

 
Picture
See Final Version Here
Goal: Create a responsive slider with interlocking images for the Predicting Drug Action Site.

I used CSS animation to move the images across the view. The challenge was for larger screens we didn't want the images to keep scaling because they ended up taking up too much of the screen. I started with a simple setup where there were 4 images in a container that was scaled to 400%, and moved the container across the view. But it didn't scale well. So now I have 6 images (2 of each) and animate each one. It's pretty redundant and at this point it's hard to make the case that this is simpler than just using Javascript. 

​The images were done by Thao Do. 
Thao's Website

Demo of slider with the figure width set to 100% instead of 500%

With the actual slider you only see the middle image along with a bit of the incoming and outgoing images. 
<div id="slider-inner">   <figure>     <div id="sixth">       <img  src="images/torsades.jpg">     </div>     <div id="fifth">       <img  src="images/skin.jpg">     </div>     <div id="third">       <img  src="images/EMR.jpg">     </div>     <div id="first">       <img  src="images/torsades.jpg">     </div>     <div id="second">       <img  src="images/skin.jpg">     </div>     <div id="fourth">       <img  src="images/EMR.jpg">     </div>   </figure> </div> 
HTML set up for the images
 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
#slider-inner {  text-align: center;  margin: auto;  width: 90%;  height: 43em; /*media queries adjust this*/ }  #slider-inner figure {   width: 100%;   text-align: center;   /*position: relative;*/   margin: 0;   left: -200%;   max-width: 5000px; }  #slider-inner figure div {  width: 20%;  position: absolute;  display: inline-block; }  #slider-inner figure img{   width: 100%; } 
Set up of the view.
 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16
@keyframes slidefirst {   0% { left: 40%; }   0% { left: 40%; }   13% { left: 40%; }   16% { left: 20%; }   29% { left: 20%; }   32% { left: 0%; }   45% { left: 0%; z-index: -1;}   48% { left: 80%; }   61% { left: 80%; }   64% { left: 80%; z-index: 1;}   77% { left: 80%; }   80% { left: 60%; }   93% { left: 60%; }   100% { left: 40%; } } 
Example of the animation. Made of one these for each of the 6 images. 
1 Comment
    Even though I no longer do bench work, I find the practice of recording "experiments" and notes to be helpful in keeping my thoughts and projects organized.  I also hope other people find useful things in here too. 

    Categories

    All
    Animation
    Cell Crawling
    HBV
    Heroku
    PGRN.org
    R
    Web Development

    RSS Feed

Download CV
Contact me:
  • Home
  • Science Visualization
  • Research
    • Initial findings
    • Image processing
  • Civic Tech
  • Fine Art
  • News
  • Methods and Notes
  • CV and Resume