n07070/shlag-zone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout d'une page d'acceuil

Browse Source
This commit is contained in:
n07070 2022-02-19 16:07:09 +01:00
parent 97f9fe4e33
commit 185e8b336b
15 changed files with 237 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
website/css/fonts.css Normal file
View File

@ -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;
}

BIN
website/css/fonts/Cube.ttf Normal file
View File

Binary file not shown.

BIN
website/css/fonts/Cube.woff Normal file
View File

Binary file not shown.

BIN
website/css/fonts/Cube.woff2 Normal file
View File

Binary file not shown.

BIN
website/css/fonts/Franchise-Regular.ttf Normal file
View File

Binary file not shown.

BIN
website/css/fonts/Franchise-Regular.woff Normal file
View File

Binary file not shown.

BIN
website/css/fonts/Franchise-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
website/css/fonts/FranchiseFilled-Regular.ttf Normal file
View File

Binary file not shown.

BIN
website/css/fonts/FranchiseFilled-Regular.woff Normal file
View File

Binary file not shown.

BIN
website/css/fonts/FranchiseFilled-Regular.woff2 Normal file
View File

Binary file not shown.

55
website/css/master.css Normal file
View File

@ -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;
}

41
website/index.html Normal file
View File

@ -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>

94
website/js/background.js Normal file
View File

@ -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);
}

3
website/js/p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

12
website/zone/liens.html Normal file
View File

@ -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>