aresnick/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A small gallery of CSS & JavaScript Effects (DGMD E-15, Spring 2015)

Included here are ten, stripped down examples of effects you might consider using as part of your customization of your card on our /people page.  Each of these links directly to the demo, but you can see the full source code below, too.
To play around with these demos, clone this repository by running git clone https://gist.github.com/8e881e01245989794c5e.git in your terminal.  This will create an unfortunately-titled folder, 8e881e01245989794c5e which you can cd (change directory) into.  Once there, you should be able to open up each HTML file in your own text editor and/or browser to explore.

In rough order of complexity:


font.html loads a font remotely from Google Fonts and using it to change the font we use in a given div.


round.html rounds the corners of a div using CSS.


fade.html uses CSS to animate the fading of an element when we hover over it.


spin.html spins our div upside down when we hover over it using CSS.


synthesize.html build our page from scratch using nothing but JavaScript, adding functionality similar to fade.html without CSS.


sprite.html uses a sprite sheet and CSS to achieve flipbook-style animation.


random.html uses JS to randomly reorder a list whenver you click the mouse.


mouse.html uses JS to place a div randomly, and when we're close enough, make it follow our mouse.


flickr.html uses JS and a technique known as JSONP to grab a random photo from Flickr's API and set it as a background.


canvas.html uses HTML's <canvas> element to draw a smiley face.


And finally, a boring PS: boilerplate.html is a bare HTML stub you can use as a template for your own explorations.

  
## boilerplate.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/
    </style>
</head>

<body>
	<!-- This is where you can put your HTML -->

    <script>
    // This is where you can put your JavaScript
    </script>
</body>

</html>

## canvas.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/
    </style>
</head>

<body>
    <!-- This is where you can put your HTML -->
    <canvas width='150' height='150' id='canvas'>
        <!-- Note that we set the width and height as attributes, not in CSS.  This is because of the weird behavior of canvas.  You can read more at http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties -->
    </canvas>

    <script>
    // This is where you can put your JavaScript

    window.addEventListener('load', function() { // When the window loads, do this stuff
        var canvas = document.getElementById('canvas'); // Grab the canvas
        if (canvas.getContext) { // if we can draw in it
            var ctx = canvas.getContext('2d'); // get a handle on the drawing functions

            // Start drawing the path; see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes for more
            ctx.beginPath();
            ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle

            ctx.moveTo(110, 75);
            ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)

            ctx.moveTo(65, 65);
            ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye

            ctx.moveTo(95, 65);
            ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye

            ctx.stroke(); // Actually render what we've traced
            ctx.closePath();
        }
    });
    </script>
</body>

</html>

## fade.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    /*This says, "Apply these rules to anything with the id of 'mySquare'"    */
    #mySquare {
        width: 50%;
        height: 500px;
        background-color: lightblue;
    }

    /* This uses what's called a 'pseudoselector', you can read more about them at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes — Basically, they let you apply certain CSS styles _only_ when the element is in a certain state.  In this case, the styling is triggered when we hover over the element with the id 'mySquare' */
    #mySquare:hover {
        transition: 1s; /* This is where the action happens: it tells CSS to animate any changes in the CSS styling of these elements over one second*/

        background-color: lightgreen;
    }
    </style>
</head>

<body>
	<!-- This is where you can put your HTML -->
	<div id='mySquare'></div>
    <script>
    // This is where you can put your JavaScript
    </script>
</body>

</html>

## flickr.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    #mySquare {
        width: 500px;
        height: 500px;
        background-color: lightgreen;
        background-size: cover;
        /* make it so that our background image is scaled up to at least cover our div */
    }
    </style>
</head>

<body>
    <!-- This is where you can put your HTML -->
    <div id='mySquare'></div>
    <script>
    // This is where you can put your JavaScript

    // Grab our square
    var square = document.getElementById('mySquare');


    var setBackgroundImage = function(element, url) {
        // set the background image to a url
        element.style.backgroundImage = 'url(' + url + ')';
    };

    var randomImageURL = function(flickrData) {
        // Get a random image's url from the data flickr gives us
        var randomInteger = Math.floor(Math.random() * flickrData.items.length);
        return flickrData.items[randomInteger].media.m; // You can figure out this formatting by looking at the dictionaries in https://api.flickr.com/services/feeds/photos_public.gne?format=json
    };

    // This is a specially named function which is called by our script request (below) to flickr. If you go to https://api.flickr.com/services/feeds/photos_public.gne?format=json in your browser, you'll notice that it returns a bunch of JavaScript, all passed to a function called jsonFlickrFeed.
    var jsonFlickrFeed = function(data) {
        // set the background image to a random image from flickr
        setBackgroundImage(square, randomImageURL(data));
    };
    </script>

    <script src='https://api.flickr.com/services/feeds/photos_public.gne?format=json'>
    // This is where the magic happens; This is a technique called JSONP, which you can read more about at http://en.wikipedia.org/wiki/JSONP
    </script>
</body>

</html>

## font.html
<html>
<meta charset="utf-8">

