Snow Effect

Add a snow effect to any website

  1. // ==UserScript==
  2. // @name Snow Effect
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Add a snow effect to any website
  6. // @author Masahiro Abe (modified for Tampermonkey by OpenAI Assistant)
  7. // @match *://drrrkari.com/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // スタイルを挿入
  15. const style = document.createElement('style');
  16. style.textContent = `
  17. .snow {
  18. position: absolute;
  19. background-color: white;
  20. border-radius: 50%;
  21. z-index: 9999;
  22. }
  23. `;
  24. document.head.appendChild(style);
  25.  
  26. // ATSnow クラス定義
  27. var ATSnow = function(vars) {
  28. var _self = this;
  29. var _snows = [];
  30. var _scrollHeight = 0;
  31. var _windowWidth = 0;
  32. var _windowHeight = 0;
  33. var _doc = document;
  34.  
  35. var options = {
  36. classname: 'snow',
  37. count: 100,
  38. interval: 40,
  39. maxSize: 5,
  40. minSize: 1,
  41. leftMargin: 50,
  42. rightMargin: 50,
  43. bottomMargin: 30,
  44. maxDistance: 10,
  45. minDistance: 1
  46. };
  47.  
  48. this.config = function(property) {
  49. for (var i in property) {
  50. if (!vars.hasOwnProperty(i)) {
  51. continue;
  52. }
  53. options[i] = property[i];
  54. }
  55. };
  56.  
  57. this.addEvent = function(eventTarget, eventName, func) {
  58. if (eventTarget.addEventListener) {
  59. eventTarget.addEventListener(eventName, func, false);
  60. } else if (window.attachEvent) {
  61. eventTarget.attachEvent('on' + eventName, function() { func.apply(eventTarget); });
  62. }
  63. };
  64.  
  65. this.getScrollHeight = function() {
  66. if (_doc.documentElement.scrollHeight) {
  67. return _doc.documentElement.scrollHeight;
  68. } else {
  69. return _doc.body.scrollHeight;
  70. }
  71. };
  72.  
  73. this.getRandomInt = function(min, max) {
  74. return Math.floor(Math.random() * (max - min + 1)) + min;
  75. };
  76.  
  77. this.getWindowWidth = function() {
  78. return window.innerWidth || _doc.documentElement.clientWidth || _doc.body.clientWidth;
  79. };
  80.  
  81. this.getWindowHeight = function() {
  82. return window.innerHeight || _doc.documentElement.clientHeight || _doc.body.clientHeight;
  83. };
  84.  
  85. this.createSnow = function() {
  86. var body = _doc.body;
  87.  
  88. for (var i = 0; i < options.count; i++) {
  89. var snow = _doc.createElement('div');
  90. snow.className = options.classname;
  91. var diameter = _self.getRandomInt(options.minSize, options.maxSize);
  92. snow.style.width = diameter + 'px';
  93. snow.style.height = diameter + 'px';
  94.  
  95. _snows[i] = {};
  96. var snows = _snows[i];
  97. snows.ele = snow;
  98. snows.distance = _self.getRandomInt(options.minDistance, options.maxDistance);
  99. snows.degree = _self.getRandomInt(1, 10);
  100. snows.move = 0;
  101. snows.size = diameter;
  102.  
  103. body.appendChild(snow);
  104. }
  105. };
  106.  
  107. this.snowsPositionReset = function() {
  108. for (var i = 0; i < options.count; i++) {
  109. var topPosition = Math.floor(Math.random() * _scrollHeight);
  110. _self.snowPositionReset(_snows[i], topPosition - _scrollHeight);
  111. }
  112. };
  113.  
  114. this.snowPositionReset = function(snow, y) {
  115. var leftPosition = _self.getRandomInt(options.leftMargin, _windowWidth - options.rightMargin);
  116. snow.ele.style.top = y + 'px';
  117. snow.ele.style.left = leftPosition + 'px';
  118. snow.x = leftPosition;
  119. };
  120.  
  121. this.move = function() {
  122. var fall = function() {
  123. for (var i = 0; i < options.count; i++) {
  124. var snow = _snows[i];
  125. var top = parseInt(snow.ele.style.top) || 0;
  126. snow.move += snow.degree;
  127.  
  128. if (top + snow.size >= _scrollHeight - options.bottomMargin) {
  129. _self.snowPositionReset(snow, 0);
  130. } else {
  131. snow.ele.style.top = top + snow.size + 'px';
  132. snow.ele.style.left = snow.x + Math.cos(snow.move * Math.PI / 180) * snow.distance + 'px';
  133. }
  134. }
  135. setTimeout(function() { fall(); }, options.interval);
  136. };
  137. fall();
  138. };
  139.  
  140. this.load = function() {
  141. _self.config(vars);
  142.  
  143. _self.addEvent(window, 'load', function() {
  144. _scrollHeight = _self.getScrollHeight();
  145. _windowWidth = _self.getWindowWidth();
  146. _windowHeight = _self.getWindowHeight();
  147. _self.createSnow();
  148. _self.snowsPositionReset();
  149. _self.move();
  150. });
  151.  
  152. _self.addEvent(window, 'resize', function() {
  153. _scrollHeight = _self.getScrollHeight();
  154. _windowWidth = _self.getWindowWidth();
  155. _windowHeight = _self.getWindowHeight();
  156. _self.snowsPositionReset();
  157. });
  158. };
  159. };
  160.  
  161. // 雪エフェクトを起動
  162. var snowEffect = new ATSnow({
  163. count: 150, // 雪の数を変更可能
  164. maxSize: 8, // 雪の最大サイズ
  165. minSize: 2 // 雪の最小サイズ
  166. });
  167. snowEffect.load();
  168. })();