Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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 with 71 additions and 162 deletions.
  1. +63 −1 README.md
  2. +4 −3 jQuery.pinkify.js
  3. +4 −158 pinkify.html
64 README.md
View
@@ -1,4 +1,66 @@
Pinkify
=======
-A jQuery plugin to add simple animations with sound on any event.
+![Oh, Pinkie](http://images3.wikia.nocookie.net/__cb20110930130423/halo/images/f/f6/Pinkie_Pie_4th_Wall.png)
+
+A jQuery plugin to add simple animations with sound on any event.
+
+Getting started
+---------------
+You need to have an image you want to use, and know its dimensions:
+
+ $('body').pinkify({
+ 'imageUrl' : 'http://railslove.com/assets/pinkie_parasprite_polka_by_fluttershylover.gif',
+ 'imageWidth' : 106,
+ 'imageHeight' : 126,
+ });
+
+Firing on events
+----------------
+
+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:
+
+ $('a').bind('click', function(){
+ $(this).pinkify({
+ // your options passed on
+ });
+ });
+
+All available options
+---------------------
+
+ $(element).pinkify( {
+ 'animation' : {
+ 'direction' : 'left', // for now it onl;y responds to 'left' and 'right'
+ 'duration' : 0.2 // duration in seconds in which one image is moving
+ },
+ 'imageUrl' : 'pinkie_parasprite_polka_by_fluttershylover.gif',
+ 'imageWidth' : 106,
+ 'imageHeight' : 126,
+ 'audioAttr' : {
+ /* attributes for audio tag */
+ // 'autoplay' : 'autoplay',
+ // 'loop' : 'true'
+ },
+ 'aAttr' : {
+ 'href' : 'http://www.youtube.com/watch?v=6UXGEbaP5Ug&list=PL7BFEA256F3B8B0DF&index=5',
+ 'target' : '_blank'
+ },
+ 'audioFiles' : [
+ /* links to audio files used as source */
+ // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.ogg',
+ // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.mp3'
+ ],
+ 'click' : function () {
+ $(this).pinkify('destroy');
+ }
+ });
+
+License
+-------
+ ----------------------------------------------------------------------------
+ "THE BEER-WARE LICENSE":
+ Mike Połtyn wrote this sotware. As long as you retain this notice you
+ can do whatever you want with this stuff. If we meet some day, and you think
+ this stuff is worth it, you can buy me a beer in return
+ ----------------------------------------------------------------------------
7 jQuery.pinkify.js
View
@@ -75,15 +75,16 @@
// IN SECONDS!
var delay = $this.outerWidth() / settings.imageWidth * settings.animation.duration;
- div = $('<div/>').css({
+ span = $('<span/>').css({
'width': '100%',
'height': settings.imageHeight+'px',
'position': 'absolute',
'bottom': '0px',
+ 'display': 'block',
'background': 'url("'+settings.imageUrl+'") repeat-x',
})[0];
- div.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
- pinkify.append(div);
+ span.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
+ pinkify.append(span);
var keyframes1 = '@' + keyframeprefix + 'keyframes pinkify-'+element_unique_id+' { '+
'from{background-position: '+(settings.animation.direction === 'right' ? '-' : '')+settings.imageWidth+'px; } '+
162 pinkify.html
View
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html>
<head>
-<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>AT-AT-ify</title>
<!--[if IE]>
@@ -11,162 +10,9 @@
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
- <script>
-(function( $ ) {
- var elm = document.createElement('div'),
- animation = false,
- keyframeprefix = '',
- domPrefixes = 'webkit Moz O ms Khtml'.split(' '),
- pfx = '';
- window.animationstring = 'animation';
- if( elm.style.animationName ) { animation = true; }
-
- if( animation === false ) {
- for( var i = 0; i < domPrefixes.length; i++ ) {
- if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
- pfx = domPrefixes[ i ];
- window.animationstring = pfx + 'Animation';
- keyframeprefix = '-' + pfx.toLowerCase() + '-';
- animation = true;
- break;
- }
- }
- }
-
- var methods = {
- init : function( options ) {
- var settings = $.extend( {
- 'animation' : {
- 'direction' : 'left',
- 'duration' : 0.2
- },
- 'imageUrl' : 'pinkie_parasprite_polka_by_fluttershylover.gif',
- 'imageWidth' : 106,
- 'imageHeight' : 126,
- 'audioAttr' : {
- // 'autoplay' : 'autoplay',
- // 'loop' : 'true'
- },
- 'aAttr' : {
- 'href' : 'http://www.youtube.com/watch?v=6UXGEbaP5Ug&list=PL7BFEA256F3B8B0DF&index=5',
- 'target' : '_blank'
- },
- 'audioFiles' : [
- // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.ogg',
- // 'http://dl.dropbox.com/u/23165202/Pinkies%20Parasprite%20Polka%20%5BKeep-Mp3.com%5D.mp3'
- ],
- 'click' : function () {
- $(this).pinkify('destroy');
- }
- }, options);
-
-
- return this.each(function(){
-
- var $this = $(this),
- data = $this.data('pinkify');
-
- // If the plugin hasn't been initialized yet
- if ( ! data ) {
-
- var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz",
- string_length = 8,
- element_unique_id = '',
- pinkify = $('<a class="pinkify"/>').attr(settings.aAttr);
- for (var i=0; i<string_length; i++) {
- var rnum = Math.floor(Math.random() * chars.length);
- element_unique_id += chars.substring(rnum,rnum+1);
- };
-
- if (!$.isEmptyObject( settings.audioFiles))
- {
- var audio = $('<audio>').attr(settings.audioAttr);
- $.each(settings.audioFiles, function (i, file) {
- $('<source>').attr('src', file).appendTo(audio)
- });
- audio.appendTo(pinkify);
- }
-
- // IN SECONDS!
- var delay = $this.outerWidth() / settings.imageWidth * settings.animation.duration;
- div = $('<div/>').css({
- 'width': '100%',
- 'height': settings.imageHeight+'px',
- 'position': 'absolute',
- 'bottom': '0px',
- 'background': 'url("'+settings.imageUrl+'") repeat-x',
- })[0];
- div.style[window.animationstring] = 'pinkify-entrance-'+element_unique_id+' '+delay+'s linear, pinkify-'+element_unique_id+' '+settings.animation.duration+'s linear infinite '+delay+'s';
- pinkify.append(div);
-
- var keyframes1 = '@' + keyframeprefix + 'keyframes pinkify-'+element_unique_id+' { '+
- 'from{background-position: '+(settings.animation.direction === 'right' ? '-' : '')+settings.imageWidth+'px; } '+
- 'to{background-position: 0; }'+
- '}',
- keyframes2 = '@' + keyframeprefix + 'keyframes pinkify-entrance-'+element_unique_id+' { '+
- 'from{'+(settings.animation.direction === 'right' ? 'right' : 'left')+': 100%; width:0} to{'+(settings.animation.direction === 'right' ? 'right' : 'left')+': 0%;}'+
- '}';
-
- var s;
- if( document.styleSheets && document.styleSheets.length ) {
-
- document.styleSheets[0].insertRule( keyframes1, 0 );
- document.styleSheets[0].insertRule( keyframes2, 0 );
-
- } else {
-
- var s = document.createElement( 'style' );
- s.innerHTML = keyframes1 + keyframes2;
- document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
- }
-
- $this.append(pinkify).data('pinkify', {
- target : $this,
- pinkify : pinkify,
- style: s
- }).bind('click.pinkify',settings.click);
-
- }
- });
- },
- destroy : function( ) {
-
- return this.each(function(){
-
- var $this = $(this),
- data = $this.data('pinkify');
-
- $this.unbind('click.pinkify');
- data.pinkify.remove();
- $this.removeData('pinkify');
-
- })
-
- },
- };
-
- if ( animation === false ) {
- $.fn.pinkify = function( options ) {
- $.error( 'Pinkify plugin is not yet available for browsers that do not support native CSS animations');
-
- // Don't do anything, 'cause this is a first version anyway
- return this;
- };
- } else {
- $.fn.pinkify = function( method ) {
-
- if ( methods[method] ) {
- return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.pinkify' );
- }
- }
-
- };
-})( jQuery );
+<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+<script src="jQuery.pinkify.js"></script>
+<script>
jQuery(document).ready(function(){
jQuery('body').pinkify({
'imageUrl':'http://www.gifmania.co.uk/Star-Wars/Atat/at-at.gif',
@@ -177,7 +23,7 @@
}
});
});
- </script>
+</script>
</head>
<body>
<p>oh the horror</p>
Please sign in to comment.
Something went wrong with that request. Please try again.