How to create a Spooky Skull Animation with Interactive moving Eyes with cursor using CSS

Home > HTML > The Cube Game Using Html5 Css Js .

So this project is based on Skull animation,

This eye-catching animation features a skull with glowing eye sockets that follow the movement of your cursor, adding an element of surprise and interactivity to your webpage.

The animation is created using CSS keyframes and transforms, making it easy to customize and adjust to fit the style of your website. Plus, it's lightweight and won't slow down your page load times.

Whether you're looking to add some spooky flair to a Halloween-themed website or just want to add a playful touch to your site, this interactive skull animation is sure to impress your visitors. Try it out and watch your website come to life !
Support me by Subscribing to my > YouTube channel.

It is important to know before start working on this project.

If your bring this project online, then should give us a credit at footer, because it takes alot time make all these kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong man.But still if you want to bring it online but you don't want to give us an credit.Then mail us at somrajf12@gmail.com

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

Css

Second, Create a CSS file with the name of style.css and paste the code given below, in your CSS file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

JavaScript

Third, Create a JS file with the name of script.js and paste the code given below in your Javascript file. Remember, you’ve to create a file with .js extension.

Note*: Click on the JS Code then press ctrl + A to select the whole JS Code, then ctrl + C to copy.

// Skull mesh by DGordillo http://www.blendswap.com/blends/view/4792

var renderer, scene, camera, group;
        var mouseX = 0;
        var mouseY= 0;
        
        var skull, leftEye, rightEye;
        var textMesh;
        var pointLights = [];
            
        init();
        animate();  
        
        function init() {
        
          // renderer
          renderer = new THREE.WebGLRenderer({ alpha: true });
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.shadowMap.enabled = true;
          document.body.appendChild(renderer.domElement);
          
          // camera
          camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, .1, 10000);
          camera.position.set(0, 0, 60);
          camera.zoom = 2;
          camera.updateProjectionMatrix();
                
          // scene
          scene = new THREE.Scene();
          scene.updateMatrixWorld();
        
          // lights
          var light = new THREE.SpotLight( 16726440, .5 );
          light.angle = 0.50;
          light.decay = 1;
          light.position.set( -50.56, -21.69, 50.41 );
          scene.add( light );
          
             // var sphereSize = 10;
             // var spotLightHelper = new THREE.SpotLightHelper( light, sphereSize );
             //scene.add( spotLightHelper );
        
          var pointLight = new THREE.PointLight( 216285, 3.1 );
          pointLight.decay = 1;
          pointLight.position.set( -2.37, -18.15, 20.48 );
          scene.add( pointLight );
          
            //  var sphereSize = 1;
            //  var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
            //  scene.add( pointLightHelper );
          
          var sphere = new THREE.SphereGeometry( 0.1, 16, 8 );
          for (var i = 0; i <= 8; i++) {
            light = new THREE.PointLight( 16726440, .8, 10 );
            light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 16726440 } ) ) );
            
            scene.add( light );
            pointLights.push(light);
          }
          
        
        
          // grid helper
          var size = 100;
          var divisions = 10;
          var gridHelper = new THREE.GridHelper( size, divisions );
          //scene.add( gridHelper );
        
          // load meshes
          var loader = new THREE.JSONLoader(); 
          loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/skull.json', generateSkull );
          loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/eyes.json', generateLeftEye );
          loader.load('https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/blender/eyes.json', generateRightEye );
            
            // create group 
          group = new THREE.Group();
          group.position.x = 2;
          scene.add( group );
        
          // window resize
          window.addEventListener( 'resize', onWindowResize, false );
        
          // mouse move
          document.addEventListener('mousemove', onMouseMove, false);
        
            // load text
            generateText();
        
        };
        
        // generate text
        function generateText(){
          var loader = new THREE.FontLoader();
          loader.load( 'https://raw.githubusercontent.com/ellenprobst/it-s-alive/master/scripts/optimer_regular.typeface.json', function ( font ) {
        
          var textGeometry = new THREE.TextGeometry( "It's alive !", {
              font: font,
              size: 7.5,
              height: 3,
              curveSegments: 20
            });
        
          var textMaterial = new THREE.MeshPhongMaterial( 
              { color: 16726440, specular: 0xffffff }
          );
        
          var mesh = new THREE.Mesh( textGeometry, textMaterial );
          mesh.scale.z =mesh.scale.y=mesh.scale.x=.3;
          mesh.position.y = -10;
          mesh.position.x = -6;
          mesh.rotation.y = .3;
            
          scene.add( mesh );
          });
        
        }; 
        
        // generate skull 
        function generateSkull(geometry, material){
          geometry.computeVertexNormals();
        
          skull = new THREE.Mesh(geometry, material);
          skull.scale.y = skull.scale.z = skull.scale.x = 8.37;
        
          group.add( skull );
        }; 
        
        // generate eye 
        function generateLeftEye(geometry, material){
          geometry.computeVertexNormals();
          geometry.center();
          
          leftEye = new THREE.Mesh(geometry, material);
          leftEye.scale.y = leftEye.scale.z = leftEye.scale.x = 8.5;
          leftEye.position.set(-4.5,1.7,4.3);
          leftEye.material.forEach(material => material.shininess = 40);
          
          // var box = new THREE.BoxHelper( eye, 0xffff00 );
          // scene.add( box );
        
          group.add( leftEye );
        };
        
        // generate eye 
        function generateRightEye(geometry, material){
          geometry.computeVertexNormals();
          geometry.center();
          
          rightEye = new THREE.Mesh(geometry, material);
          rightEye.scale.y = rightEye.scale.z = rightEye.scale.x = 8.5;
          rightEye.position.set(0,1.7,4.3);
          rightEye.material.forEach(material => material.shininess = 40);
          
          // var box = new THREE.BoxHelper( eye, 0xffff00 );
          // scene.add( box );
        
          group.add( rightEye );
        }; 
        
        // Follows the mouse event
        function onMouseMove(event) {
          event.preventDefault();
          
          mouseX = (event.clientX / window.innerWidth) * 2 - 1;
          mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
        };
        
        // on resize
        function onWindowResize() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize( window.innerWidth, window.innerHeight );
        }
        
        // render
        function render() {
            renderer.render( scene, camera );
        };
        
        // animate
        function animate(event) {
          
          requestAnimationFrame( animate );
        
          if (group) {
            group.rotation.y = mouseX * .15;
            group.rotation.x = mouseY * -.15;
          }
        
          if (rightEye && leftEye) {
            leftEye.rotation.y = rightEye.rotation.y = mouseX * .50;
            leftEye.rotation.x = rightEye.rotation.x = mouseY * -.50;
          } 
        
            var time = Date.now() * 0.0008 ;
          pointLights[0].position.x = Math.sin( time * 0.3  ) * 15;
          pointLights[0].position.y = Math.sin( time * 0.5  ) * 10;
          pointLights[0].position.z = Math.cos( time * 0.4  ) * 10;
        
            
          pointLights[1].position.x = Math.sin( time * 0.6  ) * 10;
          pointLights[1].position.y = Math.cos( time * 0.7 ) * 10;
          pointLights[1].position.z = Math.sin( time * 0.3 ) * 15;
        
          pointLights[2].position.x = Math.cos( time * 0.5  ) * 15;
          pointLights[2].position.y = Math.cos( time * 0.6 ) * 10;
          pointLights[2].position.z = Math.sin( time * 0.8 ) * 10;
        
          pointLights[3].position.x = Math.sin( time * 0.3  ) * 10;
          pointLights[3].position.y = Math.cos( time * 0.5 ) * 15;
          pointLights[3].position.z = Math.cos( time * 0.7 ) * 10;
        
          pointLights[4].position.x = Math.sin( time * 0.7  ) * 15;
          pointLights[4].position.y = Math.sin( time * 0.3 ) * 20;
          pointLights[4].position.z = Math.cos( time * 0.2 ) * 10;
        
          pointLights[5].position.x = Math.sin( time * 0.5  ) * 20;
          pointLights[5].position.y = Math.cos( time * 0.8 ) * 10;
          pointLights[5].position.z = Math.sin( time * 0.5 ) * 15;
        
          pointLights[6].position.x = Math.sin( time * 0.5  ) * 10;
          pointLights[6].position.y = Math.cos( time * 0.8 ) * 10;
          pointLights[6].position.z = Math.cos( time * 0.7 ) * 15;
        
          pointLights[7].position.x = Math.sin( time * 0.3  ) * 10;
          pointLights[7].position.y = Math.cos( time * 0.5 ) * 15;
          pointLights[7].position.z = Math.sin( time * 0.2 ) * 10;
        
          pointLights[8].position.x = Math.sin( time * 0.8  ) * 15;
          pointLights[8].position.y = Math.cos( time * 0.3 ) * 10;
          pointLights[8].position.z = Math.cos( time * 0.3 ) * 10;
                
          render();
        };

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.