Difference between revisions of "Team:KU Leuven/HP/Education"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
+
       
 +
        h4 {
 +
            margin-bottom: 10px;
 +
        }
 +
        .background{
 +
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
 +
            position: initial;
 +
            background-size: 100%;
 +
            padding: 0 10px 0 10px;
 +
        }
  
−
*{
+
        #grad {
−
font-family: 'Source Sans Pro', sans-serif;
+
            background: -webkit-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Safari 5.1-6.0 */
−
box-sizing: border-box;
+
            background: -o-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Opera 11.1-12.0 */
−
font-weight: 300;
+
            background: -moz-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Firefox 3.6-15 */
−
padding: 0;
+
            background: linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Standard syntax */
−
margin: 0;
+
        }
−
}
+
       
 +
        p {
 +
          text-align:justify;
 +
          font-size: 20px;
 +
        }
 +
        </style>
 +
       
 +
            <div id="grad">
 +
                   
 +
                        <br>
 +
                   
 +
                        <div class="background">
 +
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Education</h1>
 +
                                <p style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">.... </p>
 +
                       
 +
                        </div>
 +
                    <br>
 +
                    <div class="container">
 +
                   
 +
                        <p style="text-align:justify; padding: 0px 50px 0px 50px;">
 +
                            Booo!</p>
  
−
.btn-wrapper{
+
                    </div>
−
position: fixed;
+
−
top: calc(50% - 22px);
+
−
left: 0;
+
−
width: 100%;
+
−
text-align: center;
+
−
}
+
  
−
.btn{
 
−
display: inline-block;
 
−
box-shadow: none;
 
−
appearance: none;
 
−
border: 0;
 
−
outline: 0;
 
−
background-color: rgb(0, 240, 168);
 
−
height: 45px;
 
−
line-height: 42px;
 
−
padding: 0 30px;
 
−
font-size: 20px;
 
−
border-radius: 30px;
 
−
color: rgb(40, 45, 50);
 
−
cursor: pointer;
 
−
transition: all .5s;
 
−
transition-timing-function: cubic-bezier(.2, 3, .4, 1);
 
−
user-select: none;
 
−
 
−
&:hover{
 
−
transform: scale(1.1, 1.1);
 
−
}
 
−
 
−
&:active{
 
−
transform: scale(1.05, 1.05);
 
−
}
 
−
}
 
−
</style>
 
  
−
<div class="btn-wrapper">
 
−
<button type="button" class="btn">Touch Me!</button>
 
−
</div>
 
−
<canvas id="canvas"></canvas>
 
  
−
<script>
+
       
−
var c = document.getElementById('canvas');
+
       
−
var ctx = c.getContext('2d');
+
−
var btn = document.getElementsByClassName('btn')[0];
+
−
 
+
−
c.width = window.innerWidth;
+
−
c.height = window.innerHeight;
+
−
 
+
−
var mouseX = c.width / 2;
+
−
var mouseY = c.height / 2;
+
−
var txtPosition = 0;
+
−
 
+
−
var particles = [];
+
−
 
+
−
btn.addEventListener('mouseup', function(e){
+
−
mouseX = e.clientX;
+
−
mouseY = e.clientY;
+
−
+
−
createParticles();
+
−
changeText();
+
−
});
+
−
 
+
−
setTimeout(function(){
+
−
createParticles();
+
−
}, 250);
+
−
 
+
−
draw();
+
−
 
+
−
function draw(){
+
−
+
−
drawBg();
+
−
incParticles();
+
−
drawParticles();
+
−
+
−
window.requestAnimationFrame(draw);
+
−
+
−
}
+
−
 
+
−
function drawBg(){
+
−
ctx.rect(0, 0, c.width, c.height);
+
−
ctx.fillStyle = "rgb(40, 45, 50)";
+
−
ctx.fill();
+
−
}
+
−
 
+
−
function drawParticles(){
+
−
for(i = 0; i < particles.length; i++){
+
−
ctx.beginPath();
+
−
ctx.arc(particles[i].x,
+
−
particles[i].y,
+
−
particles[i].size,
+
−
0,
+
−
Math.PI * 2);
+
−
ctx.fillStyle = particles[i].color;
+
−
ctx.closePath();
+
−
ctx.fill();
+
−
}
+
−
}
+
−
 
+
−
function incParticles(){
+
−
for(i = 0; i < particles.length; i++){
+
−
particles[i].x += particles[i].velX;
+
−
particles[i].y += particles[i].velY;
+
−
+
−
particles[i].size = Math.max(0, (particles[i].size - .05));
+
−
+
−
if(particles[i].size === 0){
+
−
particles.splice(i, 1);
+
−
}
+
−
}
+
−
}
+
−
 
+
−
function createParticles(){
+
−
for(i = 0; i < 30; i++){
+
−
particles.push({
+
−
x: mouseX,
+
−
y: mouseY,
+
−
size: parseInt(Math.random() * 10),
+
−
color: 'rgb(' + ranRgb() + ')',
+
−
velX: ranVel(),
+
−
velY: ranVel()
+
−
});
+
−
}
+
−
}
+
−
 
+
−
function ranRgb(){
+
−
var colors = [
+
−
'255, 122, 206',
+
−
'0, 157, 255',
+
−
'0, 240, 168',
+
−
'0, 240, 120'
+
−
];
+
−
+
−
var i = parseInt(Math.random() * 10);
+
−
+
−
return colors[i];
+
−
}
+
−
 
+
−
function ranVel(){
+
−
var vel = 0;
+
−
+
−
if(Math.random() < 0.5){
+
−
vel = Math.abs(Math.random());
+
−
} else {
+
−
vel = -Math.abs(Math.random());
+
−
}
+
−
+
−
return vel;
+
−
}
+
−
 
+
−
// Text
+
−
 
+
−
var btnTxt = [
+
−
'Ooh',
+
−
'Ouch!?',
+
−
'Stop!',
+
−
'It hurtsssss',
+
−
'You like it?',
+
−
'Stoooopppp?',
+
−
'Okay! How about this?',
+
−
                'I will tell you a secret if you stop pushing!',
+
−
                'Stop! Okay okay! I will tell you!',
+
−
'Stop pushing!',
+
−
'Okay Victor',
+
−
'Likes to eat Donkey!!',
+
−
'He knows what animals are good :)',
+
−
'Facts of the day!',
+
−
'Come back tomorrow for more!',
+
−
'See you!',
+
−
'Xoxo KU Leuven'
+
−
];
+
−
 
+
−
function changeText(){
+
−
if(txtPosition !== btnTxt.length){
+
−
btn.innerHTML = btnTxt[txtPosition];
+
−
txtPosition += 1;
+
−
}
+
−
}
+
−
</script>
+
 
</html>
 
</html>
 +
{{KU_Leuven_footer}}

Revision as of 21:25, 13 October 2017


Education

....


Booo!