<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
  </head>
  <style>
    body {
      width: 75%;
      margin: 0 auto;
      overflow-x: hidden;
    }
    
    canvas {
      width: 75%;
      margin: 0 auto;
    }
    nav>ul>li {
      margin: 0 3rem 0 0;
    }
  </style>
  <body style="text-align: center">
    <header>
      <nav style="display: flex; justify-content: space-between; align-items: center;">
        <ul style="list-style-type: none; display: flex; padding: 0;">
          <li><a href="#">Nav</a>
          </li><li><a href="/">Bar</a></li>
          <li><a href="/">Links</a></li>
        </ul>
        <img 
             src="https://grupohonor.com.br/wp-content/uploads/2015/10/Logo-Default.png" 
             alt="logo" 
             style="width: 35px; height: 35px;"/>
      </nav>
    </header>
    <hr size="3" color="#9b322b"/>
    <!-- This is a comment -->
    <main>
      <h1>Examples of HTML Tags</h1>
      <hr size="3" color="#9b322b"/>
      <div>
        <h2>List Tags</h2>
        <hr/>
        <div style="display: flex; justify-content: space-around;">
        <section>
          <ol>
            <li>ordered list item 1</li>
            <li>ordered list item 2</li>
            <li>ordered list item 3</li>
          </ol>
        </section>
        <section>
          <ul>
            <li>unordered list item 1</li>
            <li>unordered list item 2</li>
            <li>unordered list item 3</li>
          </ul>
        </section>
        </div>
        <h2>Section Tags</h2>
          <hr/>
          <article>Example article.</article>
            <aside>
              <address>1234 Address St Nowhere, NY 12345</address>
            </aside>
        <h2>Inline Text Tags</h2>
          <hr/>
          <section>
            <a href="http://google.com/" rel="noopener noreferrer" target="_blank">An anchor tag that links to Google that opens in a new window</a><br/><br/>
            <code style="background-color: #f3f3f3;">console.log("this is code");                 </code>
            <p>This is an example paragraph. Anything in the 
              <strong>body</strong> 
              tag will appear on the page, just like this                 
              <strong>p</strong> tag and its contents.
            </p>
            <p style="font-size: 18px;">This text is: <br/><strong>strong</strong>, <abbr title="abbreviation">ABBR</abbr>, <em>emphasized text</em>, <mark>Marked Text</mark>, <q>A short quote</q>, <s>strike through</s>, <small>small print</small>, <span>span text</span>, <sub>subscript</sub>, <sup>superscript</sup>, <tt>monospace</tt>, <var>let x = variable</var></p>
          </section>
        <h2>Form Tags</h2>
          <hr/>
        <div>
          <form>
            <p>
    <label for="label">Label:</label><br/><br/>
              <label for="select">Select with optgroup</label><br/>
              <select>
                <optgroup>
  <option value="1">Option 1</option>
                  <option value="2">Option 2</option></optgroup>
</select><br/>
              <label for="select">Select without optgroup</label><br/>
              <select>
               
  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
</select><br/>
              <label for="email">Email</label><br/>
    <input type="email" id="email" name="email" placeholder="email"/><br/>
              <label for="phone">Phone Number</label><br/>
    <input type="number" id="phone" name="phone" placeholder="123-456-7890"/><br/>
              <label for="text">Text</label><br/>
    <input type="text" id="text" name="text" placeholder="text"/><br/>
              
              <label for="textarea">Text Area</label><br/>
              <textarea id="textarea" name="textarea" placeholder="textarea"><br/></textarea><br/>
              <label for="meter">Meter</label><br/>
              <meter value="2" min="0" max="10">2 out of 10</meter><br/>
               <label for="progress">Progress</label><br/>
              <progress value="22" max="100"></progress>
  </p>
  <p>
    <label for="taste_2">Check Box</label>
    <input type="checkbox" id="taste_2" name="checkbox" value="2">
  </p>
  <fieldset>
    <legend>Fieldset Legend</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="radio">
      <label for="size_1">Radio</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="buttons">
      <label for="size_2">Buttons</label>
    </p>
  </fieldset>
