Skip to content

Instantly share code, notes, and snippets.

Moving things around with Velocity.js

I'm moving around a whole bunch of elements with Julian Shapiro's Velocity.js. It's running pretty well on my Chrome at anywhere between 60 - 48 frames per second, impressive :)

It took around 4 hours to bang this out after first looking at the documentation, pretty easy to use if you are already a jQuery user. http://julian.com/research/velocity/

No markup because why select when you can create right?

*** I should add that this sort of thing (animation sequence) isn't really what Velocity.js was built for, but I just wanted to crank up the elements/intensity to see how the browser handled it. Incorporating Velocity.js in to your average UI transitions/animations should be a dream :)

@SindhujaD
SindhujaD / Resizable-SASS-Icons.markdown
Created March 12, 2014 17:59
A Pen by Marian Arlt.

Resizable SASS Icons

Pure CSS Icons written with relatively little SASS. Resizable! Change one variable to change icon size.

A Pen by Marian Arlt on CodePen.

License.

@SindhujaD
SindhujaD / Calendar-and-Clock.markdown
Created February 22, 2014 18:53
A Pen by mselmany.
@SindhujaD
SindhujaD / Profile-popup.markdown
Created February 9, 2014 23:32
A Pen by Bart Veneman.
@SindhujaD
SindhujaD / Modal-and-overlay.markdown
Created February 9, 2014 23:30
A Pen by Andrew DeBroux.

Modal and overlay

Using jQuery to create a popup window with a content overlay. The modal window is centered on the page regardless of window resize or scroll (for long content). Responsive. Minimal design for easiest reuse purposes.

New and improved I've updated the code to use OO-JavaScript. I've also fixed the issue when the window is shorter than the modal window causing infinite scroll.

A Pen by Andrew DeBroux on CodePen.

License.

Popup/Modal without JS

A popup window/modal window experiment based on the :target pseudoclass.

The first popup stays open until you click the "X" to close. The second will close when you click anywhere outside the popup.

A Pen by Paul on CodePen.

License.

@SindhujaD
SindhujaD / Social-App-Menu.markdown
Created January 16, 2014 02:41
A Pen by Matt Hoiland.
@SindhujaD
SindhujaD / Social-Flip-Cards.markdown
Created January 16, 2014 02:40
A Pen by Charlotte Dann.

Line Menu Icon that Expands Into Actual Menu

It's smallen-ized through CSS transforms and then expands when you click on it by adding a class. Some elements are hidden when small to make it seem like a simplified icon.

A Pen by Chris Coyier on CodePen.

License.

@SindhujaD
SindhujaD / Spread.markdown
Created January 16, 2014 02:34
A Pen by Mathias Paumgarten.