API tools faq
paste
Advertisement
ukamori

falling sakura leaves

ukamori
Apr 18th, 2022
6,680
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.08 KB | None | 0 0
raw download clone embed print report
  1. <-- a tidied up version of this code from http://jsfiddle.net/aKr8D/21/ embed must be hidden head --!>
  2.  
  3.  
  4. <head>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  6. </head>
  7.  
  8. <style>
  9. @-webkit-keyframes fall {
  10. 0% {
  11. opacity: 0.9;
  12. top: 0
  13. }
  14.  
  15. 100% {
  16. opacity: 0.2;
  17. top: 100%
  18. }
  19. }
  20.  
  21. @keyframes fall {
  22. 0% {
  23. opacity: 0.9;
  24. top: 0
  25. }
  26.  
  27. 100% {
  28. opacity: 0.2;
  29. top: 100%
  30. }
  31. }
  32.  
  33. @-webkit-keyframes blow-soft-left {
  34. 0% {
  35. margin-left: 0
  36. }
  37.  
  38. 100% {
  39. margin-left: -50%
  40. }
  41. }
  42.  
  43. @keyframes blow-soft-left {
  44. 0% {
  45. margin-left: 0
  46. }
  47.  
  48. 100% {
  49. margin-left: -50%
  50. }
  51. }
  52.  
  53. @-webkit-keyframes blow-medium-left {
  54. 0% {
  55. margin-left: 0
  56. }
  57.  
  58. 100% {
  59. margin-left: -100%
  60. }
  61. }
  62.  
  63. @keyframes blow-medium-left {
  64. 0% {
  65. margin-left: 0
  66. }
  67.  
  68. 100% {
  69. margin-left: -100%
  70. }
  71. }
  72.  
  73. @-webkit-keyframes blow-soft-right {
  74. 0% {
  75. margin-left: 0
  76. }
  77.  
  78. 100% {
  79. margin-left: 50%
  80. }
  81. }
  82.  
  83. @keyframes blow-soft-right {
  84. 0% {
  85. margin-left: 0
  86. }
  87.  
  88. 100% {
  89. margin-left: 50%
  90. }
  91. }
  92.  
  93. @-webkit-keyframes blow-medium-right {
  94. 0% {
  95. margin-left: 0
  96. }
  97.  
  98. 100% {
  99. margin-left: 100%
  100. }
  101. }
  102.  
  103. @keyframes blow-medium-right {
  104. 0% {
  105. margin-left: 0
  106. }
  107.  
  108. 100% {
  109. margin-left: 100%
  110. }
  111. }
  112.  
  113. @-webkit-keyframes sway-0 {
  114. 0% {
  115. -webkit-transform: rotate(-5deg)
  116. }
  117.  
  118. 40% {
  119. -webkit-transform: rotate(28deg)
  120. }
  121.  
  122. 100% {
  123. -webkit-transform: rotate(3deg)
  124. }
  125. }
  126.  
  127. @keyframes sway-0 {
  128. 0% {
  129. -ms-transform: rotate(-5deg);
  130. transform: rotate(-5deg)
  131. }
  132.  
  133. 40% {
  134. -ms-transform: rotate(28deg);
  135. transform: rotate(28deg)
  136. }
  137.  
  138. 100% {
  139. -ms-transform: rotate(3deg);
  140. transform: rotate(3deg)
  141. }
  142. }
  143.  
  144. @-webkit-keyframes sway-1 {
  145. 0% {
  146. -webkit-transform: rotate(10deg)
  147. }
  148.  
  149. 40% {
  150. -webkit-transform: rotate(43deg)
  151. }
  152.  
  153. 100% {
  154. -webkit-transform: rotate(15deg)
  155. }
  156. }
  157.  
  158. @keyframes sway-1 {
  159. 0% {
  160. -ms-transform: rotate(10deg);
  161. transform: rotate(10deg)
  162. }
  163.  
  164. 40% {
  165. -ms-transform: rotate(43deg);
  166. transform: rotate(43deg)
  167. }
  168.  
  169. 100% {
  170. -ms-transform: rotate(15deg);
  171. transform: rotate(15deg)
  172. }
  173. }
  174.  
  175. @-webkit-keyframes sway-2 {
  176. 0% {
  177. -webkit-transform: rotate(15deg)
  178. }
  179.  
  180. 40% {
  181. -webkit-transform: rotate(56deg)
  182. }
  183.  
  184. 100% {
  185. -webkit-transform: rotate(22deg)
  186. }
  187. }
  188.  
  189. @keyframes sway-2 {
  190. 0% {
  191. -ms-transform: rotate(15deg);
  192. transform: rotate(15deg)
  193. }
  194.  
  195. 40% {
  196. -ms-transform: rotate(56deg);
  197. transform: rotate(56deg)
  198. }
  199.  
  200. 100% {
  201. -ms-transform: rotate(22deg);
  202. transform: rotate(22deg)
  203. }
  204. }
  205.  
  206. @-webkit-keyframes sway-3 {
  207. 0% {
  208. -webkit-transform: rotate(25deg)
  209. }
  210.  
  211. 40% {
  212. -webkit-transform: rotate(74deg)
  213. }
  214.  
  215. 100% {
  216. -webkit-transform: rotate(37deg)
  217. }
  218. }
  219.  
  220. @keyframes sway-3 {
  221. 0% {
  222. -ms-transform: rotate(25deg);
  223. transform: rotate(25deg)
  224. }
  225.  
  226. 40% {
  227. -ms-transform: rotate(74deg);
  228. transform: rotate(74deg)
  229. }
  230.  
  231. 100% {
  232. -ms-transform: rotate(37deg);
  233. transform: rotate(37deg)
  234. }
  235. }
  236.  
  237. @-webkit-keyframes sway-4 {
  238. 0% {
  239. -webkit-transform: rotate(40deg)
  240. }
  241.  
  242. 40% {
  243. -webkit-transform: rotate(68deg)
  244. }
  245.  
  246. 100% {
  247. -webkit-transform: rotate(25deg)
  248. }
  249. }
  250.  
  251. @keyframes sway-4 {
  252. 0% {
  253. -ms-transform: rotate(40deg);
  254. transform: rotate(40deg)
  255. }
  256.  
  257. 40% {
  258. -ms-transform: rotate(68deg);
  259. transform: rotate(68deg)
  260. }
  261.  
  262. 100% {
  263. -ms-transform: rotate(25deg);
  264. transform: rotate(25deg)
  265. }
  266. }
  267.  
  268. @-webkit-keyframes sway-5 {
  269. 0% {
  270. -webkit-transform: rotate(50deg)
  271. }
  272.  
  273. 40% {
  274. -webkit-transform: rotate(78deg)
  275. }
  276.  
  277. 100% {
  278. -webkit-transform: rotate(40deg)
  279. }
  280. }
  281.  
  282. @keyframes sway-5 {
  283. 0% {
  284. -ms-transform: rotate(50deg);
  285. transform: rotate(50deg)
  286. }
  287.  
  288. 40% {
  289. -ms-transform: rotate(78deg);
  290. transform: rotate(78deg)
  291. }
  292.  
  293. 100% {
  294. -ms-transform: rotate(40deg);
  295. transform: rotate(40deg)
  296. }
  297. }
  298.  
  299. @-webkit-keyframes sway-6 {
  300. 0% {
  301. -webkit-transform: rotate(65deg)
  302. }
  303.  
  304. 40% {
  305. -webkit-transform: rotate(92deg)
  306. }
  307.  
  308. 100% {
  309. -webkit-transform: rotate(58deg)
  310. }
  311. }
  312.  
  313. @keyframes sway-6 {
  314. 0% {
  315. -ms-transform: rotate(65deg);
  316. transform: rotate(65deg)
  317. }
  318.  
  319. 40% {
  320. -ms-transform: rotate(92deg);
  321. transform: rotate(92deg)
  322. }
  323.  
  324. 100% {
  325. -ms-transform: rotate(58deg);
  326. transform: rotate(58deg)
  327. }
  328. }
  329.  
  330. @-webkit-keyframes sway-7 {
  331. 0% {
  332. -webkit-transform: rotate(72deg)
  333. }
  334.  
  335. 40% {
  336. -webkit-transform: rotate(118deg)
  337. }
  338.  
  339. 100% {
  340. -webkit-transform: rotate(68deg)
  341. }
  342. }
  343.  
  344. @keyframes sway-7 {
  345. 0% {
  346. -ms-transform: rotate(72deg);
  347. transform: rotate(72deg)
  348. }
  349.  
  350. 40% {
  351. -ms-transform: rotate(118deg);
  352. transform: rotate(118deg)
  353. }
  354.  
  355. 100% {
  356. -ms-transform: rotate(68deg);
  357. transform: rotate(68deg)
  358. }
  359. }
  360.  
  361. @-webkit-keyframes sway-8 {
  362. 0% {
  363. -webkit-transform: rotate(94deg)
  364. }
  365.  
  366. 40% {
  367. -webkit-transform: rotate(136deg)
  368. }
  369.  
  370. 100% {
  371. -webkit-transform: rotate(82deg)
  372. }
  373. }
  374.  
  375. @keyframes sway-8 {
  376. 0% {
  377. -ms-transform: rotate(94deg);
  378. transform: rotate(94deg)
  379. }
  380.  
  381. 40% {
  382. -ms-transform: rotate(136deg);
  383. transform: rotate(136deg)
  384. }
  385.  
  386. 100% {
  387. -ms-transform: rotate(82deg);
  388. transform: rotate(82deg)
  389. }
  390. }
  391.  
  392. .sakura {
  393. background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
  394. background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
  395. pointer-events: none;
  396. position: absolute
  397. }
  398.  
  399. </style>
  400.  
  401. <script type="text/javascript">
  402. // Plugin code
  403. (function($) {
  404. /** Polyfills and prerequisites **/
  405.  
  406. // requestAnimationFrame Polyfill
  407. var lastTime = 0;
  408. var vendors = ['webkit', 'o', 'ms', 'moz', ''];
  409. var vendorCount = vendors.length;
  410.  
  411. for (var x = 0; x < vendorCount && !window.requestAnimationFrame; ++x) {
  412. window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  413. window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  414. }
  415.  
  416. if (!window.requestAnimationFrame) {
  417. window.requestAnimationFrame = function(callback) {
  418. var currTime = new Date().getTime();
  419. var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  420.  
  421. var id = window.setTimeout(function() {
  422. callback(currTime + timeToCall);
  423. }, timeToCall);
  424. lastTime = currTime + timeToCall;
  425.  
  426. return id;
  427. };
  428. }
  429.  
  430. if (!window.cancelAnimationFrame) {
  431. window.cancelAnimationFrame = function(id) {
  432. clearTimeout(id);
  433. };
  434. }
  435.  
  436. // Prefixed event check
  437. $.fn.prefixedEvent = function(type, callback) {
  438. for (var x = 0; x < vendorCount; ++x) {
  439. if (!vendors[x]) {
  440. type = type.toLowerCase();
  441. }
  442.  
  443. el = (this instanceof jQuery ? this[0] : this);
  444. el.addEventListener(vendors[x] + type, callback, false);
  445. }
  446.  
  447. return this;
  448. };
  449.  
  450. // Test if element is in viewport
  451. function elementInViewport(el) {
  452.  
  453. if (el instanceof jQuery) {
  454. el = el[0];
  455. }
  456.  
  457. var rect = el.getBoundingClientRect();
  458.  
  459. return (
  460. rect.top >= 0 &&
  461. rect.left >= 0 &&
  462. rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  463. rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  464. );
  465. }
  466.  
  467. // Random array element
  468. function randomArrayElem(arr) {
  469. return arr[Math.floor(Math.random() * arr.length)];
  470. }
  471.  
  472. // Random integer
  473. function randomInt(min, max) {
  474. return Math.floor(Math.random() * (max - min + 1)) + min;
  475. }
  476.  
  477. /** Actual plugin code **/
  478. $.fn.sakura = function(event, options) {
  479.  
  480. // Target element
  481. var target = this.selector == "" ? $('body') : this;
  482.  
  483. // Defaults for the option object, which gets extended below
  484. var defaults = {
  485. blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-soft-right', 'blow-medium-right'],
  486. className: 'sakura',
  487. fallSpeed: 1,
  488. maxSize: 14,
  489. minSize: 10,
  490. newOn: 300,
  491. swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
  492. };
  493.  
  494. var options = $.extend({}, defaults, options);
  495.  
  496. // Default or start event
  497. if (typeof event === 'undefined' || event === 'start') {
  498.  
  499. // Set the overflow-x CSS property on the target element to prevent horizontal scrollbars
  500. target.css({
  501. 'overflow-x': 'hidden'
  502. });
  503.  
  504. // Function that inserts new petals into the document
  505. var petalCreator = function() {
  506. if (target.data('sakura-anim-id')) {
  507. setTimeout(function() {
  508. requestAnimationFrame(petalCreator);
  509. }, options.newOn);
  510. }
  511.  
  512. // Get one random animation of each type and randomize fall time of the petals
  513. var blowAnimation = randomArrayElem(options.blowAnimations);
  514. var swayAnimation = randomArrayElem(options.swayAnimations);
  515. var fallTime = ((document.documentElement.clientHeight * 0.007) + Math.round(Math.random() * 5)) * options.fallSpeed;
  516.  
  517. // Build animation
  518. var animations =
  519. 'fall ' + fallTime + 's linear 0s 1' + ', ' +
  520. blowAnimation + ' ' + (((fallTime > 30 ? fallTime : 30) - 20) + randomInt(0, 20)) + 's linear 0s infinite' + ', ' +
  521. swayAnimation + ' ' + randomInt(2, 4) + 's linear 0s infinite';
  522.  
  523. // Create petal and randomize size
  524. var petal = $('<div class="' + options.className + '" />');
  525. var height = randomInt(options.minSize, options.maxSize);
  526. var width = height - Math.floor(randomInt(0, options.minSize) / 3);
  527.  
  528. // Apply Event Listener to remove petals that reach the bottom of the page
  529. petal.prefixedEvent('AnimationEnd', function() {
  530. if (!elementInViewport(this)) {
  531. $(this).remove();
  532. }
  533. })
  534. // Apply Event Listener to remove petals that finish their horizontal float animation
  535. .prefixedEvent('AnimationIteration', function(ev) {
  536. if (
  537. (
  538. $.inArray(ev.animationName, options.blowAnimations) != -1 ||
  539. $.inArray(ev.animationName, options.swayAnimations) != -1
  540. ) &&
  541. !elementInViewport(this)
  542. ) {
  543. $(this).remove();
  544. }
  545. })
  546. .css({
  547. '-webkit-animation': animations,
  548. animation: animations,
  549. 'border-radius': randomInt(options.maxSize, (options.maxSize + Math.floor(Math.random() * 10))) + 'px ' + randomInt(1, Math.floor(width / 4)) + 'px',
  550. height: height + 'px',
  551. left: (Math.random() * document.documentElement.clientWidth - 100) + 'px',
  552. 'margin-top': (-(Math.floor(Math.random() * 20) + 15)) + 'px',
  553. width: width + 'px'
  554. });
  555.  
  556. target.append(petal);
  557. };
  558.  
  559. // Finally: Start adding petals
  560. target.data('sakura-anim-id', requestAnimationFrame(petalCreator));
  561.  
  562. }
  563. // Stop event, which stops the animation loop and removes all current blossoms
  564. else if (event === 'stop') {
  565.  
  566. // Cancel animation
  567. var animId = target.data('sakura-anim-id');
  568.  
  569. if (animId) {
  570. cancelAnimationFrame(animId);
  571. target.data('sakura-anim-id', null);
  572. }
  573.  
  574. // Remove all current blossoms
  575. setTimeout(function() {
  576. $('.' + options.className).remove();
  577. }, (options.newOn + 50));
  578.  
  579. }
  580. };
  581. }(jQuery));
  582.  
  583. $(document).ready(function() {
  584. $('body').sakura();
  585. });
  586.  
  587. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!