Created
March 29, 2012 06:33
-
-
Save hussienliban/2234163 to your computer and use it in GitHub Desktop.
Revisions
-
hussienliban revised this gist
Mar 29, 2012 . 3 changed files with 120 additions and 0 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } body{ background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF; } .point{ display: inline-block; background: #23A8EF; width: 150px; height: 100px; border-radius: 8px; margin: 100px 0px 0 40px; box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px rgba(0,0,0,0.2); position: relative; color: white; font: normal 18px/90px verdana; text-align: center; -moz-transition: background 0.2s linear; } .activated{ -moz-animation: delete 0.4s infinite; box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.3); background: #26B4FF; } .delete{ opacity: 0;-moz-transition: all 0.1s linear; position: absolute; display: inline-block; right: 5px; top: 5px; font: bold 36px/11px 'Entypo'; color: #eee; text-shadow: 0 0.5px 0 #FF1C1C; text-decoration: none; background: #FF1C1C; border-radius: 50px; height: 20px; width: 20px; text-align: center; box-shadow: 0 1px 0 #FFCBCB; text-shadow: 0 1px 0 #666; } .activated .delete{opacity: 1;} @-moz-keyframes delete { 0%{-moz-transform: rotate(0deg)} 33%{ -moz-transform: rotate(-3deg)} 66%{-moz-transform: rotate(3deg) scale(1.01) } 99.99%{-moz-transform: rotate(0deg)} } 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,19 @@ <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>iso delete animation</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </body> </html> 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,50 @@ (function( window,$,undefined ){ var config = { _active : false, _activate: function() { this._clear(); var self = this; this._timeoutID = window.setTimeout(function(msg) { if(!self._active){$('.point').addClass('activated'); self._active = true;}}, 1800); console.log('done'); }, _clear: function() { if(typeof this._timeoutID == "number") { window.clearTimeout(this._timeoutID); delete this._timeoutID; } }, _deactivate: function() { if(this._active){ this._active = false; $('.point').removeClass('activated'); } } }; $('.point').hover( function(e) { var $self = $(this); if(!config._active) { config._activate(); } },function(){ config._clear(); }); $('body').on('click', function(e){ config._deactivate(); }); $('.point').find('a').on('click', function(e){ e.stopPropagation(); e.preventDefault(); console.log($(this).parent()); }); })(window, jQuery); -
Mar 29, 2012 . 3 changed files with 99 additions and 0 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } body{ background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF; } .point{ display: inline-block; background: #23A8EF; width: 150px; height: 100px; border-radius: 8px; margin: 100px 0px 0 40px; box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px rgba(0,0,0,0.2); position: relative; color: white; font: normal 18px/90px verdana; text-align: center; -moz-transition: background 0.2s linear; } .activated{ -moz-animation: delete 0.4s infinite; box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.3); background: #26B4FF; } .delete{ opacity: 0;-moz-transition: all 0.1s linear; position: absolute; display: inline-block; right: 5px; top: 5px; font: bold 36px/11px 'Entypo'; color: #eee; text-shadow: 0 0.5px 0 #FF1C1C; text-decoration: none; background: #FF1C1C; border-radius: 50px; height: 20px; width: 20px; text-align: center; box-shadow: 0 1px 0 #FFCBCB; text-shadow: 0 1px 0 #666; } .activated .delete{opacity: 1;} @-moz-keyframes delete { 0%{-moz-transform: rotate(0deg)} 33%{ -moz-transform: rotate(-3deg)} 66%{-moz-transform: rotate(3deg) scale(1.01) } 99.99%{-moz-transform: rotate(0deg)} } File renamed without changes.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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,48 @@ (function( window,$,undefined ){ var config = { _active : false, _activate: function() { this._clear(); var self = this; this._timeoutID = window.setTimeout(function(msg) { if(!self._active){$('.point').addClass('activated'); self._active = true;}}, 1800); console.log('done'); }, _clear: function() { if(typeof this._timeoutID == "number") { window.clearTimeout(this._timeoutID); delete this._timeoutID; } }, _deactivate: function() { if(this._active){ this._active = false; $('.point').removeClass('activated'); } } }; $('.point').on('hover', function(e) { var $self = $(this); if(!config._active) { config._activate(); } }); $('body').on('click', function(e){ config._deactivate(); }); $('.point').find('a').on('click', function(e){ e.stopPropagation(); e.preventDefault(); console.log($(this).parent()); }); })(window, jQuery); -
Mar 29, 2012 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,19 @@ <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>iso delete animation</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </body> </html>