<head>
	<!-- This line loads a font file from Google Fonts; you can check out a short tutorial on how to use Google's Font Service [here](https://www.youtube.com/watch?v=KPwG67lEFdc) or [here](https://developers.google.com/fonts/docs/getting_started) -->
    <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

    <style>
    /*This is where you can put your CSS*/

	/*This says, "Apply these rules to anything with the id of 'mySquare'"    */
    #mySquare {
        width: 500px;
        height: 500px;
        background-color: lightgreen; /* You can set custom colors too, but CSS knows a lot of different colors.  You can read more at https://developer.mozilla.org/en-US/docs/Web/CSS/color */
        font-family: 'Bangers', cursive; /* Setting the font to Bangers, or if the browser can't find that, a generic fallback */
        font-size: 5em; /* This sets the font size using a relative measure.  You can read more about em's in CSS at https://developer.mozilla.org/en-US/docs/Web/CSS/length */
    }
    </style>


</head>

<body>
    <!-- This is where you can put your HTML -->
    <div id='mySquare'>
        Grumpy wizards make toxic brew for the evil Queen and Jack.
    </div>

    <script>
    // This is where you can put your JavaScript
    </script>
</body>

</html>

## mouse.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

	#mySquare {
        position: relative; /* this lets us position #mySquare relative to its parents */;
        width: 10%;
        height: 10%;
        background-color: lightgreen;
    }
    </style>
</head>

<body>
    <!-- This is where you can put your HTML -->
    <div id='mySquare'></div>
    <script>
    // This is where you can put your JavaScript

    // Grab #mySquare so we can manipulate it with JavaScript
    var square = document.getElementById('mySquare');

    var distance = function(point1, point2) {
        // A function to calculate the distance between two points.
        // If it doesn't make sense, try checking out http://betterexplained.com/articles/surprising-uses-of-the-pythagorean-theorem/

        var xDelta = Math.pow((point2.x - point1.x), 2);
        var yDelta = Math.pow((point2.y - point2.y), 2);
        return Math.sqrt(xDelta + yDelta);
    };

    var mousePosition = {
        // An empty dictionary to hold our x and y information
        x: null,
        y: null
    };
    var updateMousePosition = function(e) {
        mousePosition.x = e.clientX || e.pageX;
        mousePosition.y = e.clientY || e.pageY;
    };

    var getPosition = function(element) {
        // Take an element and get its center point
        return {
            x: element.offsetLeft + element.offsetWidth / 2,
            y: element.offsetTop - element.offsetHeight / 2
        }
    };
    var setPosition = function(element, xy) {
        // Move an element so that its center is at xy
    	element.style.position = 'relative';
    	element.style.left = xy.x - element.offsetWidth / 2;
    	element.style.top = xy.y - element.offsetHeight / 2;
    };
    var followMouse = function(element) {
        // Make the position of a given element and the mouse equal
    	setPosition(element, mousePosition);
    }

    window.addEventListener('load', function() { // When the page loads, run this stuff
        // Choose a random percentage between 0 and 90 for x and y
        // Since we know that the box is 10% tall and wide, it'll never be offscreen
        var randomX = Math.floor(Math.random() * 90) + '%'; // Notice that we append the '%' character— we're just setting a string…
        var randomY = Math.floor(Math.random() * 90) + '%';

        // Set the CSS positions via JS— this requires position: relative or position: absolute
        square.style.left = randomX;
        square.style.top = randomY;

        window.addEventListener('mousemove', function(eventData) {
            // Whenever the mouse moves, run this stuff
        	updateMousePosition(eventData); // update the mousePosition variable
        	if (distance(getPosition(square), mousePosition) < 100) { // If we're less than 100px to the center of the box
	        	followMouse(square) // set the box position to the mouse position
        	}
        });
    });
    </script>
</body>

</html>

## random.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    /* This sets the width and height of all divs that are _direct_ children of elements with the id of 'container'; in our case, all the colrs */
    #container > div {
        width: 100%;
        height: calc(100%/7); /* Since we know we have seven colors, we can make it fill up the screen */
    }
    /* ROYGBIV */
    #one {
        background-color: red;
    }
    #two {
        background-color: orange;
    }
    #three {
        background-color: yellow;
    }
    #four {
        background-color: green;
    }
    #five {
        background-color: blue;
    }
    #six {
        background-color: indigo;
    }
    #seven {
        background-color: violet;
    }
    </style>
</head>

<body>
    <!-- This is where you can put your HTML -->
    <div id='container'>
        <div id='one'></div>
        <div id='two'></div>
        <div id='three'></div>
        <div id='four'></div>
        <div id='five'></div>
        <div id='six'></div>
        <div id='seven'></div>
    </div>
    <script>
    // This is where you can put your JavaScript

    window.addEventListener('load', function() { // When the window loads
    	window.addEventListener('mousedown', function() { // Run this function whenever mousedown happens
    		var colors = document.querySelectorAll('#container > div'); // Get all the divs that are direct children of elements with the id of container
    		var colors = Array.prototype.slice.call(colors); // Convert that collection into an array (dumb JavaScript stuff)
    		for (var i = 0; i < colors.length; i = i + 1) { // Make a new variable i, and cycle through it, making it one greater each time as long as it is less than the length of our colors array
    			var randomInteger = Math.floor(Math.random()*7); // Get a random number between 0-7
    			document.getElementById('container').appendChild(colors[randomInteger]); // And grab that color element and stick it at the bottom of #container
    		}
    	});
    });
    </script>
