markhillard

Simple RSS Feed Parsing (YQL)

The main concept here is to dynamically populate RSS data with as little HTML markup as possible. I'm using YQL (Yahoo! Query Language) to grab feed data in JSON format, "normalize" it, and bypass CORS (Cross-origin resource sharing) issues.

I used jQuery and the $.getJSON() method to build this lightweight, automated reader.

The YQL (Yahoo! Query Language) platform enables you to query, filter, and combine data across the web through a single interface. It exposes a SQL-like syntax that is both familiar to developers and expressive enough for getting the right data.

A Pen by Mark Hillard on CodePen.

markhillard

Animated Instagram Photo Feed

This is my Instagram feed loaded with Instafeed.js and animated with Velocity.js. It also has a conditional pagination feature that will load (and animate) the next set of images. It's super duper.

A Pen by Mark Hillard on CodePen.

License.

markhillard

Full Screen Video with Parallax Scrolling

This is a responsive layout that features a full screen "hero" video with a hardware accelerated parallax scrolling effect. You can play/pause the video at any time, set different scroll rates to as many elements as you like as well as add additional CSS transitions using jQuery.

A Pen by Mark Hillard on CodePen.

License.

markhillard

Custom Select List

This is a customizable drop-down menu that behaves exactly like a <select> element. It works in all modern browsers and is a great looking alternative to a normal option list.

A Pen by Mark Hillard on CodePen.

License.

markhillard

Velocity.js Animation Sequence

This demo utilizes the sequence running feature ($.Velocity.RunSequence()) from the Velocity.js UI pack, which allows you to animate multiple elements in sequential order.

Read more at http://julian.com/research/velocity/#uiPack.

A Pen by Mark Hillard on CodePen.

License.

markhillard

Blockquote Cycler

Here's a dead simple content fader that cycles through all <blockquote> elements within a <div>. You can use this on any type of content, so it's very easy to create an auto-playing "slideshow" with your own effects.

A Pen by Mark Hillard on CodePen.

License.

markhillard

JSON Event Generator

I created this for a client that needed an easy way to generate JSON data for an event feed. It was used in conjunction with Angular.js to display upcoming events on his website. His workflow consisted of copying the finalized data and pasting it into a JSON file, which was then uploaded (and periodically replaced) via FTP.

I used the JSON.stringify() method in jQuery to build the data set. Go through the commented code in the JS window to see how it all works.

Usage:

1. Click "Add Event" to create a new event block (maximum of 3).
2. Fill out all fields.

markhillard

Realistic Heartbeat

After checking my pulse tonight I was inspired to create this pen. Using Bounce.js and "inline" SVG, I tried to mimic my resting heart rate and build an animation that reflected it. Adjust the animation time (in milliseconds) to control how fast or slow it goes.

A Pen by Mark Hillard on CodePen.

License.

markhillard

p5.js Microphone Toggle

Using the p5.js canvas drawing library, I was able to create a toggle button that enables/disables your computer microphone when clicked. It listens to this audio channel in real time and produces an animated ellipse that increases/decreases in amplitude based on the input volume.

A Pen by Mark Hillard on CodePen.

License.

markhillard

Google Maps Sandbox

Just messing around with the Google Maps JavaScript API.

A Pen by Mark Hillard on CodePen.

License.