diff --git a/animation/index.html b/animation/index.html new file mode 100644 index 0000000..d1471a4 --- /dev/null +++ b/animation/index.html @@ -0,0 +1,31 @@ + + + + + Button - Lucien Cartier-Tilet + + + + + + + + + + +
+
+

Un carré traversant un canvas et apparaissant du côté gauche de l’écran alors qu’il disparaît du côté droit de ce dernier et un autre faisant des allers-retours.

+
+ +
+ + + diff --git a/button/index.html b/button/index.html index 5df8557..0a31ce2 100644 --- a/button/index.html +++ b/button/index.html @@ -1,25 +1,27 @@ - + - - Index - Lucien Cartier-Tilet - - - - - - + + Button - Lucien Cartier-Tilet + + + + + + + + - - -
-
- + + +
+
+ diff --git a/canvas/index.html b/canvas/index.html index 6bcf6fb..c45c1c3 100644 --- a/canvas/index.html +++ b/canvas/index.html @@ -1,10 +1,12 @@ - + - Moving Square - Lucien Cartier-Tilet + Canvas - Lucien Cartier-Tilet + + - + @@ -13,16 +15,17 @@
+ Vue d’Ardèche

Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.

+

[source image]

- Vue d’Ardèche
diff --git a/css/button.css b/css/button.css index 4540a88..5b373fd 100644 --- a/css/button.css +++ b/css/button.css @@ -1,6 +1,3 @@ -#container { - -} #Button { background-color: #F67280; border: none; diff --git a/css/canvas.css b/css/canvas.css index 402832d..0afe6c1 100644 --- a/css/canvas.css +++ b/css/canvas.css @@ -1,7 +1,6 @@ #container { position: relative; height: 100%; - overflow-x: scroll; } #content { diff --git a/faker/index.html b/faker/index.html index 0de5755..b8484fa 100644 --- a/faker/index.html +++ b/faker/index.html @@ -1,19 +1,24 @@ - + + Faker - Lucien Cartier-Tilet + + - - - - + + + + +
@@ -26,4 +31,5 @@
+ diff --git a/index.html b/index.html index 30ab0ce..97c9e92 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,12 @@ - + Index - Lucien Cartier-Tilet + + - + diff --git a/js/animation.js b/js/animation.js new file mode 100644 index 0000000..f93c19b --- /dev/null +++ b/js/animation.js @@ -0,0 +1,47 @@ +var square; +var coordsx; +var coordsx2; +var coordsy; +var canvas; +var context; +var size; +var change; + +window.onload = function() { + console.log("JS Loaded"); + square = new Square(); + canvas = document.getElementById("sqrcontainer"); + canvas.width = document.documentElement.clientWidth; + context = canvas.getContext('2d'); + coordsx = canvas.width / 2; + coordsx2 = coordsx; + coordsy = 50; + size = 50; + change = 1; + setInterval(frame, 1000.0 / 60.0); +}; + +class Square { + constructor() {} + static draw(x, y, color) { + context.fillStyle = color; + context.fillRect(x, y, size, size); + } +} + +function frame() { + canvas.width = document.documentElement.clientWidth; + coordsx += 1; + coordsx2 += change; + Square.draw(coordsx, coordsy, '#f00'); + Square.draw(coordsx2, coordsy + 50, '#0f0'); + if (coordsx2 > canvas.width - size || coordsx2 <= 0) { + change = -change; + } + if (coordsx > canvas.width - size) { + Square.draw(coordsx - (canvas.width - size), coordsy, '#f00'); + } + if (coordsx > canvas.width + size) { + coordsx -= (canvas.width - size); + } +} diff --git a/js/button.js b/js/button.js index 32a0054..f8b6514 100644 --- a/js/button.js +++ b/js/button.js @@ -32,7 +32,7 @@ class HoverButton extends Button { super(); } static applyShadow() { - button.element.style.boxShadow = "3px 3px 5px #6C5B7B"; + button.element.style.boxShadow = "5px 5px 5px #6C5B7B"; } static applyUnshadow() { button.element.style.boxShadow = "none"; diff --git a/js/canvas.js b/js/canvas.js index 7ed8d4a..90ae499 100644 --- a/js/canvas.js +++ b/js/canvas.js @@ -14,7 +14,6 @@ window.onload = function() { 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); @@ -23,12 +22,6 @@ window.onload = function() { 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 */ @@ -37,16 +30,12 @@ function zoom(evt) { 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"); diff --git a/robots.txt b/robots.txt index 1c47531..84cf28f 100755 --- a/robots.txt +++ b/robots.txt @@ -7,5 +7,4 @@ Disallow: /img Disallow: /js Disallow: /langue Disallow: /.git -Disallow: .gitignore Disallow: *.php diff --git a/square/index.html b/square/index.html index f1b7ced..6662e0b 100644 --- a/square/index.html +++ b/square/index.html @@ -1,10 +1,12 @@ - + Moving Square - Lucien Cartier-Tilet + + - + @@ -13,10 +15,10 @@