Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge branch 'master' of github.com:Holek/Pinkify

Conflicts:
	pinkify.html
  • Loading branch information...
commit 7cd0258bf002ec564740d394d4846aeb4eb0b2a4 2 parents dc7f305 + c1c525c
Mike Połtyn authored

Showing 3 changed files with 71 additions and 162 deletions. Show diff stats Hide diff stats

  1. +63 1 README.md
  2. +4 3 jQuery.pinkify.js
  3. +4 158 pinkify.html
64 README.md
Source Rendered
... ... @@ -1,4 +1,66 @@
1 1 Pinkify
2 2 =======
3 3
4   -A jQuery plugin to add simple animations with sound on any event.
  4 +![Oh, Pinkie](http://images3.wikia.nocookie.net/__cb20110930130423/halo/images/f/f6/Pinkie_Pie_4th_Wall.png)
  5 +
  6 +A jQuery plugin to add simple animations with sound on any event.
  7 +
  8 +Getting started
  9 +---------------
  10 +You need to have an image you want to use, and know its dimensions:
  11 +
  12 + $('body').pinkify({
  13 + 'imageUrl' : 'http://railslove.com/assets/pinkie_parasprite_polka_by_fluttershylover.gif',
  14 + 'imageWidth' : 106,
  15 + 'imageHeight' : 126,
  16 + });
  17 +
  18 +Firing on events
  19 +----------------
  20 +
  21 +Since this plugin works on all elements, you need to fire it up manually after a desired action, for example, after a user clicked on an element:
  22 +
  23 + $('a').bind('click', function(){
  24 + $(this).pinkify({
  25 + // your options passed on
  26 + });
  27 + });
  28 +
  29 +All available options
  30 +---------------------
  31 +
  32 + $(element).pinkify( {
  33 + 'animation' : {
  34 + 'direction' : 'left', // for now it onl;y responds to 'left' and 'right'
  35 + 'duration' : 0.2 // duration in seconds in which one image is moving
  36 + },
  37 + 'imageUrl' : 'pinkie_parasprite_polka_by_fluttershylover.gif',
  38 + 'imageWidth' : 106,
  39 + 'imageHeight' : 126,
  40 + 'audioAttr' : {
  41 + /* attributes for audio tag */
  42 + // 'autoplay' : 'autoplay',
  43 + // 'loop' : 'true'
  44 + },
  45 + 'aAttr' : {
  46 + 'href' : 'http://www.youtube.com/watch?v=6UXGEbaP5Ug&list=PL7BFEA256F3B8B0DF&index=5',
  47 + 'target' : '_blank'
  48 + },
  49 + 'audioFiles' : [
  50 + /* links to audio files used as source */
  51 + // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.ogg',
  52 + // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.mp3'
  53 + ],
  54 + 'click' : function () {
  55 + $(this).pinkify('destroy');
  56 + }
  57 + });
  58 +
  59 +License
  60 +-------
  61 + ----------------------------------------------------------------------------
  62 + "THE BEER-WARE LICENSE":
  63 + Mike Połtyn wrote this sotware. As long as you retain this notice you
  64 + can do whatever you want with this stuff. If we meet some day, and you think
  65 + this stuff is worth it, you can buy me a beer in return
  66 + ----------------------------------------------------------------------------
7 jQuery.pinkify.js
@@ -75,15 +75,16 @@
75 75
76 76 // IN SECONDS!
77 77 var delay = $this.outerWidth() / settings.imageWidth * settings.animation.duration;
78   - div = $('<div/>').css({
  78 + span = $('<span/>').css({
79 79 'width': '100%',
80 80 'height': settings.imageHeight+'px',
81 81 'position': 'absolute',
82 82 'bottom': '0px',
  83 + 'display': 'block',
83 84 'background': 'url("'+settings.imageUrl+'") repeat-x',
84 85 })[0];
85   - div.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
86   - pinkify.append(div);
  86 + span.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
  87 + pinkify.append(span);
87 88
88 89 var keyframes1 = '@' + keyframeprefix + 'keyframes pinkify-'+element_unique_id+' { '+
89 90 'from{background-position: '+(settings.animation.direction === 'right' ? '-' : '')+settings.imageWidth+'px; } '+
162 pinkify.html
... ... @@ -1,7 +1,6 @@
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4   -<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5 4 <meta charset=utf-8 />
6 5 <title>AT-AT-ify</title>
7 6 <!--[if IE]>
@@ -11,162 +10,9 @@
11 10 article, aside, figure, footer, header, hgroup,
12 11 menu, nav, section { display: block; }
13 12 </style>
14   - <script>
15   -(function( $ ) {
16   - var elm = document.createElement('div'),
17   - animation = false,
18   - keyframeprefix = '',
19   - domPrefixes = 'webkit Moz O ms Khtml'.split(' '),
20   - pfx = '';
21   - window.animationstring = 'animation';
22   - if( elm.style.animationName ) { animation = true; }
23   -
24   - if( animation === false ) {
25   - for( var i = 0; i < domPrefixes.length; i++ ) {
26   - if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
27   - pfx = domPrefixes[ i ];
28   - window.animationstring = pfx + 'Animation';
29   - keyframeprefix = '-' + pfx.toLowerCase() + '-';
30   - animation = true;
31   - break;
32   - }
33   - }
34   - }
35   -
36   - var methods = {
37   - init : function( options ) {
38   - var settings = $.extend( {
39   - 'animation' : {
40   - 'direction' : 'left',
41   - 'duration' : 0.2
42   - },
43   - 'imageUrl' : 'pinkie_parasprite_polka_by_fluttershylover.gif',
44   - 'imageWidth' : 106,
45   - 'imageHeight' : 126,
46   - 'audioAttr' : {
47   - // 'autoplay' : 'autoplay',
48   - // 'loop' : 'true'
49   - },
50   - 'aAttr' : {
51   - 'href' : 'http://www.youtube.com/watch?v=6UXGEbaP5Ug&list=PL7BFEA256F3B8B0DF&index=5',
52   - 'target' : '_blank'
53   - },
54   - 'audioFiles' : [
55   - // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.ogg',
56   - // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.mp3'
57   - ],
58   - 'click' : function () {
59   - $(this).pinkify('destroy');
60   - }
61   - }, options);
62   -
63   -
64   - return this.each(function(){
65   -
66   - var $this = $(this),
67   - data = $this.data('pinkify');
68   -
69   - // If the plugin hasn't been initialized yet
70   - if ( ! data ) {
71   -
72   - var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz",
73   - string_length = 8,
74   - element_unique_id = '',
75   - pinkify = $('<a class="pinkify"/>').attr(settings.aAttr);
76   - for (var i=0; i<string_length; i++) {
77   - var rnum = Math.floor(Math.random() * chars.length);
78   - element_unique_id += chars.substring(rnum,rnum+1);
79   - };
80   -
81   - if (!$.isEmptyObject( settings.audioFiles))
82   - {
83   - var audio = $('<audio>').attr(settings.audioAttr);
84   - $.each(settings.audioFiles, function (i, file) {
85   - $('<source>').attr('src', file).appendTo(audio)
86   - });
87   - audio.appendTo(pinkify);
88   - }
89   -
90   - // IN SECONDS!
91   - var delay = $this.outerWidth() / settings.imageWidth * settings.animation.duration;
92   - div = $('<div/>').css({
93   - 'width': '100%',
94   - 'height': settings.imageHeight+'px',
95   - 'position': 'absolute',
96   - 'bottom': '0px',
97   - 'background': 'url("'+settings.imageUrl+'") repeat-x',
98   - })[0];
99   - div.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
100   - pinkify.append(div);
101   -
102   - var keyframes1 = '@' + keyframeprefix + 'keyframes pinkify-'+element_unique_id+' { '+
103   - 'from{background-position: '+(settings.animation.direction === 'right' ? '-' : '')+settings.imageWidth+'px; } '+
104   - 'to{background-position: 0; }'+
105   - '}',
106   - keyframes2 = '@' + keyframeprefix + 'keyframes pinkify-entrance-'+element_unique_id+' { '+
107   - 'from{'+(settings.animation.direction === 'right' ? 'right' : 'left')+': 100%; width:0} to{'+(settings.animation.direction === 'right' ? 'right' : 'left')+': 0%;}'+
108   - '}';
109   -
110   - var s;
111   - if( document.styleSheets && document.styleSheets.length ) {
112   -
113   - document.styleSheets[0].insertRule( keyframes1, 0 );
114   - document.styleSheets[0].insertRule( keyframes2, 0 );
115   -
116   - } else {
117   -
118   - var s = document.createElement( 'style' );
119   - s.innerHTML = keyframes1 + keyframes2;
120   - document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
121   -
122   - }
123   -
124   - $this.append(pinkify).data('pinkify', {
125   - target : $this,
126   - pinkify : pinkify,
127   - style: s
128   - }).bind('click.pinkify',settings.click);
129   -
130   - }
131   - });
132   - },
133   - destroy : function( ) {
134   -
135   - return this.each(function(){
136   -
137   - var $this = $(this),
138   - data = $this.data('pinkify');
139   -
140   - $this.unbind('click.pinkify');
141   - data.pinkify.remove();
142   - $this.removeData('pinkify');
143   -
144   - })
145   -
146   - },
147   - };
148   -
149   - if ( animation === false ) {
150   - $.fn.pinkify = function( options ) {
151   - $.error( 'Pinkify plugin is not yet available for browsers that do not support native CSS animations');
152   -
153   - // Don't do anything, 'cause this is a first version anyway
154   - return this;
155   - };
156   - } else {
157   - $.fn.pinkify = function( method ) {
158   -
159   - if ( methods[method] ) {
160   - return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
161   - } else if ( typeof method === 'object' || ! method ) {
162   - return methods.init.apply( this, arguments );
163   - } else {
164   - $.error( 'Method ' + method + ' does not exist on jQuery.pinkify' );
165   - }
166   - }
167   -
168   - };
169   -})( jQuery );
  13 +<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  14 +<script src="jQuery.pinkify.js"></script>
  15 +<script>
170 16 jQuery(document).ready(function(){
171 17 jQuery('body').pinkify({
172 18 'imageUrl':'http://www.gifmania.co.uk/Star-Wars/Atat/at-at.gif',
@@ -177,7 +23,7 @@
177 23 }
178 24 });
179 25 });
180   - </script>
  26 +</script>
181 27 </head>
182 28 <body>
183 29 <p>oh the horror</p>

0 comments on commit 7cd0258

Please sign in to comment.
Something went wrong with that request. Please try again.