I wrote my first algorithm for procedural animation using inverse kinematics. Feel free to tinker. If you want to use it in a project of your own, just give me some credit and feel free.
A Pen by MacSearlas on CodePen.
Marcin Palmaka botmad
This file contains hidden or 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="container" ng-app="parallaxApp" ng-controller="mainCtrl"> | |
| <div class="parallaximage-container" parallax> | |
| <img class="layer layer0" src="http://jaromvogel.com/images/design/jumping_rabbit/page2layer0.png"/> | |
| <img class="layer layer1" src="http://jaromvogel.com/images/design/jumping_rabbit/page2layer1.png"/> | |
| <img class="layer layer2" src="http://jaromvogel.com/images/design/jumping_rabbit/page2layer2.png"/> | |
| <img class="layer layer3" src="http://jaromvogel.com/images/design/jumping_rabbit/page2layer3.png"/> | |
| <img class="layer layer4" src="http://jaromvogel.com/images/design/jumping_rabbit/page2layer4.png"/> | |
| </div> | |
| <div class="instructions"> |
This file contains hidden or 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
| .sea | |
| - for (i = 0; i < 100; i++) | |
| .wave | |
| .wave_fade | |
| .wave_translate | |
| .wave_skew | |
| .wave_graphic |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Document</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta http-equiv="X-UA-Compatibile" content="ie=edge"> | |
| <meta name="pinterest" content="nopin" /> | |
| </head> |
botmad
/ direction-aware-text-shadow.markdown
Created
June 20, 2018 23:35
Direction-aware text-shadow
Direction-aware text-shadow, use of css variables to create perspective and 3D light effect on text
A Pen by Martin Picod on CodePen.
Experimental CSS3 3D scroll behavior
A Pen by Justin Windle on CodePen.
This file contains hidden or 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
| // copied from Chris Fritz 7 Secret Patterns Vue Consultants Don’t Want You to Know - https://youtu.be/7lpemgMhi0k?t=6m27s | |
| import Vue from 'vue' | |
| import upperFirst from 'lodash/upperFirst' | |
| import camelCase from 'lodash/camelCase' | |
| // Collect all components prefixed 'base-', | |
| // require in a base component context | |
| const requireComponent = require.context ( | |
| '.', false, /base-[\w-]+\vue$/ |