☰

Fade In and Out

Adds fade out effect when the page is unloaded

  1. /* This program is free software. It comes without any warranty, to
  2.  * the extent permitted by applicable law. You can redistribute it
  3.  * and/or modify it under the terms of the Do What The Fuck You Want
  4.  * To Public License, Version 2, as published by Sam Hocevar. See
  5.  * http://www.wtfpl.net/ for more details. */
  6.  
  7. // ==UserScript==
  8. // @name            Fade In and Out
  9. // @namespace       http://userscripts.org/users/12
  10. // @description     Adds fade out effect when the page is unloaded
  11. // @version         3.0
  12. // @author          LouCypher
  13. // @license         WTFPL http://www.wtfpl.net/
  14. // @homepageURL     https://userscripts.org/scripts/show/135732
  15. // @resource        license https://raw.github.com/LouCypher/userscripts/master/licenses/WTFPL/LICENSE.txt
  16. // @include         *
  17. // @run-at          document-start
  18. // @grant           GM_addStyle
  19. // ==/UserScript==
  20.  
  21. GM_addStyle("@-moz-keyframes fadein {\
  22.   from { opacity: 0; }\
  23.   to   { opacity: 1; }\
  24. }\
  25. @-webkit-keyframes fadein {\
  26.   from { opacity: 0; }\
  27.   to   { opacity: 1; }\
  28. }\
  29. @keyframes fadein {\
  30.   from { opacity: 0; }\
  31.   to   { opacity: 1; }\
  32. }\
  33. html {\
  34.      -moz-animation: fadein ease-in 1000ms;\
  35.   -webkit-animation: fadein ease-in 1000ms;\
  36.           animation: fadein ease-in 1000ms;\
  37. }")
  38.  
  39. addEventListener("beforeunload", function() {
  40.   GM_addStyle("@-moz-keyframes fadeout {\
  41.   from { opacity: 1; }\
  42.   to   { opacity: 0; }\
  43. }\
  44. @-webkit-keyframes fadeout {\
  45.   from { opacity: 1; }\
  46.   to   { opacity: 0; }\
  47. }\
  48. @keyframes fadeout {\
  49.   from { opacity: 1; }\
  50.   to   { opacity: 0; }\
  51. }\
  52. html {\
  53.      -moz-animation: fadeout ease-in-out 500ms;\
  54.   -webkit-animation: fadeout ease-in-out 500ms;\
  55.           animation: fadeout ease-in-out 500ms;\
  56.   opacity: 0;\
  57. }");
  58. }, false)