API tools faq
paste
Advertisement
Guest User

rainfall-css-v3

a guest
Apr 25th, 2015
220
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <style type="text/css">
  5.             /*slide in out version, note that that 50px should be replaced with the height of the tallest raindrop.*/
  6.             /*
  7.  
  8.             @-webkit-keyframes fall {
  9.                 from
  10.                 {
  11.                     top: calc(100% + -50px);
  12.                 }
  13.  
  14.                 to
  15.                 {
  16.                     top: calc(100% + 50px);
  17.                 }
  18.             }
  19.  
  20.             @keyframes fall {
  21.                 from
  22.                 {
  23.                     top:0%;
  24.                 }
  25.  
  26.                 to
  27.                 {
  28.                     top: 100%;
  29.                 }
  30.             }
  31.  
  32.            
  33.            
  34.             .curtainWrapper
  35.             {
  36.                 overflow-y:hidden;
  37.             }
  38.             */
  39.  
  40.             /*bead & splash version*/
  41.             @-webkit-keyframes fall {
  42.                 0%
  43.                 {
  44.                     top:0%;
  45.  
  46.                     -webkit-transform-origin: 50% 0%;
  47.                     transform-origin: 50% 0%;
  48.  
  49.                     -webkit-transform:scale(0,0);
  50.                     transform:scale(0,0);
  51.                 }
  52.                 10%
  53.                 {
  54.                     top:0%;
  55.  
  56.                     -webkit-transform-origin: 50% 0%;
  57.                     transform-origin: 50% 0%;
  58.  
  59.                     -webkit-transform:scale(1,1);
  60.                     transform:scale(1,1);
  61.                 }
  62.                 95%
  63.                 {
  64.                     top: 100%;
  65.  
  66.                     -webkit-transform-origin: 50% 100%;
  67.                     transform-origin: 50% 100%;
  68.  
  69.                     -webkit-transform:scale(1,1);
  70.                     transform:scale(1,1);
  71.                 }
  72.                 100%
  73.                 {
  74.                     top: 100%;
  75.                     -webkit-transform-origin: 50% 100%;
  76.                     transform-origin: 50% 100%;
  77.  
  78.                     -webkit-transform:scale(2,0);
  79.                     transform:scale(2,0);
  80.                 }
  81.             }
  82.  
  83.             @keyframes fall {
  84.                 0%
  85.                 {
  86.                     top: calc(0%);
  87.  
  88.                     -webkit-transform-origin: 50% 0%;
  89.                     transform-origin: 50% 0%;
  90.  
  91.                     -webkit-transform:scale(0,0);
  92.                     transform:scale(0,0);
  93.                 }
  94.                 10%
  95.                 {
  96.                     top: calc(0%);
  97.  
  98.                     -webkit-transform-origin: 50% 0%;
  99.                     transform-origin: 50% 0%;
  100.  
  101.                     -webkit-transform:scale(1,1);
  102.                     transform:scale(1,1);
  103.                 }
  104.                 97.5%
  105.                 {
  106.                     top: calc(100% - 50px);
  107.  
  108.                     -webkit-transform-origin: 50% 100%;
  109.                     transform-origin: 50% 100%;
  110.  
  111.                     -webkit-transform:scale(1,1);
  112.                     transform:scale(1,1);
  113.                 }
  114.                 100%
  115.                 {
  116.                     top: calc(100% - 50px);
  117.                     -webkit-transform-origin: 50% 100%;
  118.                     transform-origin: 50% 100%;
  119.                    
  120.                     -webkit-transform:scale(1.5,0);
  121.                     transform:scale(2,0);
  122.                 }
  123.             }
  124.  
  125.             /* stuff for both versions */
  126.             .rainCurtain
  127.             {
  128.                 height: 100%;
  129.             }
  130.  
  131.             /*matches all direct children of "rainCurtain", which should theoretically be rain drops.*/
  132.             .rainCurtain > *
  133.             {
  134.                 display: inline-block;
  135.                 /*relative instead of absolute to preserve natural horizontal positioning*/
  136.                 position: relative;
  137.  
  138.                 /*remember to use both -webkit- and the standard syntax. http://caniuse.com/#feat=css-animation shows what "vendor prefixes" are still neccessary.*/
  139.                 -webkit-animation-name: fall;
  140.                 animation-name: fall;
  141.  
  142.                 -webkit-animation-iteration-count:infinite;
  143.                 animation-iteration-count:infinite;
  144.  
  145.                 /*you can adjust this to affect the overall speed*/
  146.                 -webkit-animation-duration: 5s;
  147.                 animation-duration: 5s;
  148.  
  149.                 /*an attempt to make them seem like they initially cling to the top then increase velocity as they fall, reaching terminal velocity fairly quickly*/
  150.                 animation-timing-function: ease-in;
  151.                 animation-timing-function: ease-in;
  152.             }
  153.  
  154.             /*the rest of this below are just sample customisations to set the drops apart, other demo stuff etc*/
  155.  
  156.             body
  157.             {
  158.                 margin:0px;
  159.                 padding: 0px;
  160.             }
  161.  
  162.             .curtainWrapper
  163.             {
  164.                 height: 100%;
  165.                 height: 100vh;
  166.             }
  167.             .rainCurtain
  168.             {
  169.                 display: -webkit-flex;
  170.                 display: flex;
  171.  
  172.                 -webkit-flex-direction:row;
  173.                 flex-direction:row;
  174.  
  175.                 -webkit-flex-wrap:nowrap;
  176.                 flex-wrap:nowrap;
  177.  
  178.                 -webkit-justify-content:space-around;
  179.                 justify-content:space-around;
  180.  
  181.                 -webkit-flex: 0 0 auto;
  182.                 flex: 0 0 auto;
  183.  
  184.             }
  185.  
  186.             .rainCurtain > *
  187.             {
  188.                 width: 50px;
  189.                 height:50px;
  190.                 background-color: black;
  191.             }
  192.  
  193.             .rainCurtain > :nth-child(2n)
  194.             {
  195.                 /*set this differently for different raindrops to make them move seperately, you can also adjust duration and timing-function for different drops as well if you wish. defaults to 0*/
  196.                 -webkit-animation-delay:1s;
  197.                 animation-delay:1s;
  198.             }
  199.             .rainCurtain > :nth-child(3n+1)
  200.             {
  201.                 /*where this overlaps with 2n it will override as it comes last in the ruleset*/
  202.                 -webkit-animation-delay:1.8s;
  203.                 animation-delay:1.8s;
  204.             }
  205.         </style>
  206.     </head>
  207.     <body>
  208.         <div class="curtainWrapper">
  209.             <div class="rainCurtain">
  210.                 <div></div>
  211.                 <div></div>
  212.                 <div></div>
  213.                 <div></div>
  214.                 <div></div>
  215.                 <div></div>
  216.                 <div></div>
  217.                 <div></div>
  218.                 <div></div>
  219.                 <div></div>
  220.                 <div></div>
  221.                 <div></div>
  222.                 <div></div>
  223.                 <div></div>
  224.                 <div></div>
  225.                 <div></div>
  226.                 <div></div>
  227.                 <div></div>
  228.             </div>
  229.         </div>
  230.     </body>
  231. </html>
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!