Difference between revisions of "Team:Tuebingen/Art and Design"

Line 10: Line 10:
  
 
<div id="carousel"></div>
 
<div id="carousel"></div>
−
 
−
Supercellfie
 
−
<img id="cellvengers1" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/5/5e/Cellfie_Art_Supercellfie.jpeg"/>
 
−
 
−
Ironcell
 
−
<img id="cellvengers2" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/0/0c/Cellfie_Art_Ironcellfie.jpeg"/>
 
−
 
−
Culk
 
−
<img id="cellvengers3" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/5/54/Cellfie_Art_Hulk.jpeg"/>
 
−
 
−
Thor Cellson
 
−
<img id="cellvengers4" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/2/2c/Cellfie_Art_Thor.jpeg"/>
 
−
 
−
Yeasteye
 
−
<img id="cellvengers5" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/3/3d/Cellfie_Art_Hawkeye.jpeg"/>
 
−
 
−
Captain Cellmerica
 
−
<img id="cellvengers6" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/a/a1/Cellfie_Art_Cellfie_America.jpeg"/>
 
−
 
−
Black Cellow
 
−
<img id="cellvengers7" style="max-width:100%;max-height:100%;display: block; margin-left: auto;margin-right: auto;" src="https://static.igem.org/mediawiki/2015/e/ee/Cellfie_Art_BlackWidow.jpeg"/>
 
−
 
  
 
</div>
 
</div>
Line 48: Line 26:
 
var carousel = document.getElementById('carousel');
 
var carousel = document.getElementById('carousel');
 
var slots = [];
 
var slots = [];
−
carousel.style.cssText = 'width:100%;text-align:center;height:200px;position:relative;';
+
carousel.style.cssText = 'width:100%;text-align:center;height:400px;position:relative;';
 
for (var i=0;i<imgURLs.length;i++) {
 
for (var i=0;i<imgURLs.length;i++) {
 
var div = document.createElement('div');
 
var div = document.createElement('div');
 
var img = document.createElement('div');
 
var img = document.createElement('div');
−
img.style.cssText = 'background-size:contain;height:150px;background-repeat:no-repeat;background-position:center;background-color:black;';
+
img.style.cssText = 'background-size:contain;height:30px;background-repeat:no-repeat;background-position:center;background-color:black;';
−
div.style.cssText = 'height:150px;display:inline;width:120px;display:none;perspective:400px;position:absolute;top:0px;left:50%;';
+
div.style.cssText = 'height:300px;display:inline;width:240px;display:none;perspective:400px;position:absolute;top:0px;left:50%;';
 
img.style.backgroundImage = 'url('+imgURLs[i]+')';
 
img.style.backgroundImage = 'url('+imgURLs[i]+')';
 
div.appendChild(img);
 
div.appendChild(img);
Line 62: Line 40:
 
var carouselPos = [0,1,2]
 
var carouselPos = [0,1,2]
 
slots[0].style.display = 'block';
 
slots[0].style.display = 'block';
−
slots[0].style.marginLeft = '-240px';
+
slots[0].style.marginLeft = '-480px';
 
slots[0].image.style.transform = 'rotateY(-45deg)';
 
slots[0].image.style.transform = 'rotateY(-45deg)';
 
slots[1].style.display = 'block';
 
slots[1].style.display = 'block';
−
slots[1].style.marginLeft = '-100px';
+
slots[1].style.marginLeft = '-200px';
 
slots[1].image.style.transform = 'rotateY(0deg)';
 
slots[1].image.style.transform = 'rotateY(0deg)';
 
slots[2].style.display = 'block';
 
slots[2].style.display = 'block';
−
slots[2].style.marginLeft = '40px';
+
slots[2].style.marginLeft = '80px';
 
slots[2].image.style.transform = 'rotateY(45deg)';
 
slots[2].image.style.transform = 'rotateY(45deg)';
 
}
 
}

Revision as of 15:14, 18 September 2015

<
>