API tools faq
paste
Advertisement
iljimae

mouse shadown

iljimae
Jul 5th, 2015
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- saved from url=(0023)http://lamer1.jfc.org/# -->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  6.  
  7. <style type="text/css" media="all">
  8. html,body {
  9.     margin: 0;    
  10.     padding: 0;
  11. }
  12. #text-shadow-box {    
  13.     position: fixed;    
  14.     left: 0;    
  15.     right: 0;    
  16.     top: 0;    
  17.     bottom: 0;    
  18.     width: 100%;    
  19.     height: 100%;    
  20.     overflow: hidden;    
  21.     background: #444;    
  22.     font-family: Helvetica, Arial, sans-serif;    
  23.     -webkit-tap-highlight-color: rgba(0,0,0,0);
  24.     -webkit-user-select: none;
  25. }
  26. #text-shadow-box #tsb-text,#text-shadow-box #tsb-link {
  27.     position: absolute;    
  28.     top: 40%;    
  29.     left: 0;    
  30.     width: 100%;    
  31.     height: 1em;    
  32.     margin: -0.77em 0 0 0;    
  33.     font-size: 90px;    
  34.     line-height: 1em;    
  35.     font-weight: bold;    
  36.     text-align: center;
  37. }
  38. #text-shadow-box #tsb-text {    
  39.     font-size: 100px;    
  40.     color: transparent;    
  41.     text-shadow: black 0px -45.2px 19px;
  42. }
  43. #text-shadow-box #tsb-link a {    
  44.     color: #999;    
  45.     text-decoration: none;
  46. }
  47. #text-shadow-box #tsb-box,#text-shadow-box #tsb-wall {    
  48.     position: absolute;    
  49.     top: 40%;    
  50.     left: 0;    
  51.     width: 100%;    
  52.     height: 60%;
  53. }
  54. #text-shadow-box #tsb-box {    
  55.     -webkit-box-shadow: black 0px -45.2px 39px;    
  56.     -moz-box-shadow: black 0px -45.2px 39px;
  57. }
  58. #text-shadow-box #tsb-wall {    
  59.     background: #999;
  60. }
  61. #text-shadow-box #tsb-wall p {    
  62.     position: relative;    
  63.     font-size: 18px;    
  64.     line-height: 1.5em;    
  65.     text-align: justify;    
  66.     color: #222;    
  67.     width: 550px;    
  68.     margin: 1.5em auto;    
  69.     cursor: default;
  70. }
  71. #text-shadow-box #tsb-wall p a {    
  72.     color: #fff;
  73. }
  74. #text-shadow-box #tsb-wall p a:hover {    
  75.     text-decoration: none;    
  76.     color: #000;    
  77.     background: #fff;
  78. }
  79. #tsb-spot {    
  80.     position: absolute;    
  81.     top: -50%;    
  82.     left: -50%;    
  83.     width: 200%;    
  84.     height: 200%;    
  85.     pointer-events: none;    
  86.     background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));    
  87.     background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
  88. }
  89. </style><!--[if IE]><style type="text/css">/* Sadly no IE9 support for pointer-events: none; nor CSS2 text-shadow */#tsb-spot {    display: none;}#tsb-ie {    position: absolute;    top: -90%;    left: -50%;    width: 200%;    height: 334%;    background: url;}.style1 {  color: #FF0000;}.style2 {   background-color: #FFFF00;}.style3 {    background-color: #000000;}</style><![endif]-->  
  90. </head>
  91. <body>    
  92. <div id="text-shadow-box">    
  93. <div id="tsb-box"></div>    
  94. <p id="tsb-text" ></p>    
  95. <div id="tsb-spot"></div>
  96. </div>    
  97. <script type="text/javascript" language="javascript" charset="utf-8">
  98.     var text = null;
  99.     var spot = null;
  100.     var box = null;
  101.     var boXPRoperty = '';
  102.     init();
  103.  
  104.     function init() {
  105.         text = document.getElementById('tsb-text');
  106.         spot = document.getElementById('tsb-spot');
  107.         box = document.getElementById('tsb-box');
  108.         if (typeof box.style.webkitBoxShadow == 'string') {
  109.             boXPRoperty = 'webkitBoxShadow';
  110.         } else if (typeof box.style.MozBoxShadow == 'string') {
  111.             boXPRoperty = 'MozBoxShadow';
  112.         } else if (typeof box.style.boxShadow == 'string') {
  113.             boXPRoperty = 'boxShadow';
  114.         }
  115.         if (text && spot && box) {
  116.            document.getElementById('text-shadow-box').onmousemove = onMouseMove;
  117.             document.getElementById('text-shadow-box').ontouchmove = function(e) {
  118.                 e.preventDefault();
  119.                 e.stopPropagation();
  120.                 onMouseMove({
  121.                     clientX: e.touches[0].clientX,
  122.                     clientY: e.touches[0].clientY
  123.                 });
  124.             };
  125.         }
  126.     }
  127.  
  128.     function onMouseMove(e) {
  129.         if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
  130.             return;
  131.         }
  132.         var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
  133.         var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
  134.         var d = Math.round(Math.sqrt(xm * xm + ym * ym) / 5);
  135.         text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
  136.         if (boXPRoperty) {
  137.             box.style[boXPRoperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
  138.         }
  139.         xm = e.clientX - Math.floor(window.innerWidth / 2);
  140.         ym = e.clientY - Math.floor(window.innerHeight / 2);
  141.         spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
  142.     }
  143. </script>
  144. </body></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!