(33 intermediate revisions by the same user not shown) | |||
Line 351: | Line 351: | ||
.ali { | .ali { | ||
background-image: url("https://static.igem.org/mediawiki/2016/d/d7/T--Peshawar--ali-1.jpg"); | background-image: url("https://static.igem.org/mediawiki/2016/d/d7/T--Peshawar--ali-1.jpg"); | ||
− | |||
− | |||
− | |||
} | } | ||
.ali:hover { | .ali:hover { | ||
background-image: url("https://static.igem.org/mediawiki/2016/8/8f/T--Peshawar--ali-2.jpg"); | background-image: url("https://static.igem.org/mediawiki/2016/8/8f/T--Peshawar--ali-2.jpg"); | ||
− | |||
} | } | ||
+ | .asif{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/1/13/T--Peshawar--asif-1.jpg"); | ||
+ | } | ||
+ | .asif:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/a/a2/T--Peshawar--asif-2.jpg"); | ||
+ | } | ||
+ | .hadi{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/d/d1/T--Peshawar--hadi-1.jpg"); | ||
+ | } | ||
+ | .hadi:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/8/83/T--Peshawar--hadi-2.jpg"); | ||
+ | } | ||
+ | .ismail{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/4/4d/T--Peshawar--ismail-1.jpg"); | ||
+ | } | ||
+ | .ismail:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/b/ba/T--Peshawar--ismail-2.jpg"); | ||
+ | } | ||
+ | .maleeha{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/c/cb/T--Peshawar--maleeha-1.jpg"); | ||
+ | } | ||
+ | .maleeha:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/e/e8/T--Peshawar--maleeha-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .mansoor{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/7/73/T--Peshawar--mansoor-1.jpg"); | ||
+ | } | ||
+ | .mansoor:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/3/3d/T--Peshawar--mansoor-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .masoom{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/9/9c/T--Peshawar--masoom-1.jpg"); | ||
+ | } | ||
+ | .masoom:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/9/9c/T--Peshawar--masoom-1.jpg"); | ||
+ | } | ||
+ | |||
+ | .rabia{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/1/17/T--Peshawar--rabia-1.jpg"); | ||
+ | } | ||
+ | .rabia:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/e/ea/T--Peshawar--rabia-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .rayyan{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/c/cc/T--Peshawar--rayan-1.jpg"); | ||
+ | } | ||
+ | .rayyan:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/7/7e/T--Peshawar--rayan-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .sami{ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/5/54/T--Peshawar--sami-1.jpg"); | ||
+ | } | ||
+ | .sami:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/0/09/T--Peshawar--sami-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .sarah { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/7/74/T--Peshawar--sarah-1.jpg"); | ||
+ | } | ||
+ | .sarah:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/b/b8/T--Peshawar--sarah-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .sidra { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/9/99/T--Peshawar--sidra-1.jpg"); | ||
+ | } | ||
+ | .sidra:hover { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2016/1/17/T--Peshawar--sidra-2.jpg"); | ||
+ | } | ||
+ | |||
+ | .team{ | ||
+ | height: 200px; | ||
+ | width: 200px; | ||
+ | border-radius: 13px; | ||
+ | } | ||
.team:hover { | .team:hover { | ||
Line 419: | Line 494: | ||
} | } | ||
} | } | ||
+ | |||
+ | /****************BLOG GHOST BUTTON***************************/ | ||
+ | .banner{ | ||
+ | position:relative; | ||
+ | } | ||
+ | .blog-ghost-button{ | ||
+ | display: inline-block; | ||
+ | width: 200px; | ||
+ | padding: 8px; | ||
+ | color: #fff; | ||
+ | border-radius: 10px; | ||
+ | border: 2px solid #fff; | ||
+ | text-align: center; | ||
+ | outline: none; | ||
+ | text-decoration: none; | ||
+ | transition: background-color 0.2s ease-out, | ||
+ | color 0.2s ease-out; | ||
+ | |||
+ | position:absolute; | ||
+ | top: 50%; | ||
+ | left: 35%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .blog-ghost-button:hover, | ||
+ | .blog-ghost-button:active { | ||
+ | background-color: #fff; | ||
+ | color: #000; | ||
+ | transition: background-color 0.3s ease-in, | ||
+ | color 0.3s ease-in; | ||
+ | opacity: 0.8; | ||
+ | |||
+ | } | ||
+ | |||
+ | .content_wrapper a { | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | |||
+ | /****************SMOKE CANVAS***************************/ | ||
+ | canvas { | ||
+ | position:absolute; | ||
+ | margin-left : 50%; | ||
+ | left: -200px; | ||
+ | overflow: hidden; | ||
+ | |||
+ | } | ||
+ | |||
+ | #smoke{display:none;} | ||
</style> | </style> | ||
Line 507: | Line 632: | ||
</ul> | </ul> | ||
− | |||
+ | <!-- This is the HTML code for smoke--> | ||
+ | <canvas id="smoke-canvas"></canvas> | ||
+ | <img id="smoke" src="https://static.igem.org/mediawiki/2016/9/96/T--Peshawar--smoke.png"/> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | <!-- This is the end div tag of the sidebar--> | ||
Line 521: | Line 652: | ||
− | + | <!-- Start of StatCounter Code for Default Guide and its HTML --> | |
− | + | <script type="text/javascript"> | |
− | + | var sc_project=11100754; | |
− | + | var sc_invisible=1; | |
− | + | var sc_security="135c4f8d"; | |
+ | var scJsHost = (("https:" == document.location.protocol) ? | ||
+ | "https://secure." : "http://www."); | ||
+ | document.write("<sc"+"ript type='text/javascript' src='" + | ||
+ | scJsHost+ | ||
+ | "statcounter.com/counter/counter.js'></"+"script>"); | ||
+ | </script> | ||
+ | <noscript><div class="statcounter"><a title="shopify stats" | ||
+ | href="http://statcounter.com/shopify/" target="_blank"><img | ||
+ | class="statcounter" | ||
+ | src="//c.statcounter.com/11100754/0/135c4f8d/1/" | ||
+ | alt="shopify stats"></a></div></noscript> | ||
+ | <!-- End of StatCounter Code for Default Guide --> | ||
Line 588: | Line 731: | ||
}); | }); | ||
+ | //********************PRELOAD IMAGES (CUSTOM)************************** | ||
+ | $.preloadImages = function() { | ||
+ | for (var i = 0; i < arguments.length; i++) { | ||
+ | $("<img />").attr("src", arguments[i]); | ||
+ | } | ||
+ | } | ||
+ | $.preloadImages("https://static.igem.org/mediawiki/2016/8/8f/T--Peshawar--ali-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/a/a2/T--Peshawar--asif-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/8/83/T--Peshawar--hadi-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/b/ba/T--Peshawar--ismail-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/e/e8/T--Peshawar--maleeha-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/3/3d/T--Peshawar--mansoor-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/e/e9/T--Peshawar--masoom-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/e/ea/T--Peshawar--rabia-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/7/7e/T--Peshawar--rayan-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/0/09/T--Peshawar--sami-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/b/b8/T--Peshawar--sarah-2.jpg", | ||
+ | "https://static.igem.org/mediawiki/2016/1/17/T--Peshawar--sidra-2.jpg"); | ||
− | + | //********************SMOKE CANVAS JS************************** | |
+ | (function () { | ||
+ | var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; | ||
+ | window.requestAnimationFrame = requestAnimationFrame; | ||
+ | })(); | ||
+ | var canvas = document.getElementById("smoke-canvas"), | ||
+ | ctx = canvas.getContext("2d"), | ||
+ | settings = { | ||
+ | color: { | ||
+ | r: 255, | ||
+ | g: 255, | ||
+ | b: 255 | ||
+ | } | ||
+ | }, | ||
+ | loading = true; | ||
+ | |||
+ | canvas.height = document.body.offsetHeight; | ||
+ | canvas.width = 300; | ||
+ | |||
+ | var parts = [], | ||
+ | minSpawnTime = 40, | ||
+ | lastTime = new Date().getTime(), | ||
+ | maxLifeTime = Math.min(5000, (canvas.height / (1.5 * 60) * 1000)), | ||
+ | emitterX = canvas.width / 2, | ||
+ | emitterY = canvas.height - 10, | ||
+ | smokeImage = new Image(); | ||
+ | |||
+ | function spawn() { | ||
+ | if (new Date().getTime() > lastTime + minSpawnTime) { | ||
+ | lastTime = new Date().getTime(); | ||
+ | parts.push(new smoke(emitterX, emitterY)); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function render() { | ||
+ | if(loading){ | ||
+ | load(); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | var len = parts.length; | ||
+ | ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
+ | |||
+ | while (len--) { | ||
+ | if (parts[len].y < 0 || parts[len].lifeTime > maxLifeTime) { | ||
+ | parts.splice(len, 1); | ||
+ | } else { | ||
+ | parts[len].update(); | ||
+ | |||
+ | ctx.save(); | ||
+ | var offsetX = -parts[len].size / 2, | ||
+ | offsetY = -parts[len].size / 2; | ||
+ | |||
+ | ctx.translate(parts[len].x - offsetX, parts[len].y - offsetY); | ||
+ | ctx.rotate(parts[len].angle / 180 * Math.PI); | ||
+ | ctx.globalAlpha = parts[len].alpha; | ||
+ | ctx.drawImage(smokeImage, offsetX, offsetY, parts[len].size, parts[len].size); | ||
+ | ctx.restore(); | ||
+ | } | ||
+ | } | ||
+ | spawn(); | ||
+ | requestAnimationFrame(render); | ||
+ | } | ||
+ | |||
+ | function smoke(x, y, index) { | ||
+ | this.x = x; | ||
+ | this.y = y; | ||
+ | |||
+ | this.size = 1; | ||
+ | this.startSize = 32; | ||
+ | this.endSize = 40; | ||
+ | |||
+ | this.angle = Math.random() * 359; | ||
+ | |||
+ | this.startLife = new Date().getTime(); | ||
+ | this.lifeTime = 0; | ||
+ | |||
+ | this.velY = -1 - (Math.random() * 0.5); | ||
+ | this.velX = Math.floor(Math.random() * (-6) + 3) / 10; | ||
+ | } | ||
+ | |||
+ | smoke.prototype.update = function () { | ||
+ | this.lifeTime = new Date().getTime() - this.startLife; | ||
+ | this.angle += 0.2; | ||
+ | |||
+ | var lifePerc = ((this.lifeTime / maxLifeTime) * 100); | ||
+ | |||
+ | this.size = this.startSize + ((this.endSize - this.startSize) * lifePerc * .1); | ||
+ | |||
+ | this.alpha = 1 - (lifePerc * .01); | ||
+ | this.alpha = Math.max(this.alpha, 0); | ||
+ | |||
+ | this.x += this.velX; | ||
+ | this.y += this.velY; | ||
+ | } | ||
+ | |||
+ | smokeImage.src = document.getElementById("smoke").src; | ||
+ | smokeImage.onload = function(){ | ||
+ | loading = false; | ||
+ | } | ||
+ | |||
+ | function load(){ | ||
+ | if(loading){ | ||
+ | setTimeout(load, 100); | ||
+ | }else{ | ||
+ | render(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | render(); | ||
+ | |||
+ | // save off the original image for colorizing | ||
+ | var origImage = smokeImage; | ||
+ | |||
+ | window.onresize = resizeMe; | ||
+ | window.onload = resizeMe; | ||
+ | |||
+ | function resizeMe() { | ||
+ | canvas.height = document.body.offsetHeight; | ||
+ | } | ||
+ | |||
+ | function changeColor() { | ||
+ | var tCanvas = document.createElement("canvas"), | ||
+ | tCtx = tCanvas.getContext("2d"), | ||
+ | color = settings.color; | ||
+ | |||
+ | tCanvas.width = tCanvas.height = 32; | ||
+ | tCtx.drawImage(origImage, 0, 0, 32, 32); | ||
+ | |||
+ | var imgd = tCtx.getImageData(0, 0, 32, 32), | ||
+ | pix = imgd.data; | ||
+ | |||
+ | for (var i = 0, n = pix.length; i < n; i += 4) { | ||
+ | pix[i] = color.r | ||
+ | pix[i + 1] = color.g; | ||
+ | pix[i + 2] = color.b; | ||
+ | } | ||
+ | |||
+ | tCtx.putImageData(imgd, 0, 0); | ||
+ | return tCanvas.toDataURL(); | ||
+ | } | ||
+ | |||
+ | // Settings | ||
+ | var gui = new dat.GUI(); | ||
+ | var colorController = gui.addColor(settings, 'color').onChange(function () { | ||
+ | smokeImage.src = changeColor(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
</html> | </html> |
Latest revision as of 06:44, 11 September 2016