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

Line 8: Line 8:
 
<div id="dia0" class="dia" style="text-align:block;">
 
<div id="dia0" class="dia" style="text-align:block;">
 
<br>
 
<br>
−
 
+
<img id="teamfoto" 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"/>
−
<div id="carousel"></div>
+
Supercellfie
 +
<img id="teamfoto" 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"/>
 +
Iron Cell
 +
<img id="teamfoto" 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"/>
 +
Culk
 +
<img id="teamfoto" 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"/>
 +
Thor Cellson
 +
<img id="teamfoto" 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"/>
 +
Yeasteye
 +
<img id="teamfoto" 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"/>
 +
Captain Cellmerica
 +
<img id="teamfoto" 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"/>
 +
Black Cellow
  
 
</div>
 
</div>
Line 19: Line 31:
 
</div>
 
</div>
  
−
 
−
<script type="text/javascript">
 
−
var imgURLs = ['https://static.igem.org/mediawiki/2015/5/5e/Cellfie_Art_Supercellfie.jpeg','https://static.igem.org/mediawiki/2015/0/0c/Cellfie_Art_Ironcellfie.jpeg','https://static.igem.org/mediawiki/2015/5/54/Cellfie_Art_Hulk.jpeg','https://static.igem.org/mediawiki/2015/2/2c/Cellfie_Art_Thor.jpeg','https://static.igem.org/mediawiki/2015/3/3d/Cellfie_Art_Hawkeye.jpeg','https://static.igem.org/mediawiki/2015/a/a1/Cellfie_Art_Cellfie_America.jpeg','https://static.igem.org/mediawiki/2015/e/ee/Cellfie_Art_BlackWidow.jpeg','https://static.igem.org/mediawiki/2015/e/ee/Cellfie_Art_BlackWidow.jpeg']
 
−
 
−
function createCarousel() {
 
−
var carousel = document.getElementById('carousel');
 
−
slots = [];
 
−
carousel.style.cssText = 'width:100%;text-align:center;height:200px;position:relative;margin-top:80px;';
 
−
for (var i=0;i<imgURLs.length;i++) {
 
−
var div = 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;transition:transform 0.5s linear';
 
−
div.style.cssText = 'opacity:1;height:150px;display:inline;width:100px;display:none;perspective:400px;position:absolute;top:0px;left:50%;margin:0px;transition: margin 0.5s linear, opacity 0.5s linear;';
 
−
img.style.backgroundImage = 'url('+imgURLs[i]+')';
 
−
div.appendChild(img);
 
−
div.image = img;
 
−
slots.push(div);
 
−
carousel.appendChild(div);
 
−
}
 
−
/*var left = document.createElement('div');
 
−
left.style.cssText = 'position:absolute;top:0px;bottom:0px;left:0px;right:50%;z-index:100;cursor:pointer;';
 
−
left.onmouseover = function() {this.interval = window.setInterval('rotateCarousel(-10)',500);};
 
−
left.onmouseout = function() {window.clearInterval(this.interval);};
 
−
carousel.appendChild(left);
 
−
var right = document.createElement('div');
 
−
right.style.cssText = 'position:absolute;top:0px;bottom:0px;right:0px;left:50%;z-index:100;cursor:pointer;';
 
−
right.onmouseover = function() {this.interval = window.setInterval('rotateCarousel(10)',500);};
 
−
carousel.appendChild(right);*/
 
−
slotPos = [315,0,45,90,135,180,225,270];
 
−
renderCarousel();
 
−
window.setInterval('rotateCarousel(10)',500);
 
−
/*slots[0].style.display = 'block';
 
−
slots[0].style.marginLeft = '-375px';
 
−
slots[0].image.style.transform = 'rotateY(-45deg)';
 
−
slots[1].style.display = 'block';
 
−
slots[1].style.marginLeft = '-100px';
 
−
slots[1].image.style.transform = 'rotateY(0deg)';
 
−
slots[2].style.display = 'block';
 
−
slots[2].style.marginLeft = '175px';
 
−
slots[2].image.style.transform = 'rotateY(45deg)';*/
 
−
}
 
−
 
−
function rotateCarousel(step) {
 
−
for (var i=0;i<slots.length;i++) {
 
−
slotPos[i]+=step;
 
−
if (slotPos[i]>=360) slotPos[i]-=360;
 
−
if (slotPos[i]<0) slotPos[i] = 360-slotPos[i];
 
−
}
 
−
renderCarousel();
 
−
}
 
−
 
−
function renderCarousel() {
 
−
for (var i=0;i<slots.length;i++) {
 
−
console.log(slotPos[i]);
 
−
if (slotPos[i] < 180) slots[i].style.display = 'block';
 
−
else slots[i].style.display = 'none';
 
−
var angle = slotPos[i]-90;
 
−
var shift = -100;
 
−
if (angle > 90) shift = -50-(225/90*(180-angle));
 
−
else shift = -50+225/90*angle;
 
−
var op = 1;
 
−
if (angle > 0) op = (1/90*(180-(angle+90)));
 
−
else op = (1/90*(angle+90));
 
−
console.log('angle: '+angle);
 
−
console.log('shift: '+shift);
 
−
slots[i].image.style.transform = 'rotateY('+angle+'deg)';
 
−
slots[i].style.marginLeft = shift+'px';
 
−
slots[i].style.opacity = op;
 
−
}
 
−
}
 
−
 
−
createCarousel();
 
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 23:49, 18 September 2015

<
>


Supercellfie Iron Cell Culk Thor Cellson Yeasteye Captain Cellmerica Black Cellow