API tools faq
paste
Advertisement
Guest User

Error with hover JS

a guest
Sep 11th, 2018
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <meta charset="utf-8">
  7.     <title>Document</title>
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  9.    
  10.     <style type="text/css">
  11.    
  12. .SunRotate
  13. {
  14.     position: absolute;
  15.     top: 0%;
  16.     left: 0%;
  17.     width: 100%;
  18.     -webkit-animation:spin 40s linear infinite;
  19.     -moz-animation:spin 40s linear infinite;
  20.     animation:spin 40s linear infinite;
  21.     z-index: 2;
  22.     display: inline-block;
  23. }
  24. @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  25. @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  26. @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  27.  
  28. .SunCircle
  29. {
  30.     position: absolute;
  31.     top: 0%;
  32.     left: 0%;
  33.     width: 100%;
  34.     z-index: 3;
  35.     display: inline-block;
  36. }
  37. .SunDiv
  38. {
  39.     position: absolute;
  40.     top: 14%;
  41.     right: 1%;
  42.     width: 16%;
  43.     height: auto;
  44.     background-color: green;
  45. }
  46. .EyesSunPositionDiv
  47. {
  48.     position: absolute;
  49.     top: 26%;
  50.     right: 6.5%;
  51.     width: 5%;
  52.     height: 10%;
  53.     z-index: 4;
  54. }
  55. .InvisibilityDivToBlinkEyesOfTheSun
  56. {
  57.     position: absolute;
  58.     width: 55%;
  59.     height: 7%;
  60.     top: 24.5%;
  61.     left: 20%;
  62.     z-index: 108;
  63.     background-color: lightgray;
  64. }
  65. .BlinkingEyesAnimationCSS
  66. {
  67.     /* Safari 4.0 - 8.0 */
  68.     -webkit-animation-name: example;
  69.     -webkit-animation-duration: 3s;
  70.     -webkit-animation-timing-function: linear;
  71.     -webkit-animation-iteration-count: infinite;
  72.     -webkit-animation-direction: alternate;
  73.     /* Standard syntax */
  74.     animation-name: example;
  75.     animation-duration: 3s;
  76.     animation-timing-function: linear;
  77.     animation-iteration-count: infinite;
  78.     animation-direction: alternate;
  79. }
  80.  
  81. .eye {
  82.   position: relative;
  83.   display: inline-block;
  84.   border-radius: 50%;
  85.   height: 40%;
  86.   width: 40%;
  87.   background-color: gray;
  88. }
  89. .eye:after { /*pupil*/
  90.   position: absolute;
  91.   right: 10px;
  92.   width: 40%;
  93.   height: 40%;
  94.   background: #000;
  95.   border-radius: 50%;
  96.   content: " ";
  97.  
  98. }
  99. @-webkit-keyframes example {
  100.     75% {
  101.         width: 40%;
  102.        
  103.     }
  104.     100% {
  105.         width: 5%;
  106.         }
  107. }
  108. @keyframes example {
  109.     75% {
  110.         width: 40%;
  111.         }
  112.     100% {
  113.         width: 5%;
  114.         }
  115. }
  116. .BodyDiv
  117. {
  118.     background-color: black;
  119.     position: absolute;
  120.     margin: 0%;
  121.     width: 100%;
  122.     height: 100%;
  123. }
  124.  
  125.     </style>
  126. </head>
  127.  
  128. <body>
  129. <div class="BodyDiv">
  130.     <div class="InvisibilityDivToBlinkEyesOfTheSun" id="Pole"></div>
  131.  
  132.     <span class="SunDiv">
  133.         <img src="http://www.onlygfx.com/wp-content/uploads/2017/11/grunge-circle-frame-1-1024x982.png" class="SunCircle">
  134.         <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture.png" class="SunCircle">
  135.         <img src="https://png.pngtree.com/element_pic/17/07/11/a76c77c519c61cd7300f5bdb2ef4dea4.jpg" class="SunRotate">
  136.     </span>
  137.     <div class="EyesSunPositionDiv">
  138.             <div class='eye' id="EyesID1"></div>
  139.             <div class='eye' id="EyesID2"></div>
  140.     </div>
  141. </div>
  142.  
  143.     <script>
  144.         $('#Pole').mouseenter(function() {
  145.             $('.eye').addClass('BlinkingEyesAnimationCSS'); //Jak tutaj wprowadzić .eye:after?
  146.         });
  147.         $('#Pole').mouseleave(function() {
  148.             $('.eye').removeClass('BlinkingEyesAnimationCSS'); //Jak tutaj wprowadzić .eye:after?
  149.         });
  150.  
  151.        
  152.         //Oczy slonca - animacja podazania za kursorem
  153.             $(".BodyDiv").mousemove(function(event) {
  154.                 var eye = $(".eye");
  155.                 var x = (eye.offset().left) + (eye.width() / 2);
  156.                 var y = (eye.offset().top) + (eye.height() / 2);
  157.                 var rad = Math.atan2(event.pageX - x, event.pageY - y);
  158.                 var rot = (rad * (180 / Math.PI) * -1) + 180;
  159.                 eye.css({
  160.                     '-webkit-transform': 'rotate(' + rot + 'deg)',
  161.                     '-moz-transform': 'rotate(' + rot + 'deg)',
  162.                     '-ms-transform': 'rotate(' + rot + 'deg)',
  163.                     'transform': 'rotate(' + rot + 'deg)'
  164.                 });
  165.             });
  166.     </script>
  167. </body>
  168.  
  169. </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!