<main class="container text-center" ng-app='myApp'>
<header>
<h1>Nyancat CSS Experiments</h1>
</header>
<audio controls loop id="audio-player">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367874/nyancat-loop.mp3" type="audio/mp3" />
</audio>
<div class="row">
<div class="col-md-4">
<article class="panel">
<div class="panel-heading">Nyancat using DIV</div>
<div class="panel-body">
<nyan-cat></nyan-cat>
</div>
</article>
</div>
<div class="col-md-4">
<article class="panel panel-success">
<div class="panel-heading">Nyancat using SVG</div>
<div class="panel-body">
<nyan-cat></nyan-cat>
</div>
</article>
</div>
<div class="col-md-4">
<article class="panel panel-warning">
<div class="panel-heading">Nyancat using CANVAS</div>
<div class="panel-body">
<nyan-cat></nyan-cat>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-4">
<article class="panel">
<div class="panel-heading">Tail using DIV</div>
<div class="panel-body">
<nyan-cat-tail length="8" type="div"></nyan-cat-tail>
</div>
</article>
</div>
<div class="col-md-4">
<article class="panel panel-success">
<div class="panel-heading">Tail using SVG</div>
<div class="panel-body">
<nyan-cat-tail length="8" type="svg"></nyan-cat-tail>
</div>
</article>
</div>
<div class="col-md-4">
<article class="panel panel-warning">
<div class="panel-heading">Tail using CANVAS</div>
<div class="panel-body">
<nyan-cat-tail length="8" type="canvas"></nyan-cat-tail>
</div>
</article>
</div>
</div>
<footer class="text-center">
<p>
Crafted with love, unicorn farts, and angel backhairs by the great
<a href="https://codepen.io/xavisavvy">xavisavvy</a>
</p>
</footer>
</main>
@import "compass/css3";
body{
background-color: #003366;
footer, h1{
color:white;
}
audio{
margin: 15px 0 25px 0;
}
}
nyan-cat-tail{
display: block;
tail-container{
position: relative;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width:100%;
height: 55px;
tail-segment {
$duration: 0.5s;
width: 25px;
&:nth-child(2){
animation-delay: 0.3s;
}
&:nth-child(odd){
animation-delay: 0.5s;
}
@include animation(upDown $duration infinite 0.3s);
> div {
display: block;
height: 10px;
}
}
}
}
@include keyframes( upDown ){
0%{ align-self: flex-start; }
25%{ align-self: flex-end; }
}
@mixin keyframes( $animationName ){
@-webkit-keyframes $animationName { @content; }
@-moz-keyframes $animationName { @content; }
@-o-keyframes $animationName { @content; }
@keyframes $animationName { @content; }
}
View Compiled
angular.module('myApp', ['myApp.directives', 'myApp.controllers'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/main'
});
}
]);
angular.module('myApp.controllers', [])
.controller('MainCtrl', ['$scope', function($scope) {}]);
angular.module('myApp.directives', [])
.directive('nyanCat', function() {
return {
restrict: 'E',
replace: true,
template: '<div>This is a kitteh test</div>',
}
});
angular.module('myApp.directives', [])
.directive('nyanCatTail', function() {
return {
restrict: 'E',
priority: 1000,
scope:{
length: '=',
type: '='
},
template: '<tail-container><tail-segment ng-repeat="segment in segments" /></tail-container>',
link: function(scope, elem, attrs){
var audio = $('#audio-player')[0];
audio.volume = 0.25;
// Generate the appropriate number of segments desired
scope.segments = [];
for (i=0; i < scope.length; i++){
scope.segments.push({
class: 'segment-' + i
});
}
}
}
});
angular.module('myApp.directives')
.directive('tailSegment', function(){
return{
restrict: 'E',
scope: {
thetype: '='
},
template: '<div ng-repeat="color in colors" ng-class="color.name" style="background-color: {{ color.hex }}"></div>',
link: function(scope, elm, attrs){
scope.colors = [
{ name: 'red', hex: '#FF1800' },
{ name: 'orange', hex: '#FF9A00' },
{ name: 'yellow', hex: '#FFEF00' },
{ name: 'green', hex: '#21DD00' },
{ name: 'blue', hex: '#008CFF' },
{ name: 'violet', hex: '#6942FF'}
];
}
}
});
