Animated SVG loading Icon

2016-12-04 00:00:00 by Mike

Animated SVG elements are nothing to be intimidated by. In this write-up and demo we'll learn how to create a smoothly animated SVG icon using widely supported HTML, CSS and JavaScript. See the stand-alone demo here.

First, some basics. SVG, first defined in 1999, stands for scalable vector graphics and is based on mathematical points, rather than pixel units. The main benefits of SVG are scalability and increased independence from rasterized image files (for example: .gif, .png, .jpg files).

Now for the code for creating the animated SVG icon (see the stand-alone demo here).

The HTML and CSS are fairly simple, listed below in Figure 2. Notice the svg and path elements in the HTML are based on XML syntax. The svg element sets the bounds of the element and the path is a line composed of points. The "d" attribute of the path element stands for "description". The "M", for "move to", in the value of d represents the x and y coordinates where the path will begin. The CSS sets the size of a div containing the svg, and rotates that div continuously around its center in 2 second periods.

The JavaScript, listed below in Figure 3, controls the animated length of the path element. As shown in Figure 1 above, the path is actually composed of many 5 degree arcs arranged adjacent to one another. The arcs, or radians, listed in the "d" attribute of the path element are converted to an array. This is done to more easily add and remove radians from the path.

That's it! I hope you enjoyed this write-up, and please share it if you found it useful.

Figure 1 (below): The solid SVG path is actually composed of many five degree arcs arrange adjacently.

Figure 2 (below): The HTML & CSS for the animated loading icon.

