gm/bouncing-endgame-logo.markdown

## bouncing-endgame-logo.markdown

      
    Raw
  

              bouncing-endgame-logo.markdown
            
          
    Bouncing Endgame Logo

Credit to @mlms13 for writing a lot of the jQuery.
A Pen by Ty Kauffman on CodePen.
License.

  
## index.html
<body>
  <div class="marquee">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="300" height="300" fill="none">
      <g fill="#2D57E4" clip-path="url(#a)">
        <path class="logo" d="M670.733 439.024H329.27v121.951h341.463V439.024Z" />
        <path class="logo" fill-rule="evenodd" d="M1000 500c0 276.142-223.858 500-500 500S0 776.142 0 500 223.858 0 500 0s500 223.858 500 500ZM778.094 756.098C709.01 831.077 609.991 878.049 500 878.049c-208.791 0-378.049-169.258-378.049-378.049 0-47.24 8.665-92.456 24.491-134.146h524.29V243.903H221.906C290.989 168.924 390.009 121.951 500 121.951c208.791 0 378.049 169.258 378.049 378.049 0 47.24-8.665 92.457-24.492 134.147H329.27v121.951h448.824Z" clip-rule="evenodd" />
      </g>
      <defs>
        <clipPath id="a">
          <path fill="#fff" d="M0 0h1000v1000H0z" />
        </clipPath>
      </defs>
    </svg>
  </div><canvas id="c"></canvas>
</body>

## script.js
(function ($, window, undefined) {
  $.fn.marqueeify = function (options) {
    var settings = $.extend(
      {
        horizontal: true,
        vertical: true,
        speed: 100, // In pixels per second
        container: $(this).parent(),
        bumpEdge: function () {}
      },
      options
    );

    return this.each(function () {
      var containerWidth,
        containerHeight,
        elWidth,
        elHeight,
        move,
        getSizes,
        $el = $(this);

      getSizes = function () {
        containerWidth = settings.container.outerWidth();
        containerHeight = settings.container.outerHeight();
        elWidth = $el.outerWidth();
        elHeight = $el.outerHeight();
      };

      move = {
        right: function () {
          $el.animate(
            { left: containerWidth - elWidth },
            {
              duration: (containerWidth / settings.speed) * 1000,
              queue: false,
              easing: "linear",
              complete: function () {
                settings.bumpEdge();
                move.left();
              }
            }
          );
        },
        left: function () {
          $el.animate(
            { left: 0 },
            {
              duration: (containerWidth / settings.speed) * 1000,
              queue: false,
              easing: "linear",
              complete: function () {
                settings.bumpEdge();
                move.right();
              }
            }
          );
        },
        down: function () {
          $el.animate(
            { top: containerHeight - elHeight },
            {
              duration: (containerHeight / settings.speed) * 1000,
              queue: false,
              easing: "linear",
              complete: function () {
                settings.bumpEdge();
                move.up();
              }
            }
          );
        },
        up: function () {
          $el.animate(
            { top: 0 },
            {
              duration: (containerHeight / settings.speed) * 1000,
              queue: false,
              easing: "linear",
              complete: function () {
                settings.bumpEdge();
                move.down();
              }
            }
          );
        }
      };

      getSizes();

      if (settings.horizontal) {
        move.right();
      }
      if (settings.vertical) {
        move.down();
      }

      // Make that shit responsive!
      $(window).resize(function () {
        getSizes();
      });
    });
  };
})(jQuery, window);

$(document).ready(function () {
  $(".marquee").marqueeify({
    speed: 300,
    bumpEdge: function () {
      var newColor = "hsl(" + Math.floor(Math.random() * 360) + ", 100%, 50%)";
      $(".marquee .logo").css("fill", newColor);
    }
  });
});

// geting canvas by Boujjou Achraf
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var matrix =
  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
//converting the string into an array of single characters
matrix = matrix.split("");

var font_size = 10;
var columns = c.width / font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for (var x = 0; x < columns; x++) drops[x] = 1;

//drawing the characters
function draw() {
  //Black BG for the canvas
  //translucent BG to show trail
  ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
  ctx.fillRect(0, 0, c.width, c.height);

  ctx.fillStyle = "#f4427d"; //green text
  ctx.font = font_size + "px arial";
  //looping over drops
  for (var i = 0; i < drops.length; i++) {
    //a random chinese character to print
    var text = matrix[Math.floor(Math.random() * matrix.length)];
    //x = i*font_size, y = value of drops[i]*font_size
    ctx.fillText(text, i * font_size, drops[i] * font_size);

    //sending the drop back to the top randomly after it has crossed the screen
    //adding a randomness to the reset to make the drops scattered on the Y axis
    if (drops[i] * font_size > c.height && Math.random() > 0.975) drops[i] = 0;

    //incrementing Y coordinate
    drops[i]++;
  }
}

setInterval(draw, 35);

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
html,
body {
  color: #fff;
  height: 100%;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}
.marquee {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}
svg {
  display: block;
}
.logo {
  fill: #fff;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  background: black;
}

@keyframes matrix-background {
  0% {
    background: black;
    background-size: 60px 60px;
  }
  50% {
    background-size: 60px 120px;
  }
  100% {
    background-size: 60px 60px;
  }
}

