Colored box-shadows from a nearly white element create the lightsaber effect. CSS transformations and transitions are used for the activation effects.
A Pen by Jeremy Paris on CodePen.
Just some keyframe animation practice. No javascript allowed.
A Pen by Jeremy Paris on CodePen.
I took some time to practice some hover transitions and animations.
A Pen by Jeremy Paris on CodePen.
All of the elements are animated via CSS. Javascript is used to swap animation classes and to add the fireballs to the stage.
A Pen by Jeremy Paris on CodePen.
ravenroc
/ Transformers-Pallete-Swap.markdown
Last active
November 4, 2019 15:29
Transformers Pallete Swap
I used SASS maps to create different color palletes that can be swapped out with Javascript by simply switching the body class. The colors used are based off of the famous Decepticons Seekers, such as Starscream, Skywarp, and Thundercracker. Each Seeker has the same body model, but have their own individual color schemes.
A Pen by Jeremy Paris on CodePen.
A quick loading spinner that spins into the next color.
A Pen by Jeremy Paris on CodePen.
ravenroc
/ Random-Simpsons-Quote-[AngularJS].markdown
Last active
November 4, 2019 15:30
Random Simpsons Quote [AngularJS]
I'm learning to use some AngularJS, so I made a Simpsons random quote generator. Refresh button spins on hover.
"I am so smart! I am so smart! S-M-R-T! I mean, S-M-A-R-T!" - Homer Simpson
A Pen by Jeremy Paris on CodePen.
ravenroc
/ Pure-CSS-Dynamic-Width-&-Height.markdown
Last active
November 4, 2019 15:28
Pure CSS Dynamic Width & Height
SASS @mixin for element blocks with dynamic width and heights.
@mixin based off article found here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
A Pen by Jeremy Paris on CodePen.
ravenroc
/ Decepticon-Logo.markdown
Last active
November 4, 2019 15:27
SVG Animation - Decepticon Logo
Took the SVG logo from my Transformers Palette Swap pen (http://codepen.io/digsite_/pen/mIJKa) and made a SVG animation out of the pieces.
A Pen by Jeremy Paris on CodePen.
Adobe Web Platform just released a javascript library for making drop cap text, so I decided to have some fun trying it out. One big style limitation is that the padding styles seem to be overridden by dropcap.js.
Adobe Web Platform Blog: http://blogs.adobe.com/webplatform/2014/10/02/drop-caps-are-beautiful/ Dropcap.JS Repo: https://github.com/adobe-webplatform/dropcap.js
Edit: Fixed typo
A Pen by Jeremy Paris on CodePen.
OlderNewer