<style> #container { width:200px; height:200px; -webkit-animation:spin 2s infinite; -moz-animation:spin 2s infinite; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 200" id="loader" onload="drawCircle();"> <path d="M0,0 " id="arc" fill="none" stroke="#f75" stroke-width="20" /> </svg> </div>
Figure 3 (below): JavaScript that controls the addition and removal of arc segments from the SVG path element.
<script> function drawCircle() { "use strict"; var i = 0, angle = 0, radius = 75, shrink = false, updatedDescriptionArray = [], pathElement = document.getElementById("arc"); window.timer = window.setInterval( function() { // Shrink the arc when it reaches 360 degrees in length, otherwise grow the arc when it shrinks to 5 degrees. if (angle > 0 && angle%360===0) { shrink = true; } else if (angle === 5) { shrink = false; } if (shrink === true) { angle -= 5; } else { angle += 5; } // Calculate the coordinates of the radian we are going to add next var radian = (angle/180) * Math.PI; var x = 100 + Math.cos(radian) * radius; var y = 100 + Math.sin(radian) * radius; // Set pathDescription equal to the 'd' (description) attribute of the element var pathDescription = pathElement.getAttribute("d"); var descriptionString, newMoveTo; if (i == 0) { // Starting coordinates for the path on initial page load updatedDescriptionArray.push(" M " + x + " " + y); } else { if (shrink === false) { // Grow the path: add line-to point for each radian updatedDescriptionArray.push(" L " + x + " " + y); } else { // Shrink the path: define a new point for move-to based on the second line-to point newMoveTo = updatedDescriptionArray[1].replace("L","M"); // Remove the first radian updatedDescriptionArray.splice(1,1); // Update the starting point of the path updatedDescriptionArray.splice(0, 1, newMoveTo); } } var descriptionString = updatedDescriptionArray.join(" "); // Update the description attribute of the path pathElement.setAttribute("d", descriptionString); i++; }, 25); } </script>

Make Your Development Easier with Shell Scripts

2016-11-11 00:00:00 by Mike

With many distractions already present in a developer's life, why commit to memory and type the same commands everyday? Automate it with shell scripts instead!

This write-up will show you how to use a shell script to easily open your editor, a local server and your dev environment in a browser. Essentially, run one command instead of many.

We'll look at each of the three commands. Then we'll put it all together into a shell script file.

First, let's start the server and database for my local build. I use the application XAMPP for that. Simply substitute your own server in the following command if it isn't XAMPP:

sudo /Applications/XAMPP/xamppfiles/xampp start;
  

Next, let's open the root folder that contains the project's code in our editor of choice. I like using the Atom editor, made by Github, but substitute the name of your favorite editor below:

open -a /Applications/Atom.app /Applications/XAMPP/htdocs/pixelOneZero/;
  

Lastly, let's open the URL for the development version of our project:

  open http://localhost:8080/pixelonezero;
  

Good so far, right? Great.
Let's combine the above three commands into a shell file because we want to run all three with one convenient command.
Open your editor and paste the following into a new file named startDev.sh:

sudo /Applications/XAMPP/xamppfiles/xampp start;
open -a /Applications/Atom.app /Applications/XAMPP/htdocs/pixelOneZero/;
open http://localhost:8080/pixelonezero;
To run this all-in-one script run the following command while in the same folder where you put startDev.sh:
./startDev.sh

Custom Debugger for Mobile Web Development

2016-11-04 00:00:00 by Mike

Ever find it frustrating to debug touch events while developing for touch enabled devices? I have!

To help cope with the inaccessibility of mobile browsers' console object, I built a custom debugger component.

See the demo here.

Tooltips with HTML, CSS and JavaScript

2016-10-30 00:00:00 by Mike

Tooltips provide a simple way to: contextually add explanatory notes, elaborate on a linked phrase, provide feedback to a user, et cetera.

The stand-alone demo can be found here.

Figure 1 (below) shows what our tooltips will look like based on a basic HTML, CSS and JavaScript implementation outlined in Figure 2 (also below).

The HTML, CSS and JavaScript provided in Figure 2 (below) are fairly straightforward.
A couple of things to note about the JavaScript:
- It is concise, native JavaScript and does not rely on any frameworks.
- Supports touch events for mobile devices, as well as ensures the tooltips are not hidden offscreen.

I really hope you enjoy the write-up and the tooltips!

Figure 1: tooltips provide a simple way to contextually place explanatory notes, elaborate on the linked phrase, etc.


<style> .term { position:relative; border-bottom:1px dashed #555; text-decoration:none; } .term:hover > .annotation, .term.active > .annotation, .term:hover > .arrow-down, .term.active > .arrow-down, .annotation:hover { display:block; } .annotation { width: 15rem; position: absolute; background: #333; color: #fff; padding: .5rem; display: none; top: -3.75rem; left: 0rem; font-size:.75rem; height:2rem; } .arrow-down { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; position:absolute; display:none; top:-.75rem; left:.5rem; } .term.warn .annotation { background:#ed911a; } .term.warn .arrow-down { border-top: 10px solid #ed911a; } </style> <p> Some terms benefit from tooltips to provide more <a class="term" data-component="tooltip" href="#">information<span class="annotation">This is an annotation that explains the word below</span><span class="arrow-down"></span></a>. </p> <br> <p> Let's make sure the tooltip is not displayed <a class="term" data-component="tooltip" href="#">hidden offscreenlt;span class="annotation">A small JavaScript function re-positions the tooltip</span><span class="arrow-down"></span>lt;/a>. </p> <br> <p> You can easily customize the tooltip <a class="term warn" data-component="tooltip" href="#">color using CSS<span class="annotation">This orange tooltip using the CSS class "warn"</span><span class="arrow-down"></span></a>. </p> <script> (function() { // Find all tooltip components in the document var eleTooltipLinks = document.querySelectorAll("[data-component=tooltip]"); var body = document.querySelector("body"); // Use touch event listeners for mobile clients for (var a = 0; a < eleTooltipLinks.length; a++) { var tooltipLink = eleTooltipLinks[a]; tooltipLink.addEventListener("click", function(e){ e.preventDefault(); }); tooltipLink.addEventListener("touchstart", function(){ this.className += " active"; moveTooltip(this); }); tooltipLink.addEventListener("touchend", function(){ this.className = this.className.replace(" active", ""); moveTooltip(this); }); tooltipLink.addEventListener("mouseover", function(){ moveTooltip(this); }); } // Make sure the tooltip is completely visible function moveTooltip(currentTooltipLink) { var annotation = currentTooltipLink.querySelector(".annotation"); var annotationXCoordinate = currentTooltipLink.offsetLeft + annotation.offsetWidth; if (annotationXCoordinate > document.body.offsetWidth) { annotation.style.left = "-" + annotation.offsetWidth/1.25 + "px"; } else { annotation.style.left = "0"; } } })(); </script>
Figure 2 - The tooltip code: The HTML, CSS and JavaScript for implementing the tooltips.


Flickering lights

2016-08-25 00:00:00 by Mike

See the Pen NAkBQy by Michael McCarthy (@pixelOneZero) on CodePen.

Make a Depth of Field Effect with CSS Animation

2016-08-19 00:00:00 by Mike

It turns out that simulating depth-of-field with HTML and CSS is surprisingly easy. That's right, HTML and CSS, and no JavaScript. The full demo can be seen here.

There are two approaches described in this article. The first approach, shown in Figure 1 below, uses two transparent PNGs. One PNG serves as the background (i.e.: things far away from the camera), the other PNG, for the foreground, is absolutely position on top of the background image. Then a CSS blur animation is applied to both images with two selectors. Two selectors are required to create the alternating blur and focus between the two images. When the foreground is in focus, the background is blurred and vice versa.

The second approach to creating depth-of-field uses SVG clip path to define a polygonal shape to blur. In Figure 2 below, the SVG clip path, outlined in orange defines a foreground area to which we can apply the CSS blur selector for an animation.

Each approach is functional in modern browsers. It is worth noting that the second approach, with SVG, is more performant. This is because one image is used and that image is a JPG, much smaller in file size. The other approach uses two PNGs, significantly larger in size. Thanks reddit user tjuk for pointing this out!

Figure 1: Two absolutely positioned PNG images. The foreground image outlined in blue and the underlying background image.
Figure 2: One image with an SVG clip path defined (outlined in orange).


<section class="container"> <img src="./images/lightfield-midground.png" class="midground midground-blur"> <img src="./images/lightfield-foreground.png" class="foreground blur"> </section>
HTML for approach 1: Two absolutely positioned images with alternating blur animations.


<div style="position:relative"> <img src="./images/bat-image-map.jpg" style="position:absolute" class="midground midground-blur"> <svg viewBox="0 0 1080 1080" width="1080" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute" class="foreground blur"> <defs> <clipPath id="c"> <polygon points="5,497,81,481,90,366,794,191,896,306,1078,276,1076,1077,4,1078" /> </clipPath> </defs> <image xlink:href="./images/bat-image-map.jpg" width="1080" height="1080" clip-path="url(#c)"/> </svg> </div>
HTML for approach 2: One JPG image referenced twice in the HTML. First for the background, and secondly as a clipped SVG polygon.


.container { position:relative; height:450px; overflow:hidden; width:900px; } .container > img { position:absolute; width:1029px; } .container > img.foreground { top:220px; left:-20px; } .blur { -webkit-animation: blur 5s infinite; -moz-animation:blur 5s infinite; } .midground-blur { -webkit-animation: midground-blur 5s infinite; -moz-animation: midground-blur 5s infinite; } @-webkit-keyframes blur { 0%, 100% { -webkit-filter: blur(0px); } 50% { -webkit-filter: blur(5px); } } @-moz-keyframes blur { 0%, 100% { filter: blur(0px); } 50% { filter: blur(5px); } } @-webkit-keyframes midground-blur { 0%, 100% { -webkit-filter: blur(5px); } 50% { -webkit-filter: blur(0px); } } @-moz-keyframes midground-blur { 0%, 100% { filter: blur(5px); } 50% { filter: blur(0px); } }
CSS for the blur animation: Fairly standard CSS for the animation and absolute positioning.

Working with JavaScript Arrays, Part 3: Array.prototype.reduce

2015-12-06 00:00:00 by Mike

In the final article of a three part series dealing with JavaScript arrays, we review the Array.prototype.reduce() function.
(The first two articles can be found here: Part 1 and Part 2)

Array.prototype.reduce(), added in ECMAScript 5.1, is useful for efficiently aggregating values based on array element properties.
The callback structure of reduce() provides a callback function that has access to an array, and is regarded as more elegant than a traditional JavaScript 'for' loop.

Here is an example of Array.prototype.reduce():

Array.prototype.reduce()

Purpose: Returns an aggregate value corresponding to elements in the input array.

Input:

var topSellers = [{
'title': 'The Mythical Man Month',
'units': 3791
},
{
'title': 'The Mythical Man Month',
'units': 2703
},
{
'title': 'Eloquent JavaScript',
'units': 2889
},
{
'title': 'JavaScript: The Good Parts',
'units': 3016
},
{
'title': 'Secrets of the JavaScript Ninja',
'units': 4082
}];

Example Usage:

var totalUnits = topSellers.reduce(function(previousValue, element) {
return previousValue + element.units;
}, 0);

Results:

Total units: 16481

Working with JavaScript Arrays, Part 2: Array.prototype.map()

2015-11-27 00:00:00 by Mike

Previously we saw how the filter function can remove duplicate array elements.

Another quite useful JavaScript array function, also introduced in ECMAScript 5.1, is the map function.
Array.prototype.map() provides an elegant way to make a new array whose elements are transformed versions of elements in an original array.
You will commonly see the map function offered as an improved alternative to the traditional JavaScript for loop.

Array.prototype.map()

Purpose: Returns an array of transformed elements corresponding to elements in the input array.

Input:

var kilometers = [10, 30, 92, 53, 31, 79, 41, 49, 51, 91];

Example Usage:

var miles = kilometers.map(function(elem, i) {
return elem * 0.621371;
});

Results:

6.21371, 18.64113, 57.166132, 32.932663, 19.262501, 49.088309, 25.476211, 30.447179000000002, 31.689921000000002, 56.544761

Working with JavaScript Arrays, Part 1: Array.prototype.filter()

2015-11-26 00:00:00 by Mike

Array.prototype.filter()

Sometimes I need to remove duplicate array elements using JavaScript. Luckily, beginning in ECMAScript version 5.1, the Array.prototype.filter function arrived to elegantly implement de-duplication.

Inside the callback function, we use indexOf to return only a single instance of an element value (even when values are repeated in the array).

Input:

var dishes = ["cheeseburger","cheeseburger","burger","fries","burger","fries","cheeseburger"];

Example Usage:

var uniqueDishes = dishes.filter(function(elem, i, array){
return dishes.indexOf(elem) === i;
});

Results:

cheeseburger,burger,fries

Custom context menu

2015-11-17 00:00:00 by Mike

Here is a custom context menu that is an alternative to the default 'right click' browser menu.

The custom menu displays when the "contextmenu" DOM events occurs.

Check out the stand-alone demo here.

Switch UI Component

2015-11-12 00:00:00 by Mike

Here's a little UI component I just wrote for a switch (inspired by Apple's widget).

You can customize it easily with colors, border-radius, etc.

Check out the stand-alone demo here, and view source for the html, css and JavaScript.

Style your JavaScript console logging

2015-10-11 00:00:00 by Mike

Here's a simple technique to help you spot your console debugging. Simply precede the logging message with '%c' and pass the log style you want as a string of CSS to the console.log function. Like this:

console.log('%c Stand out with console.log style ', 'padding:2px; background: #111; color: #7cd');

If you are using Chrome or Firefox you'll be fortunate enough to see this:

Make a card flip effect purely with CSS

2015-10-11 00:00:00 by Mike

Here is a straight forward way to make a card flip animation with HTML and CSS only.
When a user hovers over the element, the CSS :hover styles do the magic.
It even works for touch devices.

It will look something like this when done:

Here is the HTML:

<section id="main" class="" ontouchstart="this.classList.toggle('hover');">  
  <div class="flipper">
    <div class="front">
      <h1>
        Front side
      </h1>
    </div>
    <div class="back">
      <h2>
        Reverse side
      </h2>
    </div>
</div>
</section>

Here is the CSS:

h1,h2 {
  margin-top:2.5em;
  font-weight:normal;
  color:#fff;
  font-weight:300;
  font-family: Helvetica;
}
/* Begin: animations */
section#main {
  -webkit-perspective: 1000;
  -moz-kit-perspective: 1000;
  perspective: 1000;
}
/* flip the pane when hovered */
section#main:hover .flipper, section#main.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
section#main, .front, .back {
  width: 200px;
  height: 200px;
}
/* flip speed goes here */
.flipper {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-align: center;
  position: relative;
}
/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius:300px;
  background:#e61;
}
.front {
  background:#595;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.back:hover {
  z-index: 5;
}

HTML character reference chart

2015-08-18 00:00:00 by Mike

The HTML character reference chart has just been added to help you find those tricky-to-remember encodings.

Check it out here

Responsive CSS Debugging Technique

2015-08-10 00:00:00 by Mike

Sometimes it can be easy to lose track of which responsive CSS styles are being applied in a responsive design.

Here is a simple way to add a debugging message to remind you of the current breakpoint. It makes use of the
::after CSS pseudo-selector to append the current media query that is evaluating as true. In the case of this demo,
the ::after content updates based on the current max-width of the viewport.

(Make sure to also click here to see the full demo. Resize the window to see the debugging message update):

Here's the HTML:

<div id="demo">

	<div id="responsive-message">
	breakpoint 
	</div>

	<div id="main-content">
		<div id="photos">
			<div class="photo">
				<img src="images/mist.jpg">
			</div>
			<div class="photo">
				<img src="images/bay.jpg">
			</div>
			<div class="photo">
				<img src="images/sunset.jpg">
			</div>
		</div>
	</div>

</div>

Here's the CSS:

body {
	background: #222;
	font-size:1em;
	font-family: "Helvetica Light", Sans-serif, Arial;
	margin:0;
	padding:0;
}

#demo {
	position: relative;

}

