Ajout d'une page d'acceuil
This commit is contained in:
parent
97f9fe4e33
commit
185e8b336b
|
|
@ -0,0 +1,32 @@
|
|||
@font-face {
|
||||
font-family: 'Franchise';
|
||||
src: local('Franchise Regular'), local('Franchise-Regular'),
|
||||
url('fonts/Franchise-Regular.woff2') format('woff2'),
|
||||
url('fonts/Franchise-Regular.woff') format('woff'),
|
||||
url('fonts/Franchise-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Franchise Filled';
|
||||
src: local('Franchise Filled Regular'), local('FranchiseFilled-Regular'),
|
||||
url('fonts/FranchiseFilled-Regular.woff2') format('woff2'),
|
||||
url('fonts/FranchiseFilled-Regular.woff') format('woff'),
|
||||
url('fonts/FranchiseFilled-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cube';
|
||||
src: local('Cube'),
|
||||
url('fonts/Cube.woff2') format('woff2'),
|
||||
url('fonts/Cube.woff') format('woff'),
|
||||
url('fonts/Cube.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,55 @@
|
|||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas, .texte {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.texte {
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
background-blend-mode: exclusion;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.texte, a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 4em "Franchise", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
main > * {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel="stylesheet" href="/css/master.css">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
|
||||
<title>shlag zone</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<main></main>
|
||||
|
||||
<div class="texte">
|
||||
<h1>Bienvenue dans la Shlag Zone</h1>
|
||||
|
||||
<h2>C'est quoi ?</h2>
|
||||
|
||||
<p>On sait pas trop :)</p>
|
||||
|
||||
<h2>C'est qui ?</h2>
|
||||
|
||||
<p>Des gens chouettes qui font de l'internet</p>
|
||||
|
||||
<h2>C'est comment ?</h2>
|
||||
|
||||
<p>Bien et toi ? :)</p>
|
||||
|
||||
<h2>Mais encore ?</h2>
|
||||
|
||||
<a href="zone/liens.html">Entre dans la zone et tu verra</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="js/p5.min.js" charset="utf-8"></script>
|
||||
<script src="js/background.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
let count = 1000;
|
||||
|
||||
var particles_a = [];
|
||||
var particles_b = [];
|
||||
var particles_c = [];
|
||||
var fade = 200;
|
||||
var radius = 3;
|
||||
|
||||
const w = window.innerWidth;
|
||||
const h = 600;
|
||||
|
||||
let noiseScale = 10;
|
||||
let noiseStrength = 1.2;
|
||||
|
||||
function setup() {
|
||||
createCanvas(windowWidth, windowHeight);
|
||||
noStroke();
|
||||
|
||||
for (let i=0; i<count; i++) {
|
||||
let loc_a = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5 -h*0.5, 2);
|
||||
let angle_a = random(TWO_PI);
|
||||
let dir_a = createVector(cos(angle_a), sin(angle_a));
|
||||
|
||||
let loc_b = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
|
||||
let angle_b = random(TWO_PI);
|
||||
let dir_b = createVector(cos(angle_b), sin(angle_b));
|
||||
|
||||
let loc_c = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
|
||||
let angle_c = random(TWO_PI);
|
||||
let dir_c = createVector(cos(angle_c), sin(angle_c));
|
||||
|
||||
particles_a[i] = new Particle(loc_a, dir_a, 0.5);
|
||||
particles_b[i] = new Particle(loc_b, dir_b,0.6);
|
||||
particles_c[i] = new Particle(loc_c, dir_c, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
fill(0,5);
|
||||
noStroke();
|
||||
rect(0,0,width, height);
|
||||
|
||||
for (let i=0; i<count; i++) {
|
||||
|
||||
fill(191, 19, 99, fade);
|
||||
particles_a[i].move();
|
||||
particles_a[i].update(radius);
|
||||
particles_a[i].checkEdges();
|
||||
|
||||
fill (57,166,163, fade);
|
||||
particles_b[i].move();
|
||||
particles_b[i].update(radius);
|
||||
particles_b[i].checkEdges();
|
||||
|
||||
fill(222,238,234,fade);
|
||||
particles_c[i].move();
|
||||
particles_c[i].update(radius);
|
||||
particles_c[i].checkEdges();
|
||||
}
|
||||
}
|
||||
|
||||
let Particle = function(loc_, dir_, speed_) {
|
||||
this.loc = loc_;
|
||||
this.dir = dir_;
|
||||
this.speed = speed_;
|
||||
this.d = 1;
|
||||
}
|
||||
|
||||
Particle.prototype.run = function() {
|
||||
this.move();
|
||||
this.checkEdges();
|
||||
this.update();
|
||||
}
|
||||
|
||||
Particle.prototype.update = function(r) {
|
||||
ellipse(this.loc.x, this.loc.y, r);
|
||||
}
|
||||
|
||||
Particle.prototype.checkEdges = function() {
|
||||
if (this.loc.x < 0 || this.loc.x > width || this.loc.y < 0 || this.loc.y > height) {
|
||||
this.loc.x = random(w) + windowWidth*0.5 - w*0.5;
|
||||
this.loc.y = random(h) + windowHeight*0.5 - h*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
Particle.prototype.move = function() {
|
||||
this.angle = noise(this.loc.x/noiseScale, this.loc.y/noiseScale, frameCount/noiseScale) * TWO_PI*noiseStrength;
|
||||
this.dir.x = cos(this.angle) + sin(this.angle) - sin(this.angle);
|
||||
this.dir.y = sin(this.angle) - cos(this.angle)*sin(this.angle);
|
||||
this.vel = this.dir.copy();
|
||||
this.vel.mult(this.speed*this.d);
|
||||
this.loc.add(this.vel);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Les liens de la shlag zone</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="art/bubbles.html">Bubbles</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue