Difference between revisions of "Team:UCL/Playingaround3"

Line 592: Line 592:
 
a.buttongreen  {text-decoration: none; color: #fff;}
 
a.buttongreen  {text-decoration: none; color: #fff;}
  
 +
h2.ss-subtitle{
 +
    padding: 10px 10px 40px;
 +
    font-size: 52px;
 +
    text-transform: uppercase;
 +
    color: rgba(0,0,0,0.8);
 +
position: relative;
 +
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 +
}
 +
h2.ss-subtitle:before{
 +
width: 4px;
 +
height: 40px;
 +
background: rgba(17,17,22,0.8);
 +
content: '';
 +
position: absolute;
 +
right: 75%;
 +
margin-right: -4px;
 +
bottom: -4px;
 +
-moz-border-radius: 2px 2px 0px 0px;
 +
-webkit-border-radius: 2px 2px 0px 0px;
 +
border-radius: 2px 2px 0px 0px;
 +
}
 +
h2.ss-subtitle:after{
 +
width: 25%;
 +
height: 0px;
 +
border-bottom: 4px dotted rgba(17,17,22,0.8);
 +
content: '';
 +
position: absolute;
 +
right: 50%;
 +
margin-right: -1px;
 +
bottom: -4px;
 +
}
 +
.ss-links{
 +
position: fixed;
 +
left: 10px;
 +
top: 166px;
 +
width: 25%;
 +
z-index: 100;
 +
}
 +
.ss-links a{
 +
background: rgba(0,0,0,0.2);
 +
font-size: 16px;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
margin: 5px;
 +
float: left;
 +
border-radius: 50%;
 +
display: block;
 +
text-align: center;
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
}
 +
.ss-links a:hover{
 +
background: rgba(0,0,0,0.4);
 +
}
 +
.ss-container{
 +
    width: 100%;
 +
    position: relative;
 +
    text-align: left;
 +
    float: left;
 +
overflow: hidden;
 +
padding-bottom: 500px;
 +
}
 +
.ss-container h2{
 +
    font-size: 40px;
 +
    text-transform: uppercase;
 +
    color: rgba(78,84,123,0.2);
 +
text-shadow: 0px 1px 1px #fff;
 +
padding: 20px 0px;
 +
}
 +
.ss-container:before{
 +
    position: absolute;
 +
    width: 4px;
 +
    background: rgba(17,17,22,0.8);
 +
    top: 0px;
 +
    left: 50%;
 +
margin-left: -2px;
 +
    content: '';
 +
    height: 100%;
 +
}
 +
.ss-row{
 +
    width: 100%;
 +
    clear: both;
 +
    float: left;
 +
    position: relative;
 +
    padding: 30px 0;
 +
}
 +
.ss-left, .ss-right{
 +
    float: left;
 +
    width: 48%;
 +
    position: relative;
 +
}
 +
.ss-right{
 +
    padding-left: 2%;
 +
}
 +
.ss-left{
 +
    text-align: right;
 +
    float: left;
 +
    padding-right: 2%;
 +
}
 +
.ss-circle{
 +
    border-radius: 50%;
 +
    overflow: hidden;
 +
    display: block;
 +
    text-indent: -9000px;
 +
    text-align: left;
 +
    -webkit-box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
    -moz-box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
    box-shadow:
 +
0px 2px 5px rgba(0,0,0,0.7) inset,
 +
0px 0px 0px 12px rgba(61,64,85,0.3);
 +
background-size: cover;
 +
background-color: #f0f0f0;
 +
background-repeat: no-repeat;
 +
background-position: center center;
 +
position: static;
 +
}
 +
.ss-small .ss-circle{
 +
width: 100px;
 +
height: 100px;
 +
}
 +
.ss-medium .ss-circle{
 +
width: 200px;
 +
height: 200px;
 +
}
 +
.ss-large .ss-circle{
 +
width: 300px;
 +
height: 300px;
 +
}
 +
.ss-circle-deco:before{
 +
width: 29%;
 +
height: 0px;
 +
border-bottom: 5px dotted #ddd;
 +
border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
 +
-webkit-box-shadow: 0px 1px 1px #fff;
 +
-moz-box-shadow: 0px 1px 1px #fff;
 +
box-shadow: 0px 1px 1px #fff;
 +
position: absolute;
 +
top: 50%;
 +
content: '';
 +
margin-top: -3px;
 +
}
 +
.ss-circle-deco:after{
 +
width: 0px;
 +
height: 0px;
 +
border-top: 10px solid transparent;
 +
    border-bottom: 10px solid transparent;
 +
content: '';
 +
position: absolute;
 +
top: 50%;
 +
margin-top: -10px;
 +
}
 +
.ss-left .ss-circle-deco:before{
 +
    right: 2%; 
 +
}
 +
.ss-right .ss-circle-deco:before{
 +
    left: 2%; 
 +
}
 +
.ss-left .ss-circle-deco:after{
 +
right: 0;
 +
border-right: 10px solid rgba(17,17,22,0.8);
 +
}
 +
.ss-right .ss-circle-deco:after{
 +
left: 0;
 +
border-left: 10px solid rgba(17,17,22,0.8);
 +
}
 +
.ss-left .ss-circle{
 +
    float: right;
 +
    margin-right: 30%;
 +
}
 +
.ss-right .ss-circle{
 +
    float: left;
 +
    margin-left: 30%;
 +
}
 +
.ss-container h3{
 +
    margin-top: 34px;
 +
padding: 10px 15px;
 +
background: rgba(26, 27, 33, 0.6);
 +
text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
 +
}
 +
.ss-container .ss-medium h3{
 +
margin-top: 82px;
 +
}
 +
.ss-container .ss-large h3{
 +
margin-top: 133px;
 +
}
 +
.ss-container .ss-left h3{
 +
border-right: 5px solid rgba(164,166,181,0.8);
 +
}
 +
.ss-container .ss-right h3{
 +
border-left: 5px solid rgba(164,166,181,0.8);
 +
}
  
  
Line 655: Line 854:
  
 
</div>
 
</div>
 +
 +
 +
  <div id="ss-container" class="ss-container">
 +
                <div class="ss-row">
 +
                    <div class="ss-left">
 +
                        <h2 id="november">November</h2>
 +
                    </div>
 +
                    <div class="ss-right">
 +
                        <h2>2011</h2>
 +
                    </div>
 +
                </div>
 +
                <div class="ss-row ss-medium">
 +
                    <div class="ss-left">
 +
                        <a href="http://tympanus.net/Tutorials/TypographyEffects/" class="ss-circle ss-circle-1">Typography Effects with CSS3 and jQuery</a>
 +
                    </div>
 +
                    <div class="ss-right">
 +
                        <h3>
 +
                            <span>November 28, 2011</span>
 +
                            <a href="http://tympanus.net/Tutorials/TypographyEffects/">Typography Effects with CSS3 and jQuery</a>
 +
                        </h3>
 +
                    </div>
 +
                </div>
 +
  
 
<div id="intro1">
 
<div id="intro1">
Line 773: Line 995:
 
});
 
});
 