img {
	max-width:100%;
}

#responsive-message {
	position:absolute;
	top:3em;
	width:100%;
	background: rgba(170, 220, 250, 0.90);
	color:#000;
	font-size:1em;
	font-weight:100;
	padding:1em;
}
#responsive-message::after {
	content:" max-width: 1500px";
}

#main-content {
	display:inline-block;
	padding:1em 0 2em 0;
	text-align: center;
}
#main-content #photos {
	margin: 0 auto 0 auto;
	width: 99%;
	display:inline-block;
}
#main-content #photos .photo {
	width:30%;
	float:left;
	margin:1em;
}

@media screen and (max-width: 1200px) {
	html, body {
		overflow-x:hidden;
	}
	#main-content #photos .photo  {
		width:40%;
	}
	#responsive-message::after {
		content:" max-width: 1200px";
	}
}

@media screen and (max-width: 550px) {
	#main-content #photos .photo  {
		width:85%;
	}
	#responsive-message {
		font-size: 1em;
	}
	#responsive-message::after {
		content:" max-width: 550px";
	}
}

HTML5 Device Orientation Demo

2015-07-29 00:00:00 by Mike

Want to build an interactive parallax like the iOS app icons that shift perspective?
It's easier than you might think.

Thanks to the HTML5 device orientation API you can build it.

