|
|
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> |