.marquee {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

svg {
  display: block;
}

.logo {
  fill: #fff;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: red url(https://i.imgur.com/1Cx4WRY.png);
}
canvas {
  display: block;
}
	<body>
	<div class="marquee">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="300" height="300" fill="none">
	<g fill="#2D57E4" clip-path="url(#a)">
	<path class="logo" d="M670.733 439.024H329.27v121.951h341.463V439.024Z" />
	<path class="logo" fill-rule="evenodd" d="M1000 500c0 276.142-223.858 500-500 500S0 776.142 0 500 223.858 0 500 0s500 223.858 500 500ZM778.094 756.098C709.01 831.077 609.991 878.049 500 878.049c-208.791 0-378.049-169.258-378.049-378.049 0-47.24 8.665-92.456 24.491-134.146h524.29V243.903H221.906C290.989 168.924 390.009 121.951 500 121.951c208.791 0 378.049 169.258 378.049 378.049 0 47.24-8.665 92.457-24.492 134.147H329.27v121.951h448.824Z" clip-rule="evenodd" />
	</g>
	<defs>
	<clipPath id="a">
	<path fill="#fff" d="M0 0h1000v1000H0z" />
	</clipPath>
	</defs>
	</svg>
	</div><canvas id="c"></canvas>
	</body>
	(function ($, window, undefined) {
	$.fn.marqueeify = function (options) {
	var settings = $.extend(
	{
	horizontal: true,
	vertical: true,
	speed: 100, // In pixels per second
	container: $(this).parent(),
	bumpEdge: function () {}
	},
	options
	);

	return this.each(function () {
	var containerWidth,
	containerHeight,
	elWidth,
	elHeight,
	move,
	getSizes,
	$el = $(this);

	getSizes = function () {
	containerWidth = settings.container.outerWidth();
	containerHeight = settings.container.outerHeight();
	elWidth = $el.outerWidth();
	elHeight = $el.outerHeight();
	};

	move = {
	right: function () {
	$el.animate(
	{ left: containerWidth - elWidth },
	{
	duration: (containerWidth / settings.speed) * 1000,
	queue: false,
	easing: "linear",
	complete: function () {
	settings.bumpEdge();
	move.left();
	}
	}
	);
	},
	left: function () {
	$el.animate(
	{ left: 0 },
	{
	duration: (containerWidth / settings.speed) * 1000,
	queue: false,
	easing: "linear",
	complete: function () {
	settings.bumpEdge();
	move.right();
	}
	}
	);
	},
	down: function () {
	$el.animate(
	{ top: containerHeight - elHeight },
	{
	duration: (containerHeight / settings.speed) * 1000,
	queue: false,
	easing: "linear",
	complete: function () {
	settings.bumpEdge();
	move.up();
	}
	}
	);
	},
	up: function () {
	$el.animate(
	{ top: 0 },
	{
	duration: (containerHeight / settings.speed) * 1000,
	queue: false,
	easing: "linear",
	complete: function () {
	settings.bumpEdge();
	move.down();
	}
	}
	);
	}
	};

	getSizes();

	if (settings.horizontal) {
	move.right();
	}
	if (settings.vertical) {
	move.down();
	}

	// Make that shit responsive!
	$(window).resize(function () {
	getSizes();
	});
	});
	};
	})(jQuery, window);

	$(document).ready(function () {
	$(".marquee").marqueeify({
	speed: 300,
	bumpEdge: function () {
	var newColor = "hsl(" + Math.floor(Math.random() * 360) + ", 100%, 50%)";
	$(".marquee .logo").css("fill", newColor);
	}
	});
	});

	// geting canvas by Boujjou Achraf
	var c = document.getElementById("c");
	var ctx = c.getContext("2d");

	//making the canvas full screen
	c.height = window.innerHeight;
	c.width = window.innerWidth;

	//chinese characters - taken from the unicode charset
	var matrix =
	"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&()&^%+-/~{[\|`]}";
	//converting the string into an array of single characters
	matrix = matrix.split("");

	var font_size = 10;
	var columns = c.width / font_size; //number of columns for the rain
	//an array of drops - one per column
	var drops = [];
	//x below is the x coordinate
	//1 = y co-ordinate of the drop(same for every drop initially)
	for (var x = 0; x < columns; x++) drops[x] = 1;

	//drawing the characters
	function draw() {
	//Black BG for the canvas
	//translucent BG to show trail
	ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
	ctx.fillRect(0, 0, c.width, c.height);

	ctx.fillStyle = "#f4427d"; //green text
	ctx.font = font_size + "px arial";
	//looping over drops
	for (var i = 0; i < drops.length; i++) {
	//a random chinese character to print
	var text = matrix[Math.floor(Math.random() * matrix.length)];
	//x = ifont_size, y = value of drops[i]font_size
	ctx.fillText(text, i * font_size, drops[i] * font_size);

	//sending the drop back to the top randomly after it has crossed the screen
	//adding a randomness to the reset to make the drops scattered on the Y axis
	if (drops[i] * font_size > c.height && Math.random() > 0.975) drops[i] = 0;

	//incrementing Y coordinate
	drops[i]++;
	}
	}

	setInterval(draw, 35);
	html,
	body {
	color: #fff;
	height: 100%;
	margin: 0;
	min-height: 100%;
	overflow: hidden;
	position: relative;
	}
	.marquee {
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	}
	svg {
	display: block;
	}
	.logo {
	fill: #fff;
	}

	body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	position: relative;
	background: black;
	}

	@keyframes matrix-background {
	0% {
	background: black;
	background-size: 60px 60px;
	}
	50% {
	background-size: 60px 120px;
	}
	100% {
	background-size: 60px 60px;
	}
	}

	.marquee {
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	}

	svg {
	display: block;
	}

	.logo {
	fill: #fff;
	}

	* {
	margin: 0;
	padding: 0;
	}

	body {
	background: red url(https://i.imgur.com/1Cx4WRY.png);
	}
	canvas {
	display: block;
	}