Here's the demo (click here to see it in a full window):

Here's the JavaScript:

window.addEventListener("load", function() {

	var eleOrientationBeta = document.getElementById("orientationBeta");
	var eleOrientationGamma = document.getElementById("orientationGamma");
	var eleDevice = document.getElementById("device");
	eleDevice.style.top = "75px";
	eleDevice.style.left = "75px";

	function processOrientation(event) {
		var beta = event.beta;
		var gamma  = event.gamma;

		eleOrientationBeta.innerHTML = beta;
		eleOrientationGamma.innerHTML = gamma;
		intTop = (eleDevice.style.top).replace("px","");
		intLeft = (eleDevice.style.left).replace("px","");
		eleDevice.style.top = (80 + beta) + "px";
		eleDevice.style.left = (100 + gamma) + "px";
	};

	window.addEventListener("deviceorientation", processOrientation, true);

});

Here's the CSS and HTML:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="" />
	<title>Device Orientation demo - pixelOneZero.com</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		font-family: Helvetica, Arial;
		font-weight: 100;
		color: #333;
		font-size: .75em;
		padding:1em;
	}
	.column-40 {
		float:left;
		width:47%;
		margin-right:.5em;
	}
	.column-100 {
		width:100%;
		margin:2em 0 0 0;
		clear:left;
		display:inline-block;
	}
	.output {
		padding: 1em;
		margin: 0.5em 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		background: #def;
		border: 1px solid #aaa;
	}
	#diagram-container {
		position: relative;
		height: 255px;
		width: 255px;
	}
	#diagram-container.output {
		padding:0;
	}
	#device {
		position:absolute;
		height:50px;
		width:50px;
		background:#555;
	}
	</style>