</form><br/>
          <label for="a">Output range</label><br/>
          <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>
        </div>
        <h2>Image and Multimedia Tags</h2>
          <hr/> 
            <div style="text-align: center;">
            <h3>audio</h3>
        <audio controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/AL_piano_chord_D7%235.wav"></audio><br/>
            <h3>img</h3>
        <img src="https://fl-img-media.s3.amazonaws.com/uploads/2017/04/img-full-gc-@0.5x.png" alt="img" style="width: 200px;"/><br/>
            <h3>video</h3>
        <video controls src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4"></video><br/>
            <h3>canvas</h3>
        <canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas> 
            </div>
        </div>
    </main>
    
    <footer>
      <p>&copy; 
        <script>document.write(new Date().getFullYear())
        </script>
      </p>
    </footer>
   <script>
//global variables
var currentSection = 0;
var parseScroll = function(event) {
  //find which <section> is in the viewport
  var sections = document.querySelectorAll("#container section");
  for (var i = 0; i < sections.length; i++) {
    var position = sections[i].getBoundingClientRect();
    if (position.top < window.innerHeight && position.bottom > 0) {
      //percentage of the section that is in the viewport
      if (
        Math.round(
          (sections[i].offsetHeight - Math.abs(position.top)) /
            window.innerHeight *
            100
        ) > 50
      ) {
        currentSection = i;
      }
    }
  }
};

