title
Creating Custom Cursors - CSS Only, and JavaScript!

description
https://skl.sh/designcourse19 - First 500 people to sign up will get their first 2 months free! Today's Question: Customizing the cursor, yes or no? Tell me why in the comments. -- CODEPEN for this tutorial: https://codepen.io/designcourse/pen/GzJKOE https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, we're going to take a look at a variety of ways to customize the mouse cursor. First, we'll look at a CSS only solution, and then we'll get into a little bit of JavaScript to create more interesting mouse cursors -- fully equipped with cursor animations, click-based animations and more! Let's get started! - - - - - - - - - - - - - - - - - - - - - - Join my Patreon! https://www.patreon.com/designcourse Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Creating Custom Cursors - CSS Only, and JavaScript!', 'heatmap': [{'end': 767.488, 'start': 737.268, 'weight': 1}], 'summary': 'Covers various methods to customize cursor and add animations, emphasizing pure css and javascript for changing cursor appearance and behavior. it also discusses using svg and javascript to create custom cursors, and showcases practical techniques for custom cursor styling, animation, and customization using css and javascript.', 'chapters': [{'end': 39.632, 'segs': [{'end': 52.535, 'src': 'embed', 'start': 22.504, 'weight': 0, 'content': [{'end': 24.125, 'text': "For instance, you're about to watch my tutorial.", 'start': 22.504, 'duration': 1.621}, {'end': 29.149, 'text': 'that might affect the user experience, so you could watch this full course on user experience at Skillshare.', 'start': 24.125, 'duration': 5.024}, {'end': 33.41, 'text': 'Skillshare is also super affordable with a subscription that only costs 10 bucks a month.', 'start': 29.329, 'duration': 4.081}, {'end': 39.632, 'text': "But if you're one of the first 500 of my subscribers to click the link below here in the description, you get the first two months free.", 'start': 33.67, 'duration': 5.962}, {'end': 40.512, 'text': 'So take advantage.', 'start': 39.792, 'duration': 0.72}, {'end': 42.712, 'text': "Hey everyone, what's up? Gary Simon, of course, Cetro.", 'start': 40.672, 'duration': 2.04}, {'end': 45.873, 'text': "So today we're gonna talk about customizing the cursor.", 'start': 42.752, 'duration': 3.121}, {'end': 48.194, 'text': "And there's several different ways to go about doing this.", 'start': 46.153, 'duration': 2.041}, {'end': 52.535, 'text': "There's a pure CSS only solution, and then we can also do it through JavaScript.", 'start': 48.534, 'duration': 4.001}], 'summary': 'Get 2 months free subscription at skillshare for $10/month. learn user experience, css, and javascript customization.', 'duration': 30.031, 'max_score': 22.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ22504.jpg'}], 'start': 0.109, 'title': 'Customizing cursor and adding animations', 'summary': 'Discusses various methods to customize cursor and add animations, along with a mention of skillshare.com providing 25,000 classes in coding, design, business, and more, offering a subscription at $10 per month and a special offer of first two months free for the first 500 subscribers.', 'chapters': [{'end': 39.632, 'start': 0.109, 'title': 'Customize cursor and add animations', 'summary': 'Discusses different ways to customize the cursor and add animations and interactions, along with a mention of skillshare.com as a learning platform with 25,000 classes in coding, design, business, and more, offering a subscription at $10 per month and a special offer of first two months free for the first 500 subscribers.', 'duration': 39.523, 'highlights': ['Skillshare.com offers 25,000 different classes in coding, design, business, and more.', 'Skillshare subscription costs only 10 bucks a month.', 'First 500 subscribers get the first two months free by clicking the link in the description.']}], 'duration': 39.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ109.jpg', 'highlights': ['Skillshare.com offers 25,000 different classes in coding, design, business, and more.', 'Skillshare subscription costs only 10 bucks a month.', 'First 500 subscribers get the first two months free by clicking the link in the description.']}, {'end': 264.77, 'segs': [{'end': 98.065, 'src': 'embed', 'start': 39.792, 'weight': 0, 'content': [{'end': 40.512, 'text': 'So take advantage.', 'start': 39.792, 'duration': 0.72}, {'end': 42.712, 'text': "Hey everyone, what's up? Gary Simon, of course, Cetro.", 'start': 40.672, 'duration': 2.04}, {'end': 45.873, 'text': "So today we're gonna talk about customizing the cursor.", 'start': 42.752, 'duration': 3.121}, {'end': 48.194, 'text': "And there's several different ways to go about doing this.", 'start': 46.153, 'duration': 2.041}, {'end': 52.535, 'text': "There's a pure CSS only solution, and then we can also do it through JavaScript.", 'start': 48.534, 'duration': 4.001}, {'end': 53.835, 'text': "We're gonna take a look at both.", 'start': 52.555, 'duration': 1.28}, {'end': 54.635, 'text': 'All right.', 'start': 54.295, 'duration': 0.34}, {'end': 57.396, 'text': 'so just going back to our example real quick.', 'start': 54.635, 'duration': 2.761}, {'end': 63.544, 'text': "We can see we actually have the cursor here, but we have just a different element following it with a click event that we're gonna add.", 'start': 57.996, 'duration': 5.548}, {'end': 68.71, 'text': 'We can also completely get rid of the cursor itself as well.', 'start': 64.444, 'duration': 4.266}, {'end': 71.414, 'text': "So I'm gonna explain all of this here going forward.", 'start': 68.75, 'duration': 2.664}, {'end': 79.538, 'text': "So for today's question, Customizing the cursor, yes or no? Tell me why in the comments, why or why not.", 'start': 71.834, 'duration': 7.704}, {'end': 83.299, 'text': "If you think there's a use case for it or not, let me know in the comments, I'll let you know my thoughts.", 'start': 79.598, 'duration': 3.701}, {'end': 87.981, 'text': "And the first pinned comment, make sure to subscribe if you haven't yet, and let's get started.", 'start': 83.92, 'duration': 4.061}, {'end': 93.662, 'text': "All right, so we're here in Visual Studio Code, free code editor from Microsoft that I use, very popular.", 'start': 88.381, 'duration': 5.281}, {'end': 98.065, 'text': "um and also in a folder called cursor and it's empty.", 'start': 94.242, 'duration': 3.823}], 'summary': 'Discussion of customizing cursor using css and javascript, seeking audience input.', 'duration': 58.273, 'max_score': 39.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ39792.jpg'}, {'end': 152.403, 'src': 'embed', 'start': 124.664, 'weight': 5, 'content': [{'end': 128.467, 'text': "So you'll need the sass extension right over here.", 'start': 124.664, 'duration': 3.803}, {'end': 131.571, 'text': 'Just type in sass right here.', 'start': 128.527, 'duration': 3.044}, {'end': 133.433, 'text': 'Live sass compiler and install that.', 'start': 131.651, 'duration': 1.782}, {'end': 136.536, 'text': 'And then we will click watch sass.', 'start': 134.454, 'duration': 2.082}, {'end': 138.878, 'text': 'right there.', 'start': 137.637, 'duration': 1.241}, {'end': 142.579, 'text': "um, and then, yeah, that's all we need to get started here.", 'start': 138.878, 'duration': 3.701}, {'end': 147.941, 'text': "i'm not going to put any html for now, because it's just going to use the body element for this.", 'start': 142.579, 'duration': 5.362}, {'end': 152.403, 'text': 'also, you want to install the live server extension as well.', 'start': 147.941, 'duration': 4.462}], 'summary': 'Install sass and live server extensions to get started with web development.', 'duration': 27.739, 'max_score': 124.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ124664.jpg'}, {'end': 237.87, 'src': 'embed', 'start': 198.059, 'weight': 1, 'content': [{'end': 202.84, 'text': "And I'm going to type in first, margin zero, I don't want any margins if I decide to style it.", 'start': 198.059, 'duration': 4.781}, {'end': 204.321, 'text': "It's a default thing I do.", 'start': 203.16, 'duration': 1.161}, {'end': 206.181, 'text': "I don't even need to do it for this tutorial.", 'start': 204.341, 'duration': 1.84}, {'end': 210.943, 'text': "I'm gonna put height, we do need to do this, a height 100, viewport height.", 'start': 206.642, 'duration': 4.301}, {'end': 215.745, 'text': "And because if we don't do this, the cursor won't work, the custom cursor.", 'start': 211.643, 'duration': 4.102}, {'end': 223.127, 'text': 'So now we could put in cursor property, And we can it has a lot of different values.', 'start': 216.705, 'duration': 6.422}, {'end': 230.008, 'text': 'You could see if we type in cursor, we have all these options right here.', 'start': 223.927, 'duration': 6.081}, {'end': 234.449, 'text': "Although I'm not sure if those are them, but we could choose cell, for instance.", 'start': 230.028, 'duration': 4.421}, {'end': 235.67, 'text': 'And there we go.', 'start': 235.089, 'duration': 0.581}, {'end': 237.87, 'text': 'You can see the cursor is now changed to a cell.', 'start': 235.71, 'duration': 2.16}], 'summary': "Setting margin to zero and height to 100vh, enabling custom cursor with 'cell' option.", 'duration': 39.811, 'max_score': 198.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ198059.jpg'}], 'start': 39.792, 'title': 'Customizing the cursor', 'summary': "Explores customizing the cursor using pure css and javascript, covering ways to change cursor appearance and behavior, and emphasizes audience interaction for use case opinions. it also demonstrates setting a custom cursor in css using the 'cursor' property and discusses the process of installing and using live sass compiler and live server extensions for efficient web development.", 'chapters': [{'end': 98.065, 'start': 39.792, 'title': 'Customizing the cursor', 'summary': 'Discusses customizing the cursor using pure css and javascript, exploring ways to change the cursor appearance and behavior, and prompting audience interaction for use case opinions.', 'duration': 58.273, 'highlights': ['The chapter discusses customizing the cursor using pure CSS and JavaScript, exploring ways to change the cursor appearance and behavior.', 'The presenter prompts audience interaction by asking for opinions on the use case for customizing the cursor.', 'The presenter uses Visual Studio Code, a popular free code editor from Microsoft, for the demonstration.']}, {'end': 264.77, 'start': 98.065, 'title': 'Setting custom cursor in css', 'summary': "Demonstrates setting a custom cursor in css using the 'cursor' property and highlights the process of installing and using live sass compiler and live server extensions for efficient web development.", 'duration': 166.705, 'highlights': ["The chapter demonstrates setting a custom cursor in CSS using the 'cursor' property, showing the process of changing the cursor to a specific style like 'cell'.", 'It highlights the process of installing and using Live Sass Compiler and Live Server extensions for efficient web development.', "The tutorial also briefly mentions the use of 'margin' and 'height' CSS properties for styling the body element."]}], 'duration': 224.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ39792.jpg', 'highlights': ['The chapter discusses customizing the cursor using pure CSS and JavaScript, exploring ways to change the cursor appearance and behavior.', "The chapter demonstrates setting a custom cursor in CSS using the 'cursor' property, showing the process of changing the cursor to a specific style like 'cell'.", 'The presenter prompts audience interaction by asking for opinions on the use case for customizing the cursor.', "The tutorial also briefly mentions the use of 'margin' and 'height' CSS properties for styling the body element.", 'The presenter uses Visual Studio Code, a popular free code editor from Microsoft, for the demonstration.', 'It highlights the process of installing and using Live Sass Compiler and Live Server extensions for efficient web development.']}, {'end': 637.112, 'segs': [{'end': 347.424, 'src': 'embed', 'start': 264.77, 'weight': 2, 'content': [{'end': 272.736, 'text': "um, but of course, if you want to do custom, then you're going to need to use the url property all right.", 'start': 264.77, 'duration': 7.966}, {'end': 279.261, 'text': 'so this would be in the case that you have like an svg graphic that you want to change the cursor to.', 'start': 272.736, 'duration': 6.525}, {'end': 288.167, 'text': "so we're going to put in url and we'll put in images and then custom.svg.", 'start': 279.261, 'duration': 8.906}, {'end': 288.487, 'text': 'all right.', 'start': 288.167, 'duration': 0.32}, {'end': 289.428, 'text': "so i'm going to save this,", 'start': 288.487, 'duration': 0.941}, {'end': 305.776, 'text': "hit ctrl b to get our sidebar out and i'm going to open this up in explorer real quickly and i'm going to put in and just paste in a basic image graphic here real quickly.", 'start': 289.428, 'duration': 16.348}, {'end': 321.193, 'text': "i'm going to create images here and just paste in this logo.svg graphic and I'll include this in the code pen and probably zip it up,", 'start': 305.776, 'duration': 15.417}, {'end': 322.613, 'text': 'even so you can download the whole thing.', 'start': 321.193, 'duration': 1.42}, {'end': 325.554, 'text': 'Just use any custom SVG graphic.', 'start': 323.273, 'duration': 2.281}, {'end': 326.794, 'text': 'Just note the size though.', 'start': 325.594, 'duration': 1.2}, {'end': 328.374, 'text': 'The size is important that you choose.', 'start': 326.854, 'duration': 1.52}, {'end': 335.436, 'text': "You don't want to choose something too big because as far as I know, in terms of scaling the cursor property, it won't work.", 'start': 328.394, 'duration': 7.042}, {'end': 341.44, 'text': "um, so whatever the size of the svg is, that's what you're stuck with or png or whatever.", 'start': 336.076, 'duration': 5.364}, {'end': 342.24, 'text': 'so keep that in mind.', 'start': 341.44, 'duration': 0.8}, {'end': 347.424, 'text': "you don't want to go too too much larger than like 30 pixels or 40 pixels.", 'start': 342.24, 'duration': 5.184}], 'summary': 'Use url property for custom svg graphic as cursor, keep size under 30-40 pixels.', 'duration': 82.654, 'max_score': 264.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ264770.jpg'}, {'end': 428.7, 'src': 'embed', 'start': 395.675, 'weight': 0, 'content': [{'end': 400.477, 'text': "So now we're going to focus on that route of changing up the cursor.", 'start': 395.675, 'duration': 4.802}, {'end': 408.421, 'text': "So what we're going to do is we're going to add a div class over here of we'll call it cursor.", 'start': 401.037, 'duration': 7.384}, {'end': 419.313, 'text': "And it's just an empty div and this is gonna serve as the basis of the new cursor or a follow along cursor as you'll see.", 'start': 409.906, 'duration': 9.407}, {'end': 428.7, 'text': "So now what we'll do is I'm gonna go back here and we're gonna style up our cursor here.", 'start': 420.254, 'duration': 8.446}], 'summary': 'Adding a new cursor feature using a div class for styling.', 'duration': 33.025, 'max_score': 395.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ395675.jpg'}, {'end': 558.708, 'src': 'embed', 'start': 529.076, 'weight': 1, 'content': [{'end': 539.661, 'text': "And first we're going to create a constant of cursor cursor and then we'll use document dot query selector to select the class cursor,", 'start': 529.076, 'duration': 10.585}, {'end': 542.022, 'text': 'rather just like that.', 'start': 539.661, 'duration': 2.361}, {'end': 550.726, 'text': "Um, next on the document itself, we're going to add a event listener, and this is going to be on mouse move.", 'start': 542.782, 'duration': 7.944}, {'end': 558.708, 'text': 'So when the mouse moves and pass in E here, which returns the information about the mouse event specifically.', 'start': 550.766, 'duration': 7.942}], 'summary': 'Creating a cursor constant and adding a mouse move event listener to the document.', 'duration': 29.632, 'max_score': 529.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ529076.jpg'}], 'start': 264.77, 'title': 'Creating custom cursors with svg and javascript', 'summary': "Explains how to change the cursor to a custom svg graphic using the 'url' property and provides a demonstration with a logo.svg graphic. it also discusses creating a custom cursor using svg and javascript, emphasizing the importance of cursor size and providing a step-by-step guide on implementing it, including setting up the cursor div, styling it, and using javascript to track mouse movement and update the cursor position.", 'chapters': [{'end': 325.554, 'start': 264.77, 'title': 'Changing cursor to custom svg graphic', 'summary': "Explains how to change the cursor to a custom svg graphic using the 'url' property and provides a demonstration with a logo.svg graphic.", 'duration': 60.784, 'highlights': ["Using the 'url' property to change the cursor to a custom SVG graphic, such as 'images/custom.svg'.", 'Demonstrating the process by adding a logo.svg graphic and making it available for download.']}, {'end': 637.112, 'start': 325.594, 'title': 'Custom cursor with svg and javascript', 'summary': 'Discusses creating a custom cursor using svg and javascript, emphasizing the importance of cursor size and providing a step-by-step guide on implementing it, including setting up the cursor div, styling it, and using javascript to track mouse movement and update the cursor position.', 'duration': 311.518, 'highlights': ['The chapter emphasizes the importance of cursor size, recommending not to exceed 30-40 pixels due to limitations in scaling the cursor property.', 'The step-by-step guide on creating a custom cursor includes setting up a cursor div, styling it with specific properties like width, height, border, color, and position, and using JavaScript to track mouse movement and update the cursor position.', 'The use of JavaScript to track mouse movement and update the cursor position is demonstrated through the use of document.querySelector, event listener for mouse move, and setAttribute to adjust the style attribute for the cursor div based on the mouse position.']}], 'duration': 372.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ264770.jpg', 'highlights': ['The step-by-step guide on creating a custom cursor includes setting up a cursor div, styling it with specific properties like width, height, border, color, and position, and using JavaScript to track mouse movement and update the cursor position.', 'The use of JavaScript to track mouse movement and update the cursor position is demonstrated through the use of document.querySelector, event listener for mouse move, and setAttribute to adjust the style attribute for the cursor div based on the mouse position.', "Using the 'url' property to change the cursor to a custom SVG graphic, such as 'images/custom.svg'.", 'The chapter emphasizes the importance of cursor size, recommending not to exceed 30-40 pixels due to limitations in scaling the cursor property.', 'Demonstrating the process by adding a logo.svg graphic and making it available for download.']}, {'end': 1307.434, 'segs': [{'end': 696.443, 'src': 'embed', 'start': 667.381, 'weight': 1, 'content': [{'end': 671.763, 'text': 'If we just take a look at this, it returns a bunch of information.', 'start': 667.381, 'duration': 4.382}, {'end': 682.809, 'text': 'But we want, the one that we want is page Y and page X, which will return the location of the cursor on the page.', 'start': 672.143, 'duration': 10.666}, {'end': 688.512, 'text': "All right, so now what we'll do is, let's get rid of that.", 'start': 683.429, 'duration': 5.083}, {'end': 693.982, 'text': "And we'll get rid of that.", 'start': 693.141, 'duration': 0.841}, {'end': 696.443, 'text': 'All right.', 'start': 696.183, 'duration': 0.26}], 'summary': 'Extracts page y and page x to determine cursor location.', 'duration': 29.062, 'max_score': 667.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ667381.jpg'}, {'end': 767.488, 'src': 'heatmap', 'start': 737.268, 'weight': 1, 'content': [{'end': 746.714, 'text': 'So left e.page x, and then plus px, just like that.', 'start': 737.268, 'duration': 9.446}, {'end': 749.263, 'text': 'All right.', 'start': 748.803, 'duration': 0.46}, {'end': 756.685, 'text': 'So now we can see that it follows it around.', 'start': 750.443, 'duration': 6.242}, {'end': 762.747, 'text': "But it doesn't look quite right simply because it's not centered to where exactly the center of the mouse pointer.", 'start': 756.725, 'duration': 6.022}, {'end': 767.488, 'text': 'So what we can do to fix that is a little bit of math.', 'start': 763.627, 'duration': 3.861}], 'summary': 'Adjusting the position by a calculated amount improved centering for the mouse pointer.', 'duration': 30.22, 'max_score': 737.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ737268.jpg'}, {'end': 926.406, 'src': 'embed', 'start': 892.614, 'weight': 0, 'content': [{'end': 896.336, 'text': 'So now it has a nice little lag showing up.', 'start': 892.614, 'duration': 3.722}, {'end': 898.741, 'text': 'Very cool.', 'start': 898.2, 'duration': 0.541}, {'end': 901.283, 'text': 'So we can even do more.', 'start': 899.301, 'duration': 1.982}, {'end': 908.451, 'text': 'We can use this cursor now like any other regular CSS properties, and we can add animation to it, for instance.', 'start': 901.644, 'duration': 6.807}, {'end': 913.976, 'text': "So let's add an animation specifically to the cursor.", 'start': 909.051, 'duration': 4.925}, {'end': 915.558, 'text': "So we'll do animation.", 'start': 914.357, 'duration': 1.201}, {'end': 926.406, 'text': "And we'll do, we'll call it cursor anim with a 0.5 second animation, infinite, and it'll alternate between two states.", 'start': 916.819, 'duration': 9.587}], 'summary': 'Cursor animation added with 0.5s duration, infinite loop, and alternating states.', 'duration': 33.792, 'max_score': 892.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ892614.jpg'}, {'end': 1281.045, 'src': 'embed', 'start': 1256.626, 'weight': 2, 'content': [{'end': 1263.53, 'text': "So as you can see, there's a lot of interesting things that you can do with this, even a lot more than what I'm just showing here.", 'start': 1256.626, 'duration': 6.904}, {'end': 1276.177, 'text': 'But this should be a basic rundown of how you can use different methods of replacing the cursor and through just CSS alone, the cursor property.', 'start': 1263.97, 'duration': 12.207}, {'end': 1278.938, 'text': "Let's take this back to none.", 'start': 1276.197, 'duration': 2.741}, {'end': 1281.045, 'text': 'And there we go.', 'start': 1280.385, 'duration': 0.66}], 'summary': 'Demonstrates various methods of cursor replacement using css.', 'duration': 24.419, 'max_score': 1256.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ1256626.jpg'}], 'start': 637.172, 'title': 'Customizing mouse cursor', 'summary': 'Covers tracking mouse events, retrieving coordinates, custom cursor styling, animation, and customization using css and javascript, showcasing practical techniques and effects.', 'chapters': [{'end': 794.361, 'start': 637.172, 'title': 'Creating mouse tracking with javascript', 'summary': 'Explains how to track mouse events and retrieve the page x and y coordinates using javascript. it also demonstrates the use of css properties to position an element relative to the mouse pointer.', 'duration': 157.189, 'highlights': ['The tutorial demonstrates console logging mouse events to retrieve page X and Y coordinates, which provide the location of the cursor on the page.', "It explains the use of CSS properties, particularly setting the 'top' and 'left' values to position an element relative to the page Y and X coordinates retrieved from the mouse events.", 'The chapter also includes a discussion on adjusting the position of the element to center it relative to the mouse pointer through a simple mathematical calculation.']}, {'end': 1031.589, 'start': 794.521, 'title': 'Custom cursor styling and animation', 'summary': 'Explores creating a custom cursor with a lag effect, adding transition properties for smooth movement, and applying animation and styling to the cursor, demonstrating a pulse effect and after selector customization.', 'duration': 237.068, 'highlights': ['The chapter explores creating a custom cursor with a lag effect, adding transition properties for smooth movement, and applying animation and styling to the cursor, demonstrating a pulse effect and after selector customization.', 'To create a lag effect on the custom cursor, transition properties are added to the cursor element with a duration of 200 milliseconds and timing function ease out.', 'An animation is applied to the custom cursor, causing it to pulse in and out with a 0.5 second duration, creating an alternating effect between two states.', 'Styling is applied to the custom cursor using the after selector, which includes a thicker gray border, border radius, and opacity, with adjustments made to achieve the desired appearance.']}, {'end': 1307.434, 'start': 1032.589, 'title': 'Customizing cursor with css and javascript', 'summary': 'Demonstrates how to customize the cursor using css animations and javascript, including adding an expand class on click, and using settimeout to remove the class after 0.5 seconds, showcasing the versatility of cursor customization.', 'duration': 274.845, 'highlights': ['The chapter demonstrates how to customize the cursor using CSS animations and JavaScript. The transcript provides a tutorial on customizing the cursor using CSS animations and JavaScript, showcasing various techniques for cursor customization.', 'Adding an expand class on click and using setTimeout to remove the class after 0.5 seconds. The tutorial explains how to add an expand class to the cursor on click and utilize setTimeout to automatically remove the class after 0.5 seconds, demonstrating practical implementation of cursor customization.', 'Showcasing the versatility of cursor customization. The transcript highlights the versatility of cursor customization, indicating that there are numerous possibilities beyond the demonstrated techniques using CSS and JavaScript.']}], 'duration': 670.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rfpRZ2t_BrQ/pics/rfpRZ2t_BrQ637172.jpg', 'highlights': ['The chapter explores creating a custom cursor with a lag effect, adding transition properties for smooth movement, and applying animation and styling to the cursor, demonstrating a pulse effect and after selector customization.', 'The tutorial demonstrates console logging mouse events to retrieve page X and Y coordinates, which provide the location of the cursor on the page.', 'The chapter demonstrates how to customize the cursor using CSS animations and JavaScript. The transcript provides a tutorial on customizing the cursor using CSS animations and JavaScript, showcasing various techniques for cursor customization.']}], 'highlights': ['The chapter explores creating a custom cursor with a lag effect, adding transition properties for smooth movement, and applying animation and styling to the cursor, demonstrating a pulse effect and after selector customization.', 'The step-by-step guide on creating a custom cursor includes setting up a cursor div, styling it with specific properties like width, height, border, color, and position, and using JavaScript to track mouse movement and update the cursor position.', 'The use of JavaScript to track mouse movement and update the cursor position is demonstrated through the use of document.querySelector, event listener for mouse move, and setAttribute to adjust the style attribute for the cursor div based on the mouse position.', 'The chapter discusses customizing the cursor using pure CSS and JavaScript, exploring ways to change the cursor appearance and behavior.', "The chapter demonstrates setting a custom cursor in CSS using the 'cursor' property, showing the process of changing the cursor to a specific style like 'cell'.", 'The presenter prompts audience interaction by asking for opinions on the use case for customizing the cursor.']}