Open Site Navigation

Custom Cursor Effect in Wix

Do you want to create a custom cursor effect in Wix for certain sections? Well in this lesson, you will learn how to accomplish this.


Custom Cursor Effect in Wix

Before you get started, watch our video to learn how to properly set it up!



Now that you know how to set it up, here is the code that we used in the video:


Frying Pan Code:
 

<!doctype html>

<html>

<head>

<script type="text/javascript">

</script>


<style type="text/css">

body, html {

cursor: url(http://www.picgifs.com/food-and-drinks/food-and-drinks/eggs/food-and-drinks-eggs-252212.gif), pointer;


}

</style>

</head>


<body>

<div id="cursor" ></div>

</body>

</html>

 

Colored Circles:
 

<!DOCTYPE html>

<head>

<title>sketch.js &raquo; Basic Example</title>

<link rel="stylesheet" href="css/example.css">

<style type="text/css">

html, body {

background: none;

}

</style>

</head>

<body>

<div id="container"></div>


<script>



(function ( root, factory ) {


if ( typeof exports === 'object' ) {


// CommonJS like

module.exports = factory(root, root.document);


} else if ( typeof define === 'function' && define.amd ) {


// AMD

define( function() { return factory( root, root.document ); });


} else {


// Browser global