//global classes
class canvasManager {
  /*
  The flag for whether an animation's context properties have been set
  is stored as an undefined or defined flag at a number corresponding to its canvas
  animation.
  */
  constructor() {
    this.canvas = document.getElementById("canvas");
    this.c = this.canvas.getContext("2d");
    this.resize();
    var timer = false;
    window.addEventListener(
      "resize",
      function() {
        window.clearTimeout(timer);
        timer = window.setTimeout(
          function() {
            this.resize();
          }.bind(this),
          100
        );
      }.bind(this)
    );
    this.animation = 0;
    this.frameInterval = window.setInterval(this.animate.bind(this),120)
    //this.animate();
  }
  resize() {
    this.c.save();
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.c.width = window.innerWidth;
    this.c.height = window.innerHeight;
    this.clearFrame();
    this.flushCanvas();
  }
  flushCanvas() {
    var found = false;
    var i = 0;
    while (!found) {
      if (typeof this[i] == "undefined") {
        found = true;
      } else {
        delete this[i];
      }
      i++;
    }
  }
  clearFrame() {
    this.c.clearRect(0, 0, this.c.width, this.c.height);
  }
  initAnimationOne() {
    this[0] = {
      chars: [
        "日",
        "ハ",
        "ミ",
        "ヒ",
        "ー",
        "ウ",
        "シ",
        "ナ",
        "モ",
        "ニ",
        "サ",
        "ワ",
        "ツ",
        "オ",
        "リ",
        "ア",
        "ホ",
        "テ",
        "マ",
        "ケ",
        "メ",
        "エ",
        "カ",
        "キ",
        "ム",
        "ユ",
        "ラ",
        "セ",
        "ネ",
        "ス",
        "タ",
        "ヌ",
        "ヘ",
        "ヲ",
        "イ",
        "ク",
        "コ",
        "ソ",
        "チ",
        "ト",
        "ノ",
        "フ",
        "ヤ",
        "ヨ",
        "ル",
        "レ",
        "ロ",
        "ン",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "7",
        "8",
        "9",
        "Z",
        ":",
        "・",
        ".",
        '"',
        "=",
        "*",
        "+",
        "-",
        "<",
        ">",
        "¦",
        "|",
        "ç",
        "リ",
        "ク"
      ],
      updateValues: function() {
        for (var i = 0; i < Object.keys(this.columns).length; i++) {
          if(this.columns[i].yPos > this.parent.c.height){
            this.columns[i].yPos = -Object.keys(this.columns[i].chars).length*this.columnHeight
          }
          this.columns[i].yPos += 10;
          var randomChar = this.columns[i].chars[Math.floor(Math.random()*Object.keys(this.columns[i].chars).length)]
          randomChar.char = this.chars[Math.floor(Math.random()*this.chars.length)]
            //for (var j = 0; j < Object.keys(this.columns[i].chars).length; j++) {
              //change random character...
              /*var r = this[0].columns[i].chars[j].color[0];
              var g = this[0].columns[i].chars[j].color[1];
              var b = this[0].columns[i].chars[j].color[2];
              var a = this[0].columns[i].chars[j].color[3];
              this.c.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';
              this.c.fillText(this[0].columns[i].chars[j].char,i*this[0].columnWidth,j*this[0].columnHeight+this[0].columns[i].yPos);*/
            //}
          }
      },
      columnWidth: 16,
      columnHeight: 16
    };
    this[0].columns = {};
    for (var i = 0; i < 2*Math.floor(this.c.width / this[0].columnWidth); i++) {
      this[0].columns[i] = {};
      this[0].columns[i].chars = {};
      this[0].columns[i].yPos = Math.floor(Math.random() *this.c.height);
      //  return Math.random() * (max - min) + min;
      var maxColHeight = Math.floor(this.c.height/this[0].columnHeight);
      var minColHeight = Math.floor(.25*maxColHeight);
      var colHeight = Math.floor(Math.random()* (maxColHeight - minColHeight)+minColHeight);//Math.floor(Math.random()*25+16);
      var windowCols = this.c.width/this[0].columnWidth;
      this[0].columns[i].xPos = Math.floor(Math.random()*windowCols)*this[0].columnWidth
      var colorIncrement = Math.floor(255/colHeight);
      var opacityIncrement = 1/colHeight
      for (var j = 0; j < colHeight; j++) {
        var r = 8;
        var g = 180;
        var b =15;
        var a = opacityIncrement*Math.pow(j,1.10)
        if(j == colHeight-1){
          r = 120;
          g = 190;
          b = 120;
        }
        this[0].columns[i].chars[j] = {
          char: this[0].chars[Math.floor(Math.random() * this[0].chars.length)],
          color: [r, g, b, a] //in rgba
        };
      }
    }

    console.log(this[0].columns);
    this[0].parent = this;
    //this.c.fillStyle = "#085C0F";
    this.c.shadowColor = "rgba(70,150,70)";
    this.c.shadowBlur = 3;
    //this.c.shadowOffsetX = 0;
    //this.c.shadowOffsetY = 0;
    this.c.textBaseline = "top";
    this.c.font = "600 16px sans-serif";
    this.canvas.style.background = "#000";
  }
  animate() {
    //window.requestAnimationFrame(refresh.bind(this));
    //function refresh() {
      switch (currentSection) {
        case 0:
          if (typeof this[0] == "undefined") {
            this.initAnimationOne();
          }
          this.clearFrame();

          for (var i = 0; i < Object.keys(this[0].columns).length; i++) {
            for (var j = 0; j < Object.keys(this[0].columns[i].chars).length; j++) {
              var r = this[0].columns[i].chars[j].color[0];
              var g = this[0].columns[i].chars[j].color[1];
              var b = this[0].columns[i].chars[j].color[2];
              var a = this[0].columns[i].chars[j].color[3];
              this.c.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';
              this.c.fillText(this[0].columns[i].chars[j].char,this[0].columns[i].xPos,j*this[0].columnHeight+this[0].columns[i].yPos);
            }
          }

          //this.c.save();
          //this.c.scale(1, -1);

          //this.c.restore();
          this[0].updateValues();
          break;
        case 1:
          this.clearFrame();
          break;
        case 2:
          this.clearFrame();
          break;
        case 3:
          this.clearFrame();
          break;
        case 4:
          this.clearFrame();
          break;
        default:
          console.log("no selection");
      }
      //console.log(currentSection);
      //window.requestAnimationFrame(refresh.bind(this));
    }
  //}
}

//global events
window.addEventListener("load", init);

//use wheel when possible
//wheel works best for desktop browsers
//scroll works best for mobile browsers
//when wheel fires, cancel scroll listening
window.addEventListener("scroll", parseScroll);
window.addEventListener("wheel", function(event) {
  window.removeEventListener("scroll", parseScroll);
  parseScroll(event);
});

//global functions
function init() {
  initCanvas();
}

function initCanvas() {
  var canvas = new canvasManager();
  var sections = document.getElementsByTagName("section");
  for (var i = 0; i < sections.length; i++) {
    sections[i].setAttribute("data-order", i);
  }
}


/*
Made in appreciation for my favorite movie of all time. --William Green
*/
</script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.