</body>

</html>

## round.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    /*This says, "Apply these rules to anything with the id of 'mySquare'"    */
    #mySquare {
    	width: 500px;
    	height: 500px;
    	background-color: lightgreen;
    }

    /* This uses what's called a 'pseudoselector', you can read more about them at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes — Basically, they let you apply certain CSS styles _only_ when the element is in a certain state.  In this case, the styling is triggered when we hover over the element with the id 'mySquare' */
    #mySquare:hover {
    	transition: 1s;  /* This is where the action happens: it tells CSS to animate any changes in the CSS styling of these elements over one second*/
    	border-radius: calc(500px/2); /* This sets how rounded the corners are—basically, when to start rounding the corner, so half of the width makes a circle */
    }
    </style>
</head>

<body>
	<!-- This is where you can put your HTML -->
	<div id='mySquare'></div>
    <script>
    // This is where you can put your JavaScript
    </script>
</body>

</html>

## spin.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    /*This says, "Apply these rules to anything with the id of 'mySquare'"    */
    #mySquare {
        width: 50%;
        height: 500px;
        background-color: lightblue;

        transition: 1s; /* This is where the action happens: it tells CSS to animate any changes in the CSS styling of these elements over one second*/

        /* Setting some of the text's styling to make it fill up the card */
        font-family: "Courier New", monospace; /* Set a font, with a fallback */
        text-transform: uppercase; /* capitalize everything */
        font-size: 4.5em;
        line-height: calc(500px/4); /* Since we set the height to 500px, we can make the line height 1/4 to fill up four lines */
        text-align: center;
    }

    /* This uses what's called a 'pseudoselector', you can read more about them at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes — Basically, they let you apply certain CSS styles _only_ when the element is in a certain state.  In this case, the styling is triggered when we hover over the element with the id 'mySquare' */
    #mySquare:hover {
        transform: rotate(180deg); /* This tells CSS to rotate our element 180 degrees */
    }
    </style>
</head>

<body>
	<!-- This is where you can put your HTML -->
	<div id='mySquare'>
        Grumpy wizards make toxic brew for the evil Queen and Jack.
    </div>
    <script>
    // This is where you can put your JavaScript
    </script>
</body>

</html>

## sprite.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    /*CSS for the frame*/
    #frame {
        width: 50px;
        height: 72px;

        /* Setting the background for #frame to the sprite sheet; you can read more about this approach at http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps */
	    background: url(https://s3.amazonaws.com/dgmde15githubio/bakhtiar-wavesheet.png) left top;
    }
    /* This is where the animation happens: it tells us to run wave-animate in 10 steps, which moves the background position from 0 to -500px, and does this animation when we hover over #frame */
    #frame:hover {
        -webkit-animation: wave-animate 1s steps(10);
    }
    @-webkit-keyframes wave-animate {
        from {
            background-position: 0px;
        }
        to {
            background-position: calc(-1*10*50px); /* i.e. cycle through ten steps */
        }
    }
   </style>
</head>

<body>
    <div id="frame"></div>
</body>

</html>

## synthesize.html
<html>
<meta charset="utf-8">

<body>
    <script>
    // This is where you can put your JavaScript

    window.addEventListener('load', function() { // When the window loads, run this stuff

    	var square = document.createElement('div'); // Create a div in the ether
    	square.style.id = 'mySquare'; // give it an id

    	square.style.width = '100px'; // give it a height
    	square.style.height = '100px'; // and width

    	square.style.backgroundColor = 'lightgreen'; // and color— Note the camelCase, 'background-color' in CSS turns into 'backgroundColor' in JS
		square.style.opacity = '1';

		square.style.transition = '1s'; // style its 'transition' attribute

    	var body = document.getElementsByTagName('body')[0]; // grab the <body> tag— getElementsByTagName returns an array, so we need to grab the first element
    	body.appendChild(square); // and now stick our ethereal square into the body

    	square.addEventListener('click', function() {
    		// and give our square a behavior when we click it, toggling it between 0.1 and 1
    		// that weird notation is called 'ternary notation' — you can read more about it at https://msdn.microsoft.com/en-us/library/ie/be21c7hw%28v=vs.94%29.aspx
    		square.style.opacity = (square.style.opacity == '0.1' ? '1' : '0.1');
    	})
    });
    </script>
</body>

</html>
	<html>
	<meta charset="utf-8">

	<head>
	<style>
	/This is where you can put your CSS/
	</style>
	</head>

	<body>
	<!-- This is where you can put your HTML -->

	<script>
	// This is where you can put your JavaScript
	</script>
	</body>

	</html>