title
Awesome Cursor Animation With CSS & Javascript!
description
Today we are going to take a look on different ways we can use the cursor to interact with our website.
We will be writing custom css and javascript to create some animations.
Check out my course here!
https://developedbyed.com/
All the code will be available on patreon.
🎁Support me on Patreon for exclusive episodes, discord and more!
https://www.patreon.com/dev_ed
🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/
Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
#programming #animations
detail
{'title': 'Awesome Cursor Animation With CSS & Javascript!', 'heatmap': [{'end': 423.672, 'start': 379.255, 'weight': 0.716}, {'end': 480.324, 'start': 443.948, 'weight': 0.812}, {'end': 614.771, 'start': 585.452, 'weight': 1}], 'summary': 'Tutorial covers javascript hover effects for cursor customization, web layout creation with html and css, including font addition, navigation bar creation, content insertion, styling with css flexbox properties, and creating a custom mouse cursor using javascript.', 'chapters': [{'end': 46.86, 'segs': [{'end': 46.86, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 0.61, 'text': 'Look at us.', 'start': 0.129, 'duration': 0.481}, {'end': 3.194, 'text': "We are all dressed fancy for today's episode.", 'start': 0.67, 'duration': 2.524}, {'end': 9.142, 'text': "How you doing, my gorgeous friends on the internet? In this episode, we're going to take a look at some hover effects done in JavaScript.", 'start': 3.234, 'duration': 5.908}, {'end': 11.846, 'text': "You know how we have our cursor? We don't want that.", 'start': 9.282, 'duration': 2.564}, {'end': 14.149, 'text': 'We want something stylish and good looking.', 'start': 11.926, 'duration': 2.223}, {'end': 14.971, 'text': 'Get out of here.', 'start': 14.35, 'duration': 0.621}, {'end': 16.332, 'text': 'Get out of here.', 'start': 15.752, 'duration': 0.58}, {'end': 25.181, 'text': "And before we get going, I want to thank today's sponsor, Squarespace.", 'start': 21.954, 'duration': 3.227}, {'end': 26.645, 'text': 'I cannot say that seriously.', 'start': 25.302, 'duration': 1.343}, {'end': 28.369, 'text': "I'm joking, there's no sponsor.", 'start': 27.025, 'duration': 1.344}, {'end': 30.453, 'text': 'Well, we have this wifi symbol.', 'start': 28.409, 'duration': 2.044}, {'end': 34.05, 'text': 'Wow, look at all the colors.', 'start': 32.389, 'duration': 1.661}, {'end': 35.171, 'text': "It's like a rainbow.", 'start': 34.291, 'duration': 0.88}, {'end': 36.192, 'text': 'Hello there.', 'start': 35.491, 'duration': 0.701}, {'end': 37.873, 'text': "Okay, let's get started.", 'start': 36.332, 'duration': 1.541}, {'end': 46.86, 'text': "So what we're gonna do is just open up our editor, and here I just have three files and I have a picture, just a random picture,", 'start': 37.893, 'duration': 8.967}], 'summary': 'The episode discusses creating hover effects in javascript and features a fake sponsor mention.', 'duration': 46.731, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w129.jpg'}], 'start': 0.129, 'title': 'Javascript hover effects', 'summary': 'Explores javascript hover effects for cursor customization, mentions a fake sponsor, and discusses the setup for creating hover effects with a random picture.', 'chapters': [{'end': 46.86, 'start': 0.129, 'title': 'Javascript hover effects', 'summary': 'Explores javascript hover effects for cursor customization and mentions a fake sponsor. it also briefly discusses the setup for creating hover effects in javascript with a random picture.', 'duration': 46.731, 'highlights': ['The chapter explores JavaScript hover effects for cursor customization.', 'Mentions a fake sponsor, Squarespace, before proceeding with the main content.', 'Briefly discusses the setup for creating hover effects in JavaScript with a random picture.']}], 'duration': 46.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w129.jpg', 'highlights': ['The chapter explores JavaScript hover effects for cursor customization.', 'Mentions a fake sponsor, Squarespace, before proceeding with the main content.', 'Briefly discusses the setup for creating hover effects in JavaScript with a random picture.']}, {'end': 527.375, 'segs': [{'end': 83.51, 'src': 'embed', 'start': 46.86, 'weight': 0, 'content': [{'end': 49.142, 'text': 'because I wanna show you something cool with this as well.', 'start': 46.86, 'duration': 2.282}, {'end': 57.048, 'text': 'So I just linked a font here and just the JavaScript and the style.css, which are just empty.', 'start': 49.743, 'duration': 7.305}, {'end': 61.092, 'text': "I just added the font size here And here, it's empty again.", 'start': 57.169, 'duration': 3.923}, {'end': 70.099, 'text': "Poppins! Okay, so what we're gonna do is just add something in here just so we can try out the effect.", 'start': 61.112, 'duration': 8.987}, {'end': 73.382, 'text': "So what we're gonna do is just create a simple nav.", 'start': 71.06, 'duration': 2.322}, {'end': 83.51, 'text': "So let me go here and just say nav, and then we're gonna give this a h1, dev ed, Okay.", 'start': 73.923, 'duration': 9.587}], 'summary': "Demonstrating font linking and adding a simple nav with h1 'dev ed'.", 'duration': 36.65, 'max_score': 46.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w46860.jpg'}, {'end': 137.04, 'src': 'embed', 'start': 108.683, 'weight': 3, 'content': [{'end': 112.247, 'text': "So I'm just gonna create another section for this section like this.", 'start': 108.683, 'duration': 3.564}, {'end': 119.015, 'text': "And here I'm gonna add, let's just add some text or yeah, let's just add something in here.", 'start': 112.467, 'duration': 6.548}, {'end': 122.339, 'text': "I'm gonna create a div with a class of front cover.", 'start': 119.035, 'duration': 3.304}, {'end': 126.238, 'text': "I'm just going to drop in this image that I have.", 'start': 123.717, 'duration': 2.521}, {'end': 131.019, 'text': "Okay After this, let's go outside of this div.", 'start': 126.838, 'duration': 4.181}, {'end': 137.04, 'text': "I'm just going to create another class of FrontCover, and this is FrontDescription.", 'start': 131.479, 'duration': 5.561}], 'summary': 'Creating a front cover with an image and description.', 'duration': 28.357, 'max_score': 108.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w108683.jpg'}, {'end': 201.094, 'src': 'embed', 'start': 167.819, 'weight': 1, 'content': [{'end': 171.582, 'text': "Now what we're going to do is kind of style this up a bit so it doesn't look that terrible.", 'start': 167.819, 'duration': 3.763}, {'end': 173.463, 'text': "So let's go to style.css.", 'start': 171.742, 'duration': 1.721}, {'end': 177.145, 'text': "In here, I'm just going to create a super short nav.", 'start': 174.263, 'duration': 2.882}, {'end': 182.911, 'text': "So let's do display flex, justify content space between.", 'start': 178.486, 'duration': 4.425}, {'end': 188.638, 'text': "I have a few tutorials on this if you're interested in more in depth how to make this look nice.", 'start': 182.931, 'duration': 5.707}, {'end': 193.363, 'text': "But we're just gonna kinda breeze through it.", 'start': 189.699, 'duration': 3.664}, {'end': 201.094, 'text': "So we're just gonna add a min height, align item center, and margin auto like that.", 'start': 193.703, 'duration': 7.391}], 'summary': 'Styling the navigation with display flex and justify content space between in style.css.', 'duration': 33.275, 'max_score': 167.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w167819.jpg'}, {'end': 348.363, 'src': 'embed', 'start': 325.631, 'weight': 4, 'content': [{'end': 333.313, 'text': "Okay, do we need anything else? Let's kind of make this in JavaScript right now, and then we're gonna come back and see if everything works fine.", 'start': 325.631, 'duration': 7.682}, {'end': 339.474, 'text': "So again, this is gonna be, it's not that difficult to make this, but it's pretty cool.", 'start': 333.793, 'duration': 5.681}, {'end': 348.363, 'text': "So in here, what we're gonna do is just get the mouse cursor and set this equal to document.querySelector, and we're gonna get that mouse.", 'start': 339.934, 'duration': 8.429}], 'summary': 'Creating a javascript function to retrieve the mouse cursor using document.queryselector.', 'duration': 22.732, 'max_score': 325.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w325631.jpg'}, {'end': 437.723, 'src': 'heatmap', 'start': 379.255, 'weight': 5, 'content': [{'end': 382.556, 'text': 'So whenever our mouse moves, we can run a function.', 'start': 379.255, 'duration': 3.301}, {'end': 383.936, 'text': "I'm gonna call this cursor.", 'start': 382.576, 'duration': 1.36}, {'end': 391.778, 'text': "Okay, so down here, we can create the function cursor, and we're gonna have access to something called E, which is the event.", 'start': 384.696, 'duration': 7.082}, {'end': 404.668, 'text': "And in here, if we console log the E, you're gonna see that we can get back Oh, there we go, it's hidden.", 'start': 392.998, 'duration': 11.67}, {'end': 406.309, 'text': 'Why are you hidden? There we go.', 'start': 404.888, 'duration': 1.421}, {'end': 412.393, 'text': "We're gonna get back this mouse event, and this mouse event has a bunch of crap on it.", 'start': 407.63, 'duration': 4.763}, {'end': 423.672, 'text': "But the ones we're gonna use is, we're gonna use, what are we gonna use? Cannot find it.", 'start': 413.193, 'duration': 10.479}, {'end': 426.575, 'text': 'Page X, here we go, page X and page Y.', 'start': 423.973, 'duration': 2.602}, {'end': 430.177, 'text': 'And this is gonna give us the exact coordinate of where our mouse position is.', 'start': 426.575, 'duration': 3.602}, {'end': 437.723, 'text': "Okay, so basically what we're gonna do is we're gonna get the mouse cursor, dot style, dot top.", 'start': 431.178, 'duration': 6.545}], 'summary': 'Creating a function to track mouse movement and retrieve mouse coordinates using event object, particularly pagex and pagey.', 'duration': 30.093, 'max_score': 379.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w379255.jpg'}, {'end': 480.324, 'src': 'heatmap', 'start': 443.948, 'weight': 0.812, 'content': [{'end': 448.071, 'text': "And we're gonna have to add a plus pixels like this to it.", 'start': 443.948, 'duration': 4.123}, {'end': 450.152, 'text': "And we're gonna do the same thing.", 'start': 448.691, 'duration': 1.461}, {'end': 454.57, 'text': 'dot style dot left to the horizontal one.', 'start': 451.448, 'duration': 3.122}, {'end': 458.112, 'text': 'So page X plus pixels.', 'start': 454.71, 'duration': 3.402}, {'end': 460.633, 'text': 'Save Take a look.', 'start': 458.832, 'duration': 1.801}, {'end': 462.434, 'text': 'All right.', 'start': 462.074, 'duration': 0.36}, {'end': 463.435, 'text': 'So this works.', 'start': 462.734, 'duration': 0.701}, {'end': 465.276, 'text': "Now there's a little problem here.", 'start': 463.535, 'duration': 1.741}, {'end': 468.698, 'text': "As you can see, that's not exactly on top.", 'start': 465.876, 'duration': 2.822}, {'end': 480.324, 'text': 'So to fix that, we can go back to style.css here and we can just add a transform translate minus 50 minus 50.', 'start': 469.338, 'duration': 10.986}], 'summary': 'Adding pixels and adjusting position for better alignment in the code.', 'duration': 36.376, 'max_score': 443.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w443948.jpg'}], 'start': 46.86, 'title': 'Web layout and styling', 'summary': 'Covers creating a web layout with html and css, including font addition, navigation bar creation, and content insertion. it also includes styling a navigation bar using css flexbox properties and creating a custom mouse cursor using javascript, with practical guidance and code snippets provided.', 'chapters': [{'end': 167.059, 'start': 46.86, 'title': 'Creating web layout with html and css', 'summary': 'Demonstrates the process of creating a web layout using html and css, including adding a font, creating a navigation bar, and inserting content, with a focus on creating a visually appealing web page.', 'duration': 120.199, 'highlights': ['The process of creating a web layout using HTML and CSS, including adding a font, creating a navigation bar, and inserting content, is demonstrated.', "The addition of the font 'Poppins' and the creation of a simple navigation bar with 'home', 'contact', and 'services' links are highlighted.", "The demonstration includes the creation of div elements with classes for 'front cover' and 'front description', along with the insertion of text and an image to enhance the web layout."]}, {'end': 527.375, 'start': 167.819, 'title': 'Styling navigation and creating mouse cursor', 'summary': 'Covers styling a navigation bar using css flexbox properties, creating a custom mouse cursor using javascript, and addressing issues with cursor selection and position, providing practical guidance and code snippets for implementation.', 'duration': 359.556, 'highlights': ['The chapter covers styling a navigation bar using CSS flexbox properties, providing practical guidance and code snippets for implementation.', 'The tutorial briefly touches on creating a custom mouse cursor using JavaScript, highlighting the process of capturing mouse events and dynamically updating the cursor position.', 'The transcript provides insights into addressing issues with cursor selection and position, offering solutions to make the cursor selectable and positioning it accurately on the screen.']}], 'duration': 480.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w46860.jpg', 'highlights': ['The process of creating a web layout using HTML and CSS, including adding a font, creating a navigation bar, and inserting content, is demonstrated.', 'The chapter covers styling a navigation bar using CSS flexbox properties, providing practical guidance and code snippets for implementation.', "The addition of the font 'Poppins' and the creation of a simple navigation bar with 'home', 'contact', and 'services' links are highlighted.", "The demonstration includes the creation of div elements with classes for 'front cover' and 'front description', along with the insertion of text and an image to enhance the web layout.", 'The tutorial briefly touches on creating a custom mouse cursor using JavaScript, highlighting the process of capturing mouse events and dynamically updating the cursor position.', 'The transcript provides insights into addressing issues with cursor selection and position, offering solutions to make the cursor selectable and positioning it accurately on the screen.']}, {'end': 1112.473, 'segs': [{'end': 598.977, 'src': 'embed', 'start': 561.167, 'weight': 0, 'content': [{'end': 565.268, 'text': "So basically, we're looping over every link that we have on the page.", 'start': 561.167, 'duration': 4.101}, {'end': 571.51, 'text': 'And for each link, we want to see when the user mouse is over it and when the mouse leaves.', 'start': 565.368, 'duration': 6.142}, {'end': 574.891, 'text': "And based on that, we're going to add a class and remove a class.", 'start': 571.65, 'duration': 3.241}, {'end': 582.51, 'text': "So on the link, we're gonna say add event listener, and we're gonna say mouse over like this.", 'start': 575.928, 'duration': 6.582}, {'end': 584.711, 'text': "So we're gonna run a function again in here.", 'start': 582.53, 'duration': 2.181}, {'end': 598.977, 'text': "So basically what we wanna do is on the mouse cursor, we wanna say class list add, and we're gonna create something called link row like that.", 'start': 585.452, 'duration': 13.525}], 'summary': 'Looping through links to add and remove classes based on mouse events.', 'duration': 37.81, 'max_score': 561.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w561167.jpg'}, {'end': 614.771, 'src': 'heatmap', 'start': 585.452, 'weight': 1, 'content': [{'end': 598.977, 'text': "So basically what we wanna do is on the mouse cursor, we wanna say class list add, and we're gonna create something called link row like that.", 'start': 585.452, 'duration': 13.525}, {'end': 602.598, 'text': "So let's go back here and create the link row.", 'start': 600.357, 'duration': 2.241}, {'end': 614.771, 'text': "All we have to do is just say link grow, and we're gonna say transform scale this up by two.", 'start': 604.4, 'duration': 10.371}], 'summary': "Add 'link row' class to mouse cursor, then scale it up by two.", 'duration': 29.319, 'max_score': 585.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w585452.jpg'}, {'end': 735.664, 'src': 'embed', 'start': 707.425, 'weight': 1, 'content': [{'end': 710.288, 'text': 'I just want the background and the scale to transition.', 'start': 707.425, 'duration': 2.863}, {'end': 711.189, 'text': "So here's a cool trick.", 'start': 710.308, 'duration': 0.881}, {'end': 713.791, 'text': 'You can add transition all to everything.', 'start': 711.529, 'duration': 2.262}, {'end': 720.066, 'text': 'You can add transition all to everything, but then modify the things that you want.', 'start': 716.141, 'duration': 3.925}, {'end': 724.03, 'text': 'So I can just say transition property.', 'start': 720.086, 'duration': 3.944}, {'end': 729.316, 'text': 'And with this, I can just explicitly say what I want to be animated.', 'start': 724.831, 'duration': 4.485}, {'end': 735.664, 'text': 'So background, background like this and comma transform.', 'start': 729.396, 'duration': 6.268}], 'summary': "Use 'transition all' to animate background and transform on scale transition.", 'duration': 28.239, 'max_score': 707.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w707425.jpg'}, {'end': 850.514, 'src': 'embed', 'start': 797.366, 'weight': 2, 'content': [{'end': 799.487, 'text': 'I want it to be perfectly on top.', 'start': 797.366, 'duration': 2.121}, {'end': 804.57, 'text': "So whenever I'm in the middle of this, I want the bubble to be around it as well.", 'start': 799.807, 'duration': 4.763}, {'end': 810.313, 'text': 'So to fix that, all you need to do is kind of mess around with the transform origin.', 'start': 805.37, 'duration': 4.943}, {'end': 818.095, 'text': 'So what we need to do is come here and say transform origin, which is right here.', 'start': 811.013, 'duration': 7.082}, {'end': 823.978, 'text': 'And we can set this to 100% on the left and right and 100% up and down.', 'start': 819.035, 'duration': 4.943}, {'end': 830.721, 'text': "So now you're going to see that nothing really modifies itself.", 'start': 824.798, 'duration': 5.923}, {'end': 835.423, 'text': "It doesn't go down, it doesn't go up, it kind of stays where it's supposed to stay.", 'start': 831.441, 'duration': 3.982}, {'end': 840.546, 'text': 'Okay, now next step is to kind of just change the text to white.', 'start': 836.344, 'duration': 4.202}, {'end': 844.308, 'text': 'So we can make a new class here called hovered link.', 'start': 841.146, 'duration': 3.162}, {'end': 847.833, 'text': 'and we can just say color white.', 'start': 846.533, 'duration': 1.3}, {'end': 850.514, 'text': 'You can do more to it, I just kept it simple.', 'start': 848.613, 'duration': 1.901}], 'summary': 'Adjust transform origin to 100% for stability, change text to white for better visibility.', 'duration': 53.148, 'max_score': 797.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w797366.jpg'}, {'end': 1013.025, 'src': 'embed', 'start': 955.343, 'weight': 4, 'content': [{'end': 960.467, 'text': 'So to fix that, all you need to do is add a position relative.', 'start': 955.343, 'duration': 5.124}, {'end': 962.149, 'text': 'Hit save.', 'start': 960.487, 'duration': 1.662}, {'end': 963.71, 'text': "And also let's put it behind.", 'start': 962.269, 'duration': 1.441}, {'end': 965.932, 'text': "So I'm going to say z index minus three.", 'start': 963.79, 'duration': 2.142}, {'end': 969.438, 'text': "Okay So now it's this one's on top.", 'start': 967.597, 'duration': 1.841}, {'end': 972.34, 'text': "Here's another, another cool property that you can do.", 'start': 969.918, 'duration': 2.422}, {'end': 986.828, 'text': 'You can go up to the cursor and you can say, uh, bank drop filter, and you can add gray scale like this and save.', 'start': 972.5, 'duration': 14.328}, {'end': 987.848, 'text': 'Take a look.', 'start': 987.408, 'duration': 0.44}, {'end': 994.124, 'text': 'Now, when we hover over it, basically that turns to grayscale.', 'start': 987.888, 'duration': 6.236}, {'end': 995.709, 'text': 'So whatever is behind it.', 'start': 994.345, 'duration': 1.364}, {'end': 998.596, 'text': 'Now this only works, as you can see, it works on images.', 'start': 995.849, 'duration': 2.747}, {'end': 1001.536, 'text': 'Boom, take a look at that.', 'start': 1000.455, 'duration': 1.081}, {'end': 1007.44, 'text': "So maybe what you're gonna do is when you hover over the image, you can also add that in JavaScript if you want.", 'start': 1001.576, 'duration': 5.864}, {'end': 1013.025, 'text': "This gets even bigger and then you have this kind of awesome filter that's happening behind.", 'start': 1008.041, 'duration': 4.984}], 'summary': 'Adding position relative and z-index creates visual effects like grayscale filter on images.', 'duration': 57.682, 'max_score': 955.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w955343.jpg'}, {'end': 1090.293, 'src': 'embed', 'start': 1059.505, 'weight': 6, 'content': [{'end': 1061.287, 'text': "All right, so that's gonna be it for today's episode.", 'start': 1059.505, 'duration': 1.782}, {'end': 1063.389, 'text': 'Thank you so much for being here with me and watching.', 'start': 1061.307, 'duration': 2.082}, {'end': 1070.918, 'text': "At the end of the month, I'm gonna start working on the JavaScript course, which is gonna be very exciting but very difficult,", 'start': 1064.23, 'duration': 6.688}, {'end': 1073.3, 'text': 'because there are so many awesome courses on JavaScript.', 'start': 1070.918, 'duration': 2.382}, {'end': 1075.923, 'text': "So we're gonna have to be unique and special.", 'start': 1073.821, 'duration': 2.102}, {'end': 1078.765, 'text': "So that's coming up very, very soon.", 'start': 1076.884, 'duration': 1.881}, {'end': 1083.869, 'text': "I'm mostly doing game development right now and Blender and stuff like that,", 'start': 1079.406, 'duration': 4.463}, {'end': 1090.293, 'text': "because that's gonna come after I finish these JavaScript courses Node and React or Vue or whatever.", 'start': 1083.869, 'duration': 6.424}], 'summary': 'Upcoming javascript course, aiming for uniqueness, after finishing node and react/vue.', 'duration': 30.788, 'max_score': 1059.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w1059505.jpg'}], 'start': 528.196, 'title': 'Styling web elements and animating navigation links', 'summary': 'Demonstrates css styling techniques such as text color change and z-index adjustment, and animating navigation links through event listeners and transition properties. it also discusses future plans for a javascript course and game development.', 'chapters': [{'end': 823.978, 'start': 528.196, 'title': 'Animating navigation links', 'summary': 'Demonstrates how to animate navigation links by adding an event listener for mouse over and mouse leave, using transition properties to create smooth animations and adjusting transform origin to position the animation bubble properly.', 'duration': 295.782, 'highlights': ['The chapter demonstrates how to add event listeners for mouse over and mouse leave to animate navigation links, providing interactivity for users.', 'The tutorial elucidates the use of transition properties in CSS to create smooth animations, enhancing the visual appeal of the navigation links.', 'The speaker explains the technique of adjusting the transform origin to position the animation bubble properly, ensuring it appears in the intended location during the animation.']}, {'end': 1112.473, 'start': 824.798, 'title': 'Styling web elements and future plans', 'summary': 'Demonstrates various css styling techniques, including changing text color, adjusting z-index, and applying filter effects to images, while also mentioning upcoming plans for javascript course and game development.', 'duration': 287.675, 'highlights': ["The chapter demonstrates how to change the text color to white by creating a new class called 'hovered link' and setting the color to white.", 'It highlights the process of adjusting the z-index to position elements, such as setting a z-index of minus three to place an image on top.', "The transcript includes a demonstration of applying filter effects to images using the 'backdrop filter' property, such as adding a grayscale effect and blur effect.", 'The speaker mentions plans to start working on a JavaScript course at the end of the month, followed by game development and other web development projects.', 'The speaker expresses excitement about upcoming content on the channel, including JavaScript courses, game development, and tutorials on web development.']}], 'duration': 584.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/TpwpAYi-p2w/pics/TpwpAYi-p2w528196.jpg', 'highlights': ['The chapter demonstrates how to add event listeners for mouse over and mouse leave to animate navigation links, providing interactivity for users.', 'The tutorial elucidates the use of transition properties in CSS to create smooth animations, enhancing the visual appeal of the navigation links.', 'The technique of adjusting the transform origin to position the animation bubble properly is explained, ensuring it appears in the intended location during the animation.', "The chapter demonstrates how to change the text color to white by creating a new class called 'hovered link' and setting the color to white.", 'It highlights the process of adjusting the z-index to position elements, such as setting a z-index of minus three to place an image on top.', "The transcript includes a demonstration of applying filter effects to images using the 'backdrop filter' property, such as adding a grayscale effect and blur effect.", 'The speaker mentions plans to start working on a JavaScript course at the end of the month, followed by game development and other web development projects.', 'The speaker expresses excitement about upcoming content on the channel, including JavaScript courses, game development, and tutorials on web development.']}], 'highlights': ['The chapter explores JavaScript hover effects for cursor customization.', 'The process of creating a web layout using HTML and CSS is demonstrated.', 'The chapter demonstrates how to add event listeners for mouse over and mouse leave to animate navigation links.', 'The tutorial elucidates the use of transition properties in CSS to create smooth animations.', "The addition of the font 'Poppins' and the creation of a simple navigation bar with 'home', 'contact', and 'services' links are highlighted.", 'The chapter covers styling a navigation bar using CSS flexbox properties.', "The demonstration includes the creation of div elements with classes for 'front cover' and 'front description', along with the insertion of text and an image to enhance the web layout.", 'The technique of adjusting the transform origin to position the animation bubble properly is explained.', "The transcript includes a demonstration of applying filter effects to images using the 'backdrop filter' property.", 'The speaker mentions plans to start working on a JavaScript course at the end of the month, followed by game development and other web development projects.']}