HTML5 68
Smoke Effects in CSS and JavaScript Guest on 23rd June 2020 02:15:37 AM
  1. <!DOCTYPE html>
  2. <title> smoke effects </title>
  3.   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  4. body {
  5.   -webkit-animation-duration: 10s;
  6.   animation-duration: 10s;
  7.   -webkit-animation-fill-mode: both;
  8.   animation-fill-mode: both;
  9. }
  10.  
  11. @-webkit-keyframes fadeOut {
  12.   0% {
  13.     opacity: 1;
  14.   }
  15.   100% {
  16.     opacity: 0;
  17.   }
  18. }
  19.  
  20. @keyframes fadeOut {
  21.   0% {
  22.     opacity: 1;
  23.   }
  24.   100% {
  25.     opacity: 0;
  26.   }
  27. }
  28.  
  29. .fadeOut {
  30.   -webkit-animation-name: fadeOut;
  31.   animation-name: fadeOut;
  32. }
  33.  
  34. @-webkit-keyframes masked-animation {
  35.   0% {
  36.     background-position: left bottom;
  37.   }
  38.   100% {
  39.     background-position: right bottom;
  40.   }
  41. }
  42.  
  43. #start {
  44.   position: absolute;
  45.   margin: auto;
  46.   text-align: center;
  47.   top: 50%;
  48.   margin-top: 260px;
  49.   width: 100%;
  50. }
  51.  
  52. .blink_me {
  53.   animation: blinker 3s linear infinite;
  54. }
  55.  
  56. @keyframes blinker {
  57.   50% {
  58.     opacity: 0.3;
  59.   }
  60. }
  61.  
  62. h1 {
  63.   background-image: url(http://atransformedpgh.weebly.com/uploads/2/9/8/2/29829807/443271065.jpg?1401398447);
  64.   -webkit-text-fill-color: transparent;
  65.   -webkit-background-clip: text;
  66.   -webkit-text-fill-color: transparent;
  67.   -webkit-background-clip: text;
  68.   -webkit-animation-name: masked-animation;
  69.   -webkit-animation-duration: 80s;
  70.   -webkit-animation-iteration-count: infinite;
  71.   -webkit-animation-timing-function: linear;
  72.   position: absolute;
  73.   margin: auto;
  74.   text-align: center;
  75.   top: 50%;
  76.   width: 100%;
  77.   font-size: 200px;
  78.   opacity: 0.3;
  79.   font-family: 'Open Sans', sans-serif;
  80. }
  81.  
  82. html,
  83. body {
  84.   margin: 0;
  85.   padding: 0;
  86.   background: black;
  87.   text-align: center;
  88.   color: grey
  89. }
  90.  
  91. a {
  92.   color: #fff;
  93.   text-decoration: none
  94. }
  95.  
  96. #wrap {
  97.   margin: 0 auto;
  98.   width: 100%;
  99.   position: relative
  100. }
  101.  
  102. #viewport {
  103.   position: relative;
  104.   width: 100%;
  105.   height: 600px;
  106.   overflow: hidden;
  107. }
  108.  
  109. #viewport .smoke {
  110.   position: absolute;
  111.   width: 250px;
  112.   height: 250px;
  113.   background: url('http://res.cloudinary.com/da51wkm4r/image/upload/v1461143297/title/smoke.png') no-repeat;
  114.   bottom: 150px;
  115.   margin-left: 0px
  116. }
  117.  
  118. @-webkit-keyframes masked-animation {
  119.   0% {
  120.     background-position: left bottom;
  121.   }
  122.   100% {
  123.     background-position: right bottom;
  124.   }
  125. }body {
  126.   -webkit-animation-duration: 10s;
  127.   animation-duration: 10s;
  128.   -webkit-animation-fill-mode: both;
  129.   animation-fill-mode: both;
  130. }
  131.  
  132. @-webkit-keyframes fadeOut {
  133.   0% {
  134.     opacity: 1;
  135.   }
  136.   100% {
  137.     opacity: 0;
  138.   }
  139. }
  140.  
  141. @keyframes fadeOut {
  142.   0% {
  143.     opacity: 1;
  144.   }
  145.   100% {
  146.     opacity: 0;
  147.   }
  148. }
  149.  
  150. .fadeOut {
  151.   -webkit-animation-name: fadeOut;
  152.   animation-name: fadeOut;
  153. }
  154.  
  155. @-webkit-keyframes masked-animation {
  156.   0% {
  157.     background-position: left bottom;
  158.   }
  159.   100% {
  160.     background-position: right bottom;
  161.   }
  162. }
  163.  
  164. #start {
  165.   position: absolute;
  166.   margin: auto;
  167.   text-align: center;
  168.   top: 50%;
  169.   margin-top: 260px;
  170.   width: 100%;
  171. }
  172.  
  173. .blink_me {
  174.   animation: blinker 3s linear infinite;
  175. }
  176.  
  177. @keyframes blinker {
  178.   50% {
  179.     opacity: 0.3;
  180.   }
  181. }
  182.  
  183. h1 {
  184.   background-image: url(http://atransformedpgh.weebly.com/uploads/2/9/8/2/29829807/443271065.jpg?1401398447);
  185.   -webkit-text-fill-color: transparent;
  186.   -webkit-background-clip: text;
  187.   -webkit-text-fill-color: transparent;
  188.   -webkit-background-clip: text;
  189.   -webkit-animation-name: masked-animation;
  190.   -webkit-animation-duration: 80s;
  191.   -webkit-animation-iteration-count: infinite;
  192.   -webkit-animation-timing-function: linear;
  193.   position: absolute;
  194.   margin: auto;
  195.   text-align: center;
  196.   top: 50%;
  197.   width: 100%;
  198.   font-size: 200px;
  199.   opacity: 0.3;
  200.   font-family: 'Open Sans', sans-serif;
  201. }
  202.  
  203. html,
  204. body {
  205.   margin: 0;
  206.   padding: 0;
  207.   background: black;
  208.   text-align: center;
  209.   color: grey
  210. }
  211.  
  212. a {
  213.   color: #fff;
  214.   text-decoration: none
  215. }
  216.  
  217. #wrap {
  218.   margin: 0 auto;
  219.   width: 100%;
  220.   position: relative
  221. }
  222.  
  223. #viewport {
  224.   position: relative;
  225.   width: 100%;
  226.   height: 600px;
  227.   overflow: hidden;
  228. }
  229.  
  230. #viewport .smoke {
  231.   position: absolute;
  232.   width: 250px;
  233.   height: 250px;
  234.   background: url('http://res.cloudinary.com/da51wkm4r/image/upload/v1461143297/title/smoke.png') no-repeat;
  235.   bottom: 150px;
  236.   margin-left: 0px
  237. }
  238.  
  239. @-webkit-keyframes masked-animation {
  240.   0% {
  241.     background-position: left bottom;
  242.   }
  243.   100% {
  244.     background-position: right bottom;
  245.   }
  246. }
  247. $(function() {
  248.   "use strict";
  249.   var a = 0;
  250.   $('#tv').hide();
  251.   for (; a < 25; a += 1) {
  252.    setTimeout(function b() {
  253.      var a = Math.random() * 1e3 + 5e3,
  254.        c = $("<div />", {
  255.           "class": "smoke",
  256.           css: {
  257.             left: Math.random() * 800,
  258.             backgroundSize: "contain",
  259.             width: Math.random() * 800,
  260.             height: Math.random() * 600
  261.           }
  262.         });
  263.       $(c).addClass("animated");
  264.       $(c).addClass("zoomIn");
  265.       $(c).addClass("rollOut");
  266.       $(c).appendTo("#viewport");
  267.       $.when($(c).animate({}, {
  268.           duration: a / 4,
  269.           easing: "linear",
  270.           queue: false,
  271.           complete: function() {
  272.             $(c).animate({}, {
  273.               duration: a / 3,
  274.               easing: "linear",
  275.               queue: false
  276.             })
  277.           }
  278.         }),
  279.         $(c).animate({
  280.           bottom: $("#viewport").height()
  281.         }, {
  282.           duration: a,
  283.           easing: "linear",
  284.           queue: false
  285.         })).then(
  286.         function() {
  287.           $(c).remove();
  288.           b()
  289.         })
  290.     }, Math.random() * 3e3)
  291.   }
  292.   $("body").keypress(function() {
  293.     $('body').addClass("fadeOut");
  294.     setTimeout(function() {
  295.       $('#tv').show();
  296.     }, 1000);
  297.  
  298.     console.log("Handler for .keypress() called.");
  299.   });
  300. }())
  301. var tag = document.createElement('script');
  302. tag.src = 'https://www.youtube.com/player_api';
  303. var firstScriptTag = document.getElementsByTagName('script')[0];
  304. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  305. var tv,
  306.   playerDefaults = {
  307.     autoplay: 0,
  308.     autohide: 1,
  309.     modestbranding: 0,
  310.     rel: 0,
  311.     showinfo: 0,
  312.     controls: 0,
  313.     disablekb: 1,
  314.     enablejsapi: 0,
  315.     iv_load_policy: 3
  316.   };
  317. var vid = [{
  318.     'videoId': '2b5QNj-BVhs',
  319.     'startSeconds': 515,
  320.     'endSeconds': 690,
  321.     'suggestedQuality': 'hd720'
  322.   }, {
  323.     'videoId': '9ge5PzHSS0Y',
  324.     'startSeconds': 465,
  325.     'endSeconds': 657,
  326.     'suggestedQuality': 'hd720'
  327.   }, {
  328.     'videoId': 'OWsCt7B-KWs',
  329.     'startSeconds': 0,
  330.     'endSeconds': 240,
  331.     'suggestedQuality': 'hd720'
  332.   }, {
  333.     'videoId': 'qMR-mPlyduE',
  334.     'startSeconds': 19,
  335.     'endSeconds': 241,
  336.     'suggestedQuality': 'hd720'
  337.   }],
  338.   randomvid = Math.floor(Math.random() * (vid.length - 1 + 1));
  339.  
  340. function onYouTubePlayerAPIReady() {
  341.   tv = new YT.Player('tv', {
  342.     events: {
  343.       'onReady': onPlayerReady,
  344.       'onStateChange': onPlayerStateChange
  345.     },
  346.     playerVars: playerDefaults
  347.   });
  348. }
  349.  
  350. function onPlayerReady() {
  351.   tv.loadVideoById(vid[randomvid]);
  352.   tv.mute();
  353. }
  354.  
  355. function onPlayerStateChange(e) {
  356.   if (e.data === 1) {
  357.     $('#tv').addClass('active');
  358.   } else if (e.data === 0) {
  359.     tv.seekTo(vid[randomvid].startSeconds)
  360.   }
  361. }
  362.  
  363. function vidRescale() {
  364.  
  365.   var w = $(window).width() + 200,
  366.     h = $(window).height() + 200;
  367.  
  368.   if (w / h > 16 / 9) {
  369.     tv.setSize(w, w / 16 * 9);
  370.     $('.tv .screen').css({
  371.       'left': '0px'
  372.     });
  373.   } else {
  374.     tv.setSize(h / 9 * 16, h);
  375.     $('.tv .screen').css({
  376.       'left': -($('.tv .screen').outerWidth() - w) / 2
  377.     });
  378.   }
  379. }
  380.  
  381. $(window).on('load resize', function() {
  382.   vidRescale();
  383. });
  384.  
  385. $('.hi span').on('click', function() {
  386.   $('#tv').toggleClass('mute');
  387.   if ($('#tv').hasClass('mute')) {
  388.     tv.mute();
  389.   } else {
  390.     tv.unMute();
  391.   }
  392. });
  393. </head>
  394.  
  395.   <h1>Smoke</h1>
  396.   <div id="wrap">
  397.     <div id="viewport">
  398.       <div class="tv">
  399.         <div class="screen mute" id="tv"></div>
  400.       </div>
  401.     </div>
  402.  
  403.   </div>
  404. </body>
  405. </html>

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.