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.
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:
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.
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.
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.
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.
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.
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.
It's amazing what you can do with some simple math inside Angular.js expressions. Here are some dynamically populated progress bars that are meant to show how a particular group of giving opportunities are doing.
A Pen by Mark Hillard on CodePen.
