API tools faq
paste
Advertisement
Kyfx

Anime and some sh1t

Kyfx
Nov 23rd, 2014
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.55 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. --
  4. LOVE IS ONE
  5. --
  6.  
  7.  
  8. <html>
  9.     <head>
  10.         <title> Hai c: </title>
  11.         <link rel="shortcut icon" type="image/png" href="http://a.thumbs.redditmedia.com/asdqBvUbIHd2ysJt.png" />
  12.         <meta charset="utf-8" description="Hai ^-^" />
  13.         <style type="text/css">
  14.             @import url(http://fonts.googleapis.com/css?family=Play:400,700);
  15.            
  16.             * { font-family: Play, Arial; }
  17.            
  18.             html {
  19.                 min-width: 750px;
  20.                 width: 100%;
  21.                 height: 100%;
  22.                 background-color: #000000;
  23.                 background-size: 100% 100%;
  24.                 transition: opacity 0.2s;
  25.                 margin: 0px;
  26.             }
  27.            
  28.             body {
  29.                 margin: 0px;
  30.                 width: 100%;
  31.                 height: 100%;
  32.                 text-align: center;
  33.                 color: #ffffff;
  34.                 #font-family: Arial;
  35.                 font-size: 13px;
  36.             }
  37.            
  38.             a {
  39.               /* Cause link = dick */
  40.                 text-decoration: none;
  41.                 color: #ffffff;
  42.             }
  43.            
  44.             span {
  45.                 position: fixed;
  46.                 font-size: 100%;
  47.                 cursor: default;
  48.                 transition: top 0.2s, left 0.2s, transform 0.2s;
  49.             }
  50.            
  51.             #youtube {
  52.                 position: fixed;
  53.                 top: -500px;
  54.             }
  55.            
  56.             #videos {
  57.                 width: 561px;
  58.                 margin: 20px auto 0px auto;
  59.             }
  60.            
  61.             .ytVideo {
  62.                 width: 120px;
  63.                 height: 90px;
  64.                 display: inline-block;
  65.                 background-position: left;
  66.                 background-size: 120px 90px;
  67.                 background-repeat: no-repeat;
  68.                 background-color: rgba(255, 255, 255, 0.1);
  69.                 cursor: pointer;
  70.                 opacity: 0.65;
  71.                 margin: 10px;
  72.                 transition: opacity 0.4s, transform 0.2s;
  73.             }
  74.            
  75.             .ytVideo:hover {
  76.                 opacity: 1;
  77.             }
  78.            
  79.             #textwrap {
  80.                 width: 400px;
  81.                 height: 130px;
  82.                 background-image: url('http://i62.tinypic.com/2d7vhjq.png');
  83.                 background-repeat: no-repeat;
  84.                 background-size: 150px 150px;
  85.                 margin: 0px auto;
  86.                 padding: 10px 0px 10px 150px;
  87.             }
  88.            
  89.             #textblock {
  90.                 height: 130px;
  91.                 width: 380px;
  92.                 margin-left: 10px;
  93.                 overflow: hidden;
  94.             }
  95.         </style>
  96.     </head>
  97.    
  98.     <body>
  99.         <script type="text/javascript">
  100.             var text = "Heya there ^-^\nWelcome to my Site :P Come and See the Furry of a natural habitat\n\n-Kyfx-";
  101.             var background = ["http://images5.alphacoders.com/410/410316.jpg", "http://i61.tinypic.com/dh3l0h.jpg"];
  102.             var messages = [
  103.                 'Lol HAI ^-^', 'Welcome to furville!', 'c:',
  104.                 'FLUFFY!!!', 'Such Fur', 'Mega Fox', 'Much Fox'
  105.             ];
  106.            
  107.             var playlist = [
  108.                 '3RStkZa5jnA', '0UATEO9wTlY', '9SWLK8VxFPA', 'IEuPDaA-Bys',
  109.                 'AW1sejLXQqA', 'Xh8uiKbT9_E', 'Mto25cISPD4', 'HdMREDVJNAk',
  110.                 'GsStopZdNnQ', 'xY75tKEaJmE', '4l9WijhWwUs', 'maiHUbIIi3g'
  111.             ];
  112.            
  113.             var textblock = null;
  114.             var textIndex = 0;
  115.             var typeMax = 0;
  116.             var typeInter = null;
  117.             var fadeInter = null;
  118.             var ytFrame = null;
  119.             var ytVids = null;
  120.             var rgbGlow = [255, 255, 255];
  121.             var fade = true;
  122.             var lolblocks = [];
  123.            
  124.             window.onload = function()
  125.             {
  126.                 type();
  127.                 setInterval( function() { fade ? fadeOut() : fadeIn(); }, 30 );
  128.                 youtube();
  129.                 showVideos();
  130.                
  131.                 for(var i = 0; i < 30; i++)
  132.                 {
  133.                     createScrollBlock(i);
  134.                 }
  135.                
  136.                 document.getElementsByTagName('html')[0].style.backgroundImage = "url('" + background[0] + "')";
  137.             }
  138.            
  139.             function createScrollBlock(i)
  140.             {
  141.                 ele = lolblocks.push(document.createElement('span'));
  142.                 lolblocks[i].innerHTML = messages[Math.floor(Math.random() * messages.length)];
  143.                 lolblocks[i].style.transform = 'rotate(' + (Math.random() * 30 - 15) + 'deg)';
  144.                 document.body.appendChild(lolblocks[i]);
  145.                 lolblock(lolblocks[i]);
  146.                 lolblocks[i].inter = setInterval(lolblock, Math.floor(Math.random() * 200) + 400, lolblocks[i]); // Random Movement Patterns
  147.             }
  148.            
  149.             function showVideos()
  150.             {
  151.                 ytVids = document.getElementById('videos');
  152.                 ytFrag = document.createDocumentFragment();
  153.                 ytBlocks = [];
  154.                 for(var i = 0; i < playlist.length; i++)
  155.                 {
  156.                     block = document.createElement('div');
  157.                     block.className = "ytVideo";
  158.                     block.id = "Video_" + i;
  159.                     block.style.backgroundImage = "url('https://i.ytimg.com/vi/" + playlist[i] + "/default.jpg')";
  160.                     block.addEventListener('click', youtube);
  161.                     block.ytVideo = i;
  162.                     block.style.transform = 'rotate(' + (Math.random() * 60 - 30) + 'deg)';
  163.                    
  164.                     ytFrag.appendChild(block);
  165.                    
  166.                     if(i % 4 == 3)
  167.                     {
  168.                         ytFrag.appendChild(document.createElement('br'));
  169.                     }
  170.                 }
  171.                
  172.                 ytVids.appendChild(ytFrag);
  173.             }
  174.            
  175.             function youtube(t)
  176.             {
  177.                 try
  178.                 {
  179.                     ytFrame = document.getElementById('youtube');
  180.                     video = playlist[t ? this.ytVideo : Math.round(Math.random() * (playlist.length - 1))];
  181.                     ytFrame.setAttribute('src', 'http://www.youtube.com/apiplayer?video_id=' + video + '&hd=1&autoplay=1&loop=1&playlist=' + playlist.join(","));
  182.                 } catch(err) { /* Do Nothing */ }
  183.             }
  184.            
  185.             function type()
  186.             {
  187.                 textblock = document.getElementById('textblock');
  188.                 typeMax = text.length;
  189.                
  190.                 setInterval(
  191.                     function()
  192.                     {
  193.                         rgbGlow[0] = (rgbGlow[0] + Math.round(Math.random() * 0x0000ff)) % 0x0000ff;
  194.                         rgbGlow[1] = (rgbGlow[1] + Math.round(Math.random() * 0x00ff00)) % 0x00ff00;
  195.                         rgbGlow[2] = (rgbGlow[2] + Math.round(Math.random() * 0xff0000)) % 0xff0000;
  196.                         color = '#' + ((rgbGlow[0] + rgbGlow[1] + rgbGlow[2]).toString(16));
  197.                         document.body.style.textShadow = "0 0 0.2em " + color + ", 0 0 0.2em " + color + ", 0 0 0.2em " + color;
  198.                     }, 125
  199.                 );
  200.                
  201.                 typeInter = setInterval(
  202.                     function()
  203.                     {
  204.                         if(textIndex == typeMax)
  205.                         {
  206.                             clearInterval(typeInter);
  207.                         }
  208.                         else
  209.                         {
  210.                             if(text[textIndex] == '\n')
  211.                             {
  212.                                 textblock.innerHTML += '<br />';
  213.                                 clearInterval(typeInter);
  214.                                 setTimeout(type, 600);
  215.                             }
  216.                             else
  217.                             {
  218.                                 textblock.innerHTML += text[textIndex];
  219.                             }
  220.                            
  221.                             textIndex += 1;
  222.                             textblock.scrollTop = textblock.scrollHeight;
  223.                         }
  224.                     }, 50
  225.                 );
  226.             }
  227.            
  228.             function fadeIn()
  229.             {
  230.                 if(textblock.style.opacity > 1.0)
  231.                 {
  232.                     textblock.style.opacity = 1.0;
  233.                     fade = true;
  234.                 }
  235.                 else
  236.                 {
  237.                     textblock.style.opacity = parseFloat(textblock.style.opacity) + 0.05;
  238.                 }
  239.             }
  240.            
  241.             function fadeOut()
  242.             {
  243.                 if(textblock.style.opacity <= 0.25)
  244.                 {
  245.                     textblock.style.opacity = 0.25;
  246.                     fade = false;
  247.                 }
  248.                 else
  249.                 {
  250.                     textblock.style.opacity -= 0.05;
  251.                 }
  252.             }
  253.            
  254.             function toglolblock(e)
  255.             {
  256.                 status = lolblocks[0].inter;
  257.                
  258.                 if(status > 0)
  259.                 {
  260.                     document.getElementById('tooFuckingLaggyBro').innerHTML = 'Animate PLZ c:';
  261.                    
  262.                     for(var i = 0; i < lolblocks.length; i++)
  263.                     {
  264.                         clearInterval(lolblocks[i].inter);
  265.                         lolblocks[i].inter = false;
  266.                     }
  267.                 }
  268.                 else
  269.                 {
  270.                     document.getElementById('tooFuckingLaggyBro').innerHTML = 'Still too laggy, bro.';
  271.                    
  272.                     for(var i = 0; i < lolblocks.length; i++)
  273.                     {
  274.                         lolblock(lolblocks[i]);
  275.                         lolblocks[i].inter = setInterval(lolblock, Math.floor(Math.random() * 200) + 400, lolblocks[i]);
  276.                     }
  277.                 }
  278.             }
  279.            
  280.             function lolblock(e)
  281.             {
  282.                 e.style.fontSize = Math.floor(Math.random() * 200) + '%';
  283.                 e.style.left = Math.floor(Math.random() * (document.body.clientWidth - e.offsetWidth)) + 'px';
  284.                 e.style.top = Math.floor(Math.random() * (document.body.clientWidth - e.offsetHeight)) + 'px';
  285.             }
  286.         </script>
  287.        
  288.         <div id="textwrap">
  289.             <div id="textblock"></div>
  290.             <a id="tooFuckingLaggyBro" href="#" onclick="toglolblock();"> Click this if it's a bit laggy ^-^ </a>
  291.         </div>
  292.         <div id="videos"></div>
  293.         <iframe src="" id="youtube" type="application/x-shockwave-flash" width="750" height="450"></iframe>
  294.     </body>
  295. </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!