</head>
<body>

<div class="column-40">
	Beta:
	<div id="orientationBeta" class="output">
	</div>
</div>
<div class="column-40">
	Gamma:
	<div id="orientationGamma" class="output">
	</div>
</div>

<div class="column-100">
	Beta &amp; Gamma Illustrated:
	<div id="diagram-container" class="output">
		<div id="device">
			
		</div>
	</div>
</div>

</body>
</html>

Super Minimal HTML5 Starter Document

2015-07-28 00:00:00 by Mike

What's the most commonly used code you've needed as a developer?

For me, a decent HTML5 starter document is high on that list of frequently used code.
So, without further delay, here is a concise HTML5 compliant starter document.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="" />
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="">
</head>
<body>

<script src=""></script>
</body>
</html>

Shrinking count notification with CSS

2015-07-27 00:00:00 by Mike

Oh the excitement of seeing a red dot with a number in the middle!
It's telling you: You have email, you have chats to read, you have online stuff to check out!

With the massive popularity of iOS, Facebook and LinkedIn comes the associated design conventions, and the
shrinking count notification is one of those UI features.

The HTML:

<div class="icon-holder" id="messages">
	<div class="notification">
		<div id="count" class="">
			30
		</div>
	</div>
	<img src="icon-messages.png" class="icon">
