Difference between revisions of "Team:Tuebingen/Art and Design"
Line 31: | Line 31: | ||
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;transition:transform 0.5s linear'; | 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 = 'height:150px;display:inline;width:130px;display:none;perspective:400px;position:absolute;top:0px;left:50%;margin:0px;transition: margin 0.5s linear;'; | + | div.style.cssText = 'opacity:1;height:150px;display:inline;width:130px;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]+')'; | img.style.backgroundImage = 'url('+imgURLs[i]+')'; | ||
div.appendChild(img); | div.appendChild(img); | ||
Line 78: | Line 78: | ||
if (angle >90) shift = -100-(225/90*(180-angle)); | if (angle >90) shift = -100-(225/90*(180-angle)); | ||
else shift = -100+225/90*(angle); | else shift = -100+225/90*(angle); | ||
+ | var op = 1; | ||
+ | if (angle >90) op = 1/90*(180-angle); | ||
+ | else op = 1/90*(angle); | ||
console.log('angle: '+angle); | console.log('angle: '+angle); | ||
console.log('shift: '+shift); | console.log('shift: '+shift); | ||
slots[i].image.style.transform = 'rotateY('+angle+'deg)'; | slots[i].image.style.transform = 'rotateY('+angle+'deg)'; | ||
slots[i].style.marginLeft = shift+'px'; | slots[i].style.marginLeft = shift+'px'; | ||
+ | slots[i].style.opacity = op; | ||
} | } | ||
} | } |
Revision as of 17:30, 18 September 2015
![](https://static.igem.org/mediawiki/2015/b/ba/Team_Tuebingen_menu_coli_mit_lightstrahl.png)
<
>