</script>
 
</script>
 +
 +
<script type="text/javascript">
 +
/*
 +
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 +
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
 +
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
 +
 +
jQuery.extend( jQuery.easing,
 +
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
 +
</script>
  
 
</html>
 
</html>

Revision as of 11:06, 20 July 2015

November

2011

Typography Effects with CSS3 and jQuery

November 28, 2011 Typography Effects with CSS3 and jQuery

The number of microorganisms in human gut is higher than the number of human cells in our body. Their metabolic activity equals that of liver and plays crucial role in many key processes such as digestion, drug metabolism, or functioning of the immune system...
Studies in have shown that the gut microbiome is also capable of influencing the chemistry of our , thus regulating our behaviour , anxiety , mood , cognition and pain ...
Being inspired by this emerging research area, UCL 2015 team wants to explore the modulation of the gut bacteria as a strategy for developing novel treatments for mental health disorders. Ultimately, our goal is to harness synthetic biology to make people happy!

Mind the Gut: Abstract

The gut–brain axis refers to the biochemical signalling taking place between the gastrointestinal tract and the nervous system, often involving intestinal microbiota, which have been shown to play an important role in healthy brain function. The current research suggests that gut microbes secrete neuroactive compounds – including neurotransmitters – that interact with the brain via two main mechanisms: the vagus nerve, connecting brain and digestive tract, and the immune system, which maintains its own means of communication with the brain.

In line with the ongoing research, UCL iGEM 2015 aims to develop synthetic probiotic strains that mimic the neuromodulatory strategies identified in gut microbes, with a focus on regulation of tryptophan pathway and signalling via serotonin. Additionally, in order to incorporate our neuromodulators into precise and safe therapeutic devices, we are developing a set of sensors capable of detecting mood-related physiological changes in the gut environment.

Available small molecule treatments are associated with both stigma and side effects. We believe that, besides aiding in better understanding of the communication between the gut microbiome and nervous system, our work will also lay a foundation for novel user-friendly treatments targeting a range of mental health disorders.

Back to top