</div>

<a href="#" id="dismiss">dismiss notification</a>

The CSS:

.icon-holder {
	position:relative;
	width:300px;
}
.icon {
	max-width:100%;
}
.notification {
	width:7em;
	text-align: center;
	position:absolute;
	right:-1em;
	top:0;
}
.notification #count {
	background:#f00;
	width:2em;
	height:2em;
	line-height: 2em;
	color:#fff;
	border-radius: 2em;
	font-size:3em;
	font-family: Helvetica, "San-serif", Arial;
	font-weight: 100;
	margin:auto;
	overflow:hidden;
}

strong a {
	font-family: Helvetica, "San-serif", Arial;
	text-decoration: underline;
	font-size:1em;
	color:#37c;
}

/* begin: animation styles */
#count.dismissed {
	-webkit-animation-duration: .25s;
  	animation-duration: .25s;
  	-moz-animation-duration: .25s;
  	-webkit-animation-name: dismiss;
  	animation-name: dismiss;
  	-moz-animation-name: dismiss;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	-moz-animation-fill-mode: forwards;
};

@keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}
@-webkit-keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}
@-moz-keyframes dismiss {
  	from {
    	width:2em;
    	height:2em;
    	margin-top:0;
    	margin-bottom:0;
  	}
  	to {
    	width:0;
    	height:0;
    	margin-top:1em;
    	margin-bottom:1em;
  	}
}

The JavaScript:

window.addEventListener("load", function() {
	eleDismissLink = document.getElementById("dismiss");
	eleCount = document.getElementById("count");
	eleDismissLink.addEventListener("click", function(e) {
		e.preventDefault();
		eleCount.className += " dismissed";

	});
});

Unicode for Iconography

2015-02-20 00:00:00 by Mike

Here is an obscure, but useful unicode character I found this morning, for representing the ubiquitous mobile navigation icon (a.k.a.: the "hamburger" icon):


Hopefully you are using a web browser capable of rendering that symbol. If you can't see it, it's simply the standard three, stacked, horizontal lines.

While on the topic of unicode; two comprehensive lists of unicode characters:

1. An intuitive, visual unicode character browser: http://copypastecharacter.com/
2. An official list from the Unicode governing organization: http://unicode.org/charts/

Morphing Icons with CSS Web Animations (or "hamburger-x-morph")

2015-02-17 00:00:00 by Mike

Click the navigation icon below to start the animation.

Here is the HTML

<div id="navigation-container" data-component="navigation">
	<div id="icon-container">
		<div class="nav-icon top"></div>
		<div class="nav-icon middle"></div>
		<div class="nav-icon bottom"></div>
	</div>
</div>

Here is the CSS

#navigation-container {
	cursor:pointer;
}

#icon-container {
	cursor:pointer;
	padding:5px;
	display:inline-block;
	margin:4em auto 0 auto;
	position:relative;
}

#icon-container div.nav-icon {
	width:20px;
	height:3px;
	background:#000;
	cursor: pointer;
	position:absolute;
}

#icon-container div.nav-icon.top {
	top:0;
}

#icon-container div.nav-icon.middle {
	top:6px;
}

#icon-container div.nav-icon.bottom {
	top:12px;
}

/* animation styles */

#icon-container div.nav-icon.top.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphTop;
  animation-name: morphTop;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#icon-container div.nav-icon.middle.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphMiddle;
  animation-name: morphMiddle;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#icon-container div.nav-icon.bottom.close {
	-webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-name: morphBottom;
  animation-name: morphBottom;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes morphTop {
  from {
    top:0;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes morphTop {
  from {
    top:0;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(-45deg);
  }
}

@keyframes morphMiddle {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
@-webkit-keyframes morphMiddle {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

@keyframes morphBottom {
  from {
    top:12px;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(45deg);
  }
}
@-webkit-keyframes morphBottom {
  from {
    top:12px;
    transform: rotate(0deg);
  }
  to {
    top:6px;
    transform: rotate(45deg);
  }
}

Lastly, here is the JavaScript

var poz = {
	navigation: function() {
		var container = document.getElementById("navigation-container");
		var iconLines = document.getElementsByClassName("nav-icon");
		container.addEventListener("click", function() {
			for (var a=0; a < iconLines.length; a++) {
				iconLines[a].classList.add("close");
			}
			container.classList.add("open");
		});	
	},
	init: function() {
		poz.navigation();
	}
}

window.addEventListener("load", function() {
	poz.init();
})