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

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';
+
*,*:before,*:after {box-sizing:inherit;margin:0; padding:0; border:0 none; position: relative;}
 +
html {
 +
background: #000;
 +
box-sizing:border-box;
 +
font-family: 'Vollkorn', sans-serif;
 +
font-size: 1rem;
 +
color: #000;
 +
}
  
−
*{
+
@media screen and (min-width: 700px) {
−
font-family: 'Source Sans Pro', sans-serif;
+
body > article {
−
box-sizing: border-box;
+
display: flex;
−
font-weight: 300;
+
flex-wrap: wrap;
−
padding: 0;
+
−
margin: 0;
+
 
}
 
}
−
 
+
figure {
−
.btn-wrapper{
+
background: #eee;
−
position: fixed;
+
width: calc( 50% + 1px);
−
top: calc(50% - 22px);
+
height: 100vh;
−
left: 0;
+
margin: 0 auto 10vh 0;
−
width: 100%;
+
position: sticky;
−
text-align: center;
+
top: 0;
 +
overflow: hidden;
 +
box-shadow: 4px -4px 8px rgba(0,0,0,.4);
 +
}
 +
figure::after {
 +
content: '';
 +
position: absolute;
 +
top: 5vmin;
 +
right: 5vmin;
 +
bottom: 5vmin;
 +
left: 45%;
 +
border: 2px dashed #fff;
 +
outline: 1px solid #fff;
 +
outline-offset: -5vmin;
 +
backdrop-filter: grayscale(1);
 +
pointer-events: none;
 +
}
 +
figure:nth-of-type(2n)::after {
 +
right: 45%;
 +
left: 5vmin;
 
}
 
}
−
 
+
section {
−
.btn{
+
background: #fff;
−
display: inline-block;
+
width: calc(50% + 1px);
−
box-shadow: none;
+
height: 100vh;
−
appearance: none;
+
margin: 0 0 10vh auto;
−
border: 0;
+
position: sticky;
−
outline: 0;
+
top: 0;
−
background-color: rgb(0, 240, 168);
+
// overflow: hidden;
−
height: 45px;
+
padding: 5vmin;
−
line-height: 42px;
+
box-shadow: -4px -4px 8px rgba(0,0,0,.4);
−
padding: 0 30px;
+
}
−
font-size: 20px;
+
figure:nth-of-type(1),
−
border-radius: 30px;
+
section:nth-of-type(1) {
−
color: rgb(40, 45, 50);
+
margin: 0 0 10vh 0;
−
cursor: pointer;
+
width: 50%;
−
transition: all .5s;
+
}
−
transition-timing-function: cubic-bezier(.2, 3, .4, 1);
+
figure:nth-of-type(2n) {
−
user-select: none;
+
margin: 0 0 10vh auto;
−
+
box-shadow: -4px -4px 8px rgba(0,0,0,.4);
−
&:hover{
+
}
−
transform: scale(1.1, 1.1);
+
section:nth-of-type(2n) {
−
}
+
margin: 0 auto 10vh 0;
−
+
box-shadow: 4px -4px 8px rgba(0,0,0,.4);
−
&:active{
+
−
transform: scale(1.05, 1.05);
+
 
}
 
}
 +
figure:last-of-type,
 +
section:last-of-type {
 +
margin-bottom: 0;
 
}
 
}
−
</style>
+
section::before {
−
 
+
background: inherit;
−
<div class="btn-wrapper">
+
z-index: 1;
−
<button type="button" class="btn">Touch Me!</button>
+
content: '';
−
</div>
+
position: absolute;
−
<canvas id="canvas"></canvas>
+
top: 50%;
−
 
+
left:0;
−
<script>
+
width: 7vmin;
−
var c = document.getElementById('canvas');
+
height: 7vmin;
−
var ctx = c.getContext('2d');
+
transform: translate(calc(-50% + 1px), -50%) rotate(-45deg);
−
var btn = document.getElementsByClassName('btn')[0];
+
clip-path: polygon(-15% -15%, 110% 0%, 0% 110%);
−
 
+
box-shadow: -4px -2px 8px rgba(0,0,0,.4);
−
c.width = window.innerWidth;
+
border-radius: 1.5vmin 0 0 0;
−
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);
+
−
+
 
}
 
}
−
 
+
section:nth-of-type(2n)::before {
−
function drawBg(){
+
left:auto;
−
ctx.rect(0, 0, c.width, c.height);
+
right: 0;
−
ctx.fillStyle = "rgb(40, 45, 50)";
+
transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1);
−
ctx.fill();
+
 
}
 
}
−
 
+
section::after {
−
function drawParticles(){
+
content: '';
−
for(i = 0; i < particles.length; i++){
+
position: absolute;
−
ctx.beginPath();
+
top: 5vmin;
−
ctx.arc(particles[i].x,
+
right: 45%;
−
particles[i].y,
+
bottom: 5vmin;
−
particles[i].size,
+
left: 5vmin;
−
0,
+
border: 2px dashed #fff;
−
Math.PI * 2);
+
outline: 1px solid #fff;
−
ctx.fillStyle = particles[i].color;
+
outline-offset: -5vmin;
−
ctx.closePath();
+
backdrop-filter: invert(1);
−
ctx.fill();
+
pointer-events: none;
−
}
+
 
}
 
}
−
 
+
section:nth-of-type(2n):after {
−
function incParticles(){
+
right: 5vmin;
−
for(i = 0; i < particles.length; i++){
+
left: 45%;
−
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);
+
−
}
+
−
}
+
 
}
 
}
−
 
+
figure img {
−
function createParticles(){
+
min-width: 100%;
−
for(i = 0; i < 30; i++){
+
min-height: 100%;
−
particles.push({
+
object-fit: cover;
−
x: mouseX,
+
object-position: center;
−
y: mouseY,
+
−
size: parseInt(Math.random() * 10),
+
−
color: 'rgb(' + ranRgb() + ')',
+
−
velX: ranVel(),
+
−
velY: ranVel()
+
−
});
+
−
}
+
 
}
 
}
−
 
+
section > div {
−
function ranRgb(){
+
display: flex;
−
var colors = [
+
flex-direction: column;
−
'255, 122, 206',
+
align-items: center;
−
'0, 157, 255',
+
height: 100%;
−
'0, 240, 168',
+
padding: 1rem;
−
'0, 240, 120'
+
−
];
+
−
+
−
var i = parseInt(Math.random() * 10);
+
−
+
−
return colors[i];
+
 
}
 
}
−
 
+
h1,
−
function ranVel(){
+
h2 {
−
var vel = 0;
+
margin: 15% 0 auto;
−
+
font-size: calc(5vmin + 3vmax);
−
if(Math.random() < 0.5){
+
text-align: center;
−
vel = Math.abs(Math.random());
+
font-weight: 700;
−
} else {
+
line-height: 1;
−
vel = -Math.abs(Math.random());
+
word-spacing: .5rem;
−
}
+
−
+
−
return vel;
+
 
}
 
}
−
 
+
p {
−
// Text
+
text-align: right;
−
 
+
width: 100%;
−
var btnTxt = [
+
font-family: "Cormorant", serif;
−
'Ooh',
+
font-weight: 400;
−
'Ouch!?',
+
font-style: italic;
−
'Stop!',
+
font-size: calc(1.5vmin + 1.75vmax);
−
'It hurtsssss',
+
margin-bottom: 5%;
−
'You like it?',
+
}
−
'Stoooopppp?',
+
a {
−
'Okay! How about this?',
+
color: transparent;
−
                'I will tell you a secret if you stop pushing!',
+
-webkit-text-stroke: 2px #212121;
−
                'Stop! Okay okay! I will tell you!',
+
text-decoration: none;
−
'Stop pushing!',
+
    font-weight: 900;
−
'Okay Victor',
+
    letter-spacing: 2px;
−
'Likes to eat Donkey!!',
+
}
−
'He knows what animals are good :)',
+
a:hover, a:focus {
−
'Facts of the day!',
+
-webkit-text-stroke: 1px #999;
−
'Come back tomorrow for more!',
+
−
'See you!',
+
−
'Xoxo KU Leuven'
+
−
];
+
−
 
+
−
function changeText(){
+
−
if(txtPosition !== btnTxt.length){
+
−
btn.innerHTML = btnTxt[txtPosition];
+
−
txtPosition += 1;
+
−
}
+
 
}
 
}
−
</script>
+
}
 +
</style>
 +
<article>
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=508' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h1>Scrolling half by half</h1>
 +
<p>Made in pure #CSS and almost all is "old properties" method. And a bit imagination.<br/>
 +
Yes, the flexbox is old now.</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=817' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2>I'm Kseso,<br/>
 +
&ldquo;a #CSS observer&rdquo;</h2>
 +
<p>Ramajero Argonauta, Enredique Amanuense de #CSS.</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=948' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2><a href='https://escss.blogspot.com'>&xi;sCSS Blog</a></h2>
 +
<p>#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=737' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2>#impoCSSible is nothing</h2>
 +
<p>You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=870' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2>Idea from E.Bouças´s <a href='https://codepen.io/eduardoboucas/full/qdaOWv/'>pen</a></h2>
 +
<p>Without jQuery or Javascript, nor fixed position (bye IOs problems)</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=743' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2>Images from unsplash.it</h2>
 +
<p>Because it´s the best for demos. Thanks, guys!</p>
 +
</div>
 +
</section>
 +
 +
<figure>
 +
<img src='https://unsplash.it/450/800?image=452' alt />
 +
</figure>
 +
<section>
 +
<div>
 +
<h2>show the PEN.<br/>
 +
<a href='https://escss.blogspot.com/2017/08/scroll-half-by-half-pure-css.html'>link the POST</a></h2>
 +
<p>Por una web con mucho estilo, para argonautas con buen gusto.</p>
 +
</div>
 +
</section>
 +
 +
</article>
 
</html>
 
</html>
 +
{{KU_Leuven_footer}}

Revision as of 16:03, 8 October 2017

Scrolling half by half

Made in pure #CSS and almost all is "old properties" method. And a bit imagination.
Yes, the flexbox is old now.

I'm Kseso,
“a #CSS observer”

Ramajero Argonauta, Enredique Amanuense de #CSS.

ξsCSS Blog

#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.

#impoCSSible is nothing

You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.

Idea from E.Bouças´s pen

Without jQuery or Javascript, nor fixed position (bye IOs problems)

Images from unsplash.it

Because it´s the best for demos. Thanks, guys!

show the PEN.
link the POST

Por una web con mucho estilo, para argonautas con buen gusto.