Want to learn more about web animation and motion design? You came to the right place!
You should also check out my slides and articles at RachelNabors.com. There's great stuff in there!
rachelnabors
/ gist:8049099
Created
December 20, 2013 01:27
A Sass/Compass mixin I built for The Black Brick Road's latest installment.
View gist:8049099
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // All the little mixins that will go into one BIG mixin. | |
| // Hey, might need them! | |
| @mixin set-dimensions($width, $height, $parent-width) { | |
| @include background-size(100% auto); | |
| width: percentage($width/$parent-width); | |
| padding-top: percentage($height/$parent-width); | |
| height: 0; | |
| } |
rachelnabors
/ Layers-to-Spritesheet Photoshop Script
Created
August 10, 2013 05:22
A Photoshop CS5 script for making sprites out of a pile of layers :D Assumes that the top layer is the first frame, bottom is the last. Based on this one: http://www.garagegames.com/community/blogs/view/11527 I just like my sprites to run vertically. I'm weird like that.
View Layers-to-Spritesheet Photoshop Script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (documents.length > 0) | |
| { | |
| var docRef = activeDocument; | |
| var activeLayer = docRef.activeLayer; | |
| numLayers = docRef.artLayers.length; | |
| var rows = numLayers; | |
rachelnabors
/ index.html
Last active
December 12, 2015 03:39
A CodePen by Rachel Nabors. Text Clipping Sass mixin - Based on Divya Manian's pure CSS background clipping solution. Now you can clip text to your heart's content without fear of disappearing text in non-webkit browsers!
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Hello!</h1> |
rachelnabors
/ index.html
Created
November 12, 2012 00:08
A CodePen by Rachel Nabors. Parallax backgrounds with walk cycle - Multiple background images with CSS3 animation create a multi-depth parallax affect. This is what parallax was meant for.
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="foreground"></div> | |
| <div class="midground"> | |
| <div class="tuna"></div> | |
| </div> | |
| <div class="background"> | |
| </div> |
rachelnabors
/ index.html
Created
November 7, 2012 02:53
A CodePen by Rachel Nabors. Cat walk + sit w/ animation delay - So walk-cycles are pretty easy. Use steps() in your CSS3 and impress your friends. So what about doing something with the end of that loop? Here I use animation-delay to play a second, sittin
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="tuna"></div> |
View index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="tuna"></div> | |
| <p>Awwww yeah...</p> |
rachelnabors
/ sassy-extend.scss
Created
May 15, 2012 14:46
How I use Sass's @extend withing @media directives
View sassy-extend.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media screen { | |
| /* Contain floats: h5bp.com/q */ | |
| .clearfix:before, .clearfix:after { content: ""; display: table; } | |
| .clearfix:after { clear: both; } | |
| .clearfix { *zoom: 1; } | |
| /* For image replacement */ | |
| .ir { | |
| text-indent: 100%; | |
| white-space: nowrap; |
View comicFormat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *** | |
| Format: | |
| *** | |
| Comic | |
| panel (scene) | |
| -description* | |
| person/thing/offscreen | |
| -dialog/soundeffect | |
| caption/narration |
rachelnabors
/ animationGDIRDU.md
Last active
August 29, 2015 14:13