TP1 et TP2 terminés
This commit is contained in:
Phuntsok Drak-pa
parent
1c90860183
commit
d9e60dfd9e
|
|
@ -0,0 +1,32 @@
|
|||
1) Carré
|
||||
|
||||
Créer un carré de couleur qui se déplace de 3px vers la droite 60 fois par seconde
|
||||
Dès qu'il commence à sortir de l'écran, il rentre à nouveau sur la gauche, puis on boucle
|
||||
Le carré sera donc à droite et à gauche en même temps lorsqu'il sort.
|
||||
|
||||
|
||||
2) Table
|
||||
|
||||
Cloner le git suivant : https://github.com/marak/Faker.js/
|
||||
Lire rapidement la documentation
|
||||
Initialiser la librairie Faker avec locale "fr"
|
||||
Générer un tableau de 500 personnes : {nom, prénom, ville, métier}
|
||||
Créer un élément "table" avec une colonne pour chaque propriété
|
||||
L'en-tête des colonnes contient un bouton ayant pour texte la propriété de la colonne
|
||||
Ajouter toutes les personnes à la table
|
||||
Lorsqu'on clique sur un en-tête, classer le tableau par ordre alphabétique sur la propriété concernée
|
||||
utiliser la méthode Array.sort()
|
||||
classer le tableau
|
||||
redessiner l'élément table
|
||||
|
||||
3) Canvas & Zoom
|
||||
|
||||
Créer un élément canvas 800x600px
|
||||
Créer un élément img qui ne sera pas ajouté au corps de page
|
||||
Donner une source à ce dernier
|
||||
Une fois chargée, dessiner l'image sur le canvas à l'aide de la méthode "drawImage"
|
||||
Lorsque le curseur bouge au dessus du canvas, programmer un effet de loupe carrée :
|
||||
Copier les pixels de l'image originale vers la zone du canvas située sous le curseur en doublant la taille des pixels concernés
|
||||
La méthode "drawImage" prend 9 arguments, voir la documentation MDN
|
||||
|
||||
Bonus : programmer l'effet loupe avec un rond plutôt qu'un carré
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
exo
|
||||
|
||||
écrire une classe ES6 "Button"
|
||||
|
||||
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
|
||||
|
||||
1 - dans le constructeur, créer un élément HTML <div/> qui sera la représentation visuelle du bouton
|
||||
2 - il faudra donc une variable de classe : this.element = [l'élément HTML contrôlé par la classe];
|
||||
3 - appliquer des propriétés CSS à l'élément (par exemple : color, background-color, border, border-radius)
|
||||
> https://www.w3schools.com/cssref
|
||||
4 - exécuter une méthode lorsque l'utilisateur clique sur l'élément HTML
|
||||
> this.element.addEventListener(...
|
||||
> on écrit généralement une méthode "addListeners" qui rassemble tous les événements de l'élément
|
||||
> attention au binding, il faut conserver la référence vers l'objet "this" dans les callbacks
|
||||
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind
|
||||
5 - ajouter une méthode en argument sur le constructeur qui sera exécutée lorsqu'on clique sur le bouton
|
||||
|
||||
6 - écrire une classe fille de Button > "HoverButton"
|
||||
7 - exécuter une méthode lorsque le curseur passe au dessus de l'élément HTML
|
||||
> https://www.w3schools.com/jsref/dom_obj_event.asp
|
||||
> appliquer une ombre CSS pour signifier que le bouton est "actif" (box-shadow)
|
||||
8 - coder l'action inverse lorsque le curseur sort du bouton (enlever l'ombre)
|
||||
|
||||
9 - écrire une classe fille de Button > "PushButton"
|
||||
10 - exécuter une méthode lorsque le curseur est enfoncé sur l'élément HTML
|
||||
> https://www.w3schools.com/jsref/dom_obj_event.asp
|
||||
> appliquer une ombre CSS interne (box-shadow inset)
|
||||
11 - coder l'action inverse lorsque qu'on relâche le clic (enlever l'ombre) OU que le curseur sort du bouton
|
||||
|
||||
12 - écrire une classe "HoverPushButton"
|
||||
|
||||
programmer une animation
|
||||
|
||||
1 - créer une variable globale pointant vers un petit carré de couleur avec des coordonnées absolues
|
||||
2 - deux variables int globales correspondant aux coordonnées du carré
|
||||
2 - écrire une méthode exécutée à chaque "frame"
|
||||
> https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame
|
||||
3 - à chaque exécution de cette méthode, faire avancer le carré d'un pixel vers la droite
|
||||
4 - lorsque le carré sort de l'écran, faire en sorte qu'il rentre à nouveau par la gauche
|
||||
5 - créer un autre carré qui fera des aller-retours
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
cloner le dossier "default" pour démarrer un nouveau projet JS
|
||||
|
||||
1 - ajouter un élément input de type file au corps de page
|
||||
2 - puis un élément canvas 800x600px
|
||||
3 - lorsqu'on sélectionne un fichier depuis l'input (événement "change"):
|
||||
3.1 - vérifier qu'il s'agit bien d'une image
|
||||
3.2 - insérer cette image à l'échelle dans le contexte du canvas
|
||||
4 - créer trois composants slider "range"
|
||||
ces composants serviront à modifier la luminosité, le contraste, et la saturation de l'image en temps-réel
|
||||
5 - faire des recherches et implémenter les trois actions des sliders de la manière qui vous semble la plus efficace.
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Index - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/button.css">
|
||||
<script type="text/javascript" src="../js/button.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a href="../">Home</a></li>
|
||||
<li><a href="./">Moving red square</a></li>
|
||||
<li><a href="../faker">Faker</a></li>
|
||||
<li><a class="active" href="../button">Button</a></li>
|
||||
<li><a href="../canvas-zoom">Canvas & Zoom</a></li>
|
||||
</ul>
|
||||
<div id="container" class="content">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Moving Square - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/canvas.css" />
|
||||
<script type="text/javascript" src="../js/canvas.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a href="../">Home</a></li>
|
||||
<li><a href="./">Moving red square</a></li>
|
||||
<li><a href="../faker">Faker</a></li>
|
||||
<li><a class="active" href="../canvas-zoom">Canvas & Zoom</a></li>
|
||||
<li><a href="../button">Button</a></li>
|
||||
</ul>
|
||||
<div id="container">
|
||||
<div class="content">
|
||||
<p>Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.</p>
|
||||
</div>
|
||||
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
|
||||
<canvas id="canvastp1" width="800" height="600"></canvas>
|
||||
<canvas id="loupe" width="80" height="80" display="none"></canvas>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
#container {
|
||||
|
||||
}
|
||||
#Button {
|
||||
background-color: #F67280;
|
||||
border: none;
|
||||
color: #DDD;
|
||||
padding: 0px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
#container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#canvastp1 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 1px solid #6C5B7B;
|
||||
}
|
||||
|
||||
#loupe {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
#ardeche {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2,10 +2,19 @@ body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#carre {
|
||||
#container {
|
||||
}
|
||||
|
||||
.carre {
|
||||
border: solid 50px #f67280;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin-top: 100px;
|
||||
margin-left: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#carre2 {
|
||||
display: none;
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,6 +101,10 @@ h2 {
|
|||
max-width: 650px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #F8B195;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
|
|
@ -124,6 +128,20 @@ li a:hover,
|
|||
background-color: #f67280;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #f8b195;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #254c6d;
|
||||
}
|
||||
|
||||
/*****************************************************************************/
|
||||
/* scrollbar */
|
||||
/*****************************************************************************/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Faker - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
|
||||
<link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css">
|
||||
<script src="https://univ.phundrak.fr/js/faker.min.js"></script>
|
||||
<script src="https://univ.phundrak.fr/js/exo-faker.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a href="https://univ.phundrak.fr/">Home</a></li>
|
||||
<li><a href="https://univ.phundrak.fr/moving-square/">Moving red square</a></li>
|
||||
<li><a class="active" href="https://univ.phundrak.fr/faker">Faker</a></li>
|
||||
<li><a href="https://univ.phundrak.fr/canvas-zoom">Canvas & Zoom</a></li>
|
||||
</ul>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<h2>Liste des identitées créées avec Faker</h2>
|
||||
<p>Vous pouvez trouver ci-dessous une liste de cinq cent identitées créées à l’aide de la bibliothèque <a href="https://github.com/Marak/faker.js">Faker.js</a>.</p>
|
||||
<div id="list" style="text-align:center">
|
||||
<p>Chargement...</p>
|
||||
<p>Si rien ne se passe au bout de dix secondes, veuillez vérifier que votre navigateur web supporte Javascript, et réessayez.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 756 KiB |
11
index.html
11
index.html
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Index - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
|
|
@ -9,10 +10,11 @@
|
|||
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a class="active" href="https://univ.phundrak.fr/">Home</a></li>
|
||||
<li><a href="moving-square/">Moving red square</a></li>
|
||||
<li><a href="faker">Faker</a></li>
|
||||
<li><a href="canvas-zoom">Canvas & Zoom</a></li>
|
||||
<li><a class="active" href="./">Home</a></li>
|
||||
<li><a href="square/">Square</a></li>
|
||||
<li><a href="faker/">Faker</a></li>
|
||||
<li><a href="canvas/">Canvas</a></li>
|
||||
<li><a href="button/">Button</a></li>
|
||||
</ul>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
|
|
@ -21,4 +23,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
window.onload = main;
|
||||
var d = document;
|
||||
var container;
|
||||
var button;
|
||||
|
||||
function main() {
|
||||
console.log("JS loaded!");
|
||||
container = d.getElementById("container");
|
||||
addListeners(d.body, 'click', createbutton);
|
||||
}
|
||||
|
||||
function addListeners(e, a, f) {
|
||||
e.addEventListener(a, f);
|
||||
}
|
||||
|
||||
class Button {
|
||||
constructor(f) {
|
||||
this.element = d.createElement("div");
|
||||
this.element.id = "Button";
|
||||
this.element.innerHTML = "<p>Button</p>";
|
||||
container.appendChild(this.element);
|
||||
addListeners(this.element, 'mouseover', HoverButton.applyShadow);
|
||||
addListeners(this.element, 'mouseout', HoverButton.applyUnshadow);
|
||||
addListeners(this.element, 'mouseout', HoverButton.applyUnpush);
|
||||
addListeners(this.element, 'mousedown', PushButton.applyPush);
|
||||
addListeners(this.element, 'mouseup', PushButton.applyUnpush);
|
||||
}
|
||||
}
|
||||
|
||||
class HoverButton extends Button {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
static applyShadow() {
|
||||
button.element.style.boxShadow = "3px 3px 5px #6C5B7B";
|
||||
}
|
||||
static applyUnshadow() {
|
||||
button.element.style.boxShadow = "none";
|
||||
}
|
||||
}
|
||||
|
||||
class PushButton extends Button {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
static applyPush(elem) {
|
||||
button.element.style.backgroundColor = "#C06C84";
|
||||
}
|
||||
static applyUnpush(elem) {
|
||||
button.element.style.backgroundColor = "#F67280";
|
||||
}
|
||||
}
|
||||
|
||||
function createbutton() {
|
||||
console.log(container.children);
|
||||
if(container.children.length == 0) {
|
||||
button = new Button();
|
||||
console.log("button created!");
|
||||
}
|
||||
d.body.removeEventListener("click", createbutton);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
var canvas;
|
||||
var loupe;
|
||||
var img;
|
||||
var ratio;
|
||||
var topmargin;
|
||||
|
||||
window.onload = function() {
|
||||
canvas = document.getElementById("canvastp1");
|
||||
var context = canvas.getContext("2d");
|
||||
img = document.getElementById("ardeche");
|
||||
var hRatio = canvas.width / img.width;
|
||||
var vRatio = canvas.height / img.height;
|
||||
ratio = Math.min(hRatio, vRatio);
|
||||
topmargin = (canvas.height - img.height * ratio) / 2;
|
||||
context.drawImage(img, 0, 0, img.width, img.height,
|
||||
0, topmargin, img.width * ratio, img.height * ratio);
|
||||
canvas.addEventListener('mousemove', displayMousePos, false);
|
||||
canvas.addEventListener('mousemove', zoom, false);
|
||||
canvas.addEventListener('mouseout', hide, false);
|
||||
|
||||
loupe = document.getElementById("loupe");
|
||||
context = loupe.getContext("2d");
|
||||
context.drawImage(img, 0, 0);
|
||||
};
|
||||
|
||||
function displayMousePos(evt) {
|
||||
var mousePos = getMousePos(canvas, evt);
|
||||
var message = 'Mouse position: ' + mousePos.x + ', ' + mousePos.y;
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
function zoom(evt) {
|
||||
var mousePos = getMousePos(canvas, evt); /* get mouse position */
|
||||
loupe.style.display = "inline"; /* make glass visible */
|
||||
|
||||
/* process x axis */
|
||||
var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left');
|
||||
canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2);
|
||||
var marginLeft = Number(canvasXMargin) + mousePos.x + 15;
|
||||
console.log('X: ' + marginLeft);
|
||||
loupe.style.marginLeft = marginLeft + "px";
|
||||
|
||||
/* process y axis */
|
||||
var marginTop = mousePos.y + 15;
|
||||
loupe.style.marginTop = marginTop + "px";
|
||||
var actualPos = mousePos.y - topmargin;
|
||||
console.log('Y: ' + marginTop +
|
||||
', marginTop: ' + topmargin +
|
||||
', actualPos: ' + actualPos);
|
||||
|
||||
/* clear and redraw glass */
|
||||
var context = loupe.getContext("2d");
|
||||
context.clearRect(0, 0, loupe.width, loupe.height);
|
||||
context.drawImage(img,
|
||||
(mousePos.x - loupe.width / 8) / ratio, (actualPos - loupe.height / 8) / ratio,
|
||||
loupe.width, loupe.height, 0, 0, loupe.width, loupe.height);
|
||||
}
|
||||
|
||||
function getMousePos(canvas, evt) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: evt.clientX - rect.left,
|
||||
y: evt.clientY - rect.top
|
||||
};
|
||||
}
|
||||
|
||||
function hide() {
|
||||
loupe.style.display = "none";
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
window.onload = main;
|
||||
var ids;
|
||||
var nbIds = 500;
|
||||
var de;
|
||||
|
||||
function main() {
|
||||
ids = new Array();
|
||||
de = document.getElementById("list");
|
||||
var i;
|
||||
faker.locale = "fr";
|
||||
console.log(single_id);
|
||||
for (i = 0; i < nbIds; ++i) {
|
||||
var single_id = {
|
||||
firstname: faker.name.firstName(),
|
||||
lastname: faker.name.lastName(),
|
||||
city: faker.address.city(),
|
||||
job: faker.name.jobType()
|
||||
};
|
||||
ids.push(single_id);
|
||||
}
|
||||
displayIds();
|
||||
}
|
||||
|
||||
function displayIds() {
|
||||
var table = "<table><tr><th onclick=\"sortLName()\">Nom</th><th onclick=\"sortFName()\">Prénom</th><th onclick=\"sortCity()\">Ville</th><th onclick=\"sortJob()\">Métier</th></tr>";
|
||||
for (i = 0; i < nbIds; ++i) {
|
||||
table += "<tr><td>";
|
||||
table += ids[i].lastname;
|
||||
table += "</td><td>";
|
||||
table += ids[i].firstname;
|
||||
table += "</td><td>";
|
||||
table += ids[i].city;
|
||||
table += "</td><td>";
|
||||
table += ids[i].job;
|
||||
table += "</td></tr>";
|
||||
}
|
||||
table += "</table>";
|
||||
de.innerHTML = table;
|
||||
}
|
||||
|
||||
function sortLName() {
|
||||
ids.sort(function(a, b) {
|
||||
return compareString(a.lastname, b.lastname);
|
||||
});
|
||||
displayIds();
|
||||
}
|
||||
|
||||
function sortFName() {
|
||||
ids.sort(function(a, b) {
|
||||
return compareString(a.firstname, b.firstname);
|
||||
});
|
||||
displayIds();
|
||||
}
|
||||
|
||||
function sortCity() {
|
||||
ids.sort(function(a, b) {
|
||||
return compareString(a.city, b.city);
|
||||
});
|
||||
displayIds();
|
||||
}
|
||||
|
||||
function sortJob() {
|
||||
ids.sort(function(a, b) {
|
||||
return compareString(a.job, b.job);
|
||||
});
|
||||
displayIds();
|
||||
}
|
||||
|
||||
function compareString(a, b) {
|
||||
var x = a.toLowerCase();
|
||||
var y = b.toLowerCase();
|
||||
if (x < y) {
|
||||
return -1;
|
||||
}
|
||||
if (x > y) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
window.onload = main;
|
||||
|
||||
var d = document;
|
||||
var de = d.documentElement;
|
||||
var offset = 0;
|
||||
var SIZE = 100;
|
||||
|
||||
function main() {
|
||||
console.log("JS loaded");
|
||||
setInterval(frame, 1000.0 / 60.0);
|
||||
}
|
||||
|
||||
function frame() {
|
||||
var screenwidth = de.clientWidth;
|
||||
if (offset >= (screenwidth)) {
|
||||
offset = 0;
|
||||
} else {
|
||||
offset += 3;
|
||||
}
|
||||
var squares = de.getElementsByClassName("carre");
|
||||
for (i = 0; i < squares.length; ++i) {
|
||||
squares[i].style.marginLeft = offset + "px";
|
||||
}
|
||||
if (offset >= (screenwidth - SIZE)) {
|
||||
squares[1].style.display = "inline";
|
||||
squares[1].style.marginLeft = (offset - screenwidth) + "px";
|
||||
} else {
|
||||
squares[1].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Moving Square - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
|
||||
<link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css"/>
|
||||
<link rel="stylesheet" href="https://univ.phundrak.fr/css/square.css" type="text/css"/>
|
||||
<script src="https://univ.phundrak.fr/js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="carre">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Moving Square - Lucien Cartier-Tilet</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/square.css" type="text/css" />
|
||||
<script src="../js/square.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul class="navbar">
|
||||
<li><a href="../">Home</a></li>
|
||||
<li><a class="active" href="./">Moving red square</a></li>
|
||||
<li><a href="../faker">Faker</a></li>
|
||||
<li><a href="../canvas-zoom">Canvas & Zoom</a></li>
|
||||
<li><a href="../button">Button</a></li>
|
||||
</ul>
|
||||
<div id="container">
|
||||
<div class="content">
|
||||
<p>Un carré traversant l’écran et apparaissant du côté gauche de l’écran alors qu’il disparaît du côté droit de ce dernier.</p>
|
||||
</div>
|
||||
<div class="carre"></div>
|
||||
<div class="carre" id="carre2"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue