title
Javascript Animated Navbar Tutorial

description
Have you every wanted to create an awesome animated navbar with javascript? no? oh well...this is akward. All jokes aside we will be looking at making a navbar with html and css and then using the intersection observer in javascript to help us create this effect. Get my courses here https://developedbyed.com/ 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. 🎁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/ #programming #javascript

detail
{'title': 'Javascript Animated Navbar Tutorial', 'heatmap': [{'end': 627.386, 'start': 594.638, 'weight': 0.875}, {'end': 1033.672, 'start': 992.135, 'weight': 0.978}, {'end': 1093.396, 'start': 1075.089, 'weight': 0.82}, {'end': 1402.917, 'start': 1383.03, 'weight': 0.743}, {'end': 1547.251, 'start': 1523.75, 'weight': 1}], 'summary': 'Learn to create dynamic navigation in javascript and css emphasizing simplicity and user engagement, style ui with gradients and font, customize elements using position and z index, implement intersection observer for element activation, and manipulate dom for seamless transitions, as well as dynamically adjust and style bubbles based on text content.', 'chapters': [{'end': 370.679, 'segs': [{'end': 113.023, 'src': 'embed', 'start': 39.844, 'weight': 0, 'content': [{'end': 40.865, 'text': 'Take a look right here.', 'start': 39.844, 'duration': 1.021}, {'end': 45.589, 'text': "What we're going to do is create this simple page with different sections and, basically,", 'start': 40.905, 'duration': 4.684}, {'end': 50.012, 'text': 'the nav is going to update depending on which section you are on.', 'start': 45.589, 'duration': 4.423}, {'end': 51.934, 'text': "So it's going to do a squiggly and wiggly.", 'start': 50.033, 'duration': 1.901}, {'end': 55.737, 'text': "Now the cool part about this is we're going to use something new in JavaScript.", 'start': 52.214, 'duration': 3.523}, {'end': 57.439, 'text': "We're not going to be using the scroll events.", 'start': 55.777, 'duration': 1.662}, {'end': 58.6, 'text': 'Nobody likes that.', 'start': 57.799, 'duration': 0.801}, {'end': 59.3, 'text': 'Get out of here.', 'start': 58.64, 'duration': 0.66}, {'end': 66.987, 'text': "We're going to use the hidden ninja ninjutsu secrets and the books of the ninjas.", 'start': 59.961, 'duration': 7.026}, {'end': 77.264, 'text': "Naruto! Also, if you wanna see more JavaScript tutorials, make sure to write it in the comments down below and I'll make sure to delete it.", 'start': 70.421, 'duration': 6.843}, {'end': 79.925, 'text': "Let's get into the episode.", 'start': 78.704, 'duration': 1.221}, {'end': 82.306, 'text': "Okay, so let's get started now.", 'start': 80.305, 'duration': 2.001}, {'end': 84.466, 'text': 'This is really not that hard to make.', 'start': 82.366, 'duration': 2.1}, {'end': 88.588, 'text': 'I kind of accidentally stumbled upon this by luck.', 'start': 85.047, 'duration': 3.541}, {'end': 90.509, 'text': 'I was just messing around with something.', 'start': 88.688, 'duration': 1.821}, {'end': 92.489, 'text': "So it's really not that difficult.", 'start': 90.949, 'duration': 1.54}, {'end': 95.09, 'text': "I would say it's like 20% luck, 50% skill, 40% concentrated power and will.", 'start': 92.509, 'duration': 2.581}, {'end': 105.677, 'text': "Okay, so what we're going to do is I just have a HTML here, a style.css and an app.js.", 'start': 99.452, 'duration': 6.225}, {'end': 111.182, 'text': 'Okay, just some basic margin removals, the yada yada, the classical stuff that we do.', 'start': 105.957, 'duration': 5.225}, {'end': 113.023, 'text': 'Okay, so everything is empty.', 'start': 111.422, 'duration': 1.601}], 'summary': 'Creating a simple page with dynamic navigation using new javascript techniques, 20% luck, 50% skill, 40% power.', 'duration': 73.179, 'max_score': 39.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE39844.jpg'}, {'end': 172.155, 'src': 'embed', 'start': 138.66, 'weight': 4, 'content': [{'end': 142.442, 'text': "And we're going to create a nav inside here with a H1 of dev ed.", 'start': 138.66, 'duration': 3.782}, {'end': 147.525, 'text': "And then I'm going to do a UL with an LI, A, woo.", 'start': 143.343, 'duration': 4.182}, {'end': 154.04, 'text': "Okay, and here what I'm gonna do is just say home project and like contact or something.", 'start': 148.516, 'duration': 5.524}, {'end': 160.746, 'text': 'Home project contact.', 'start': 155.261, 'duration': 5.485}, {'end': 166.33, 'text': "Okay, and there's one additional thing I'm gonna add here.", 'start': 162.928, 'duration': 3.402}, {'end': 172.155, 'text': "I'm gonna go here to the a tag and I'm gonna say data dash like that page.", 'start': 166.911, 'duration': 5.244}], 'summary': 'Creating a navigation with h1 of dev ed and ul with home, project, and contact links.', 'duration': 33.495, 'max_score': 138.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE138660.jpg'}, {'end': 342.243, 'src': 'embed', 'start': 306.518, 'weight': 5, 'content': [{'end': 310.198, 'text': "yeah, baby, this doesn't work every time.", 'start': 306.518, 'duration': 3.68}, {'end': 311.779, 'text': 'okay, header.', 'start': 310.198, 'duration': 1.581}, {'end': 312.859, 'text': "so here's what i want to do.", 'start': 311.779, 'duration': 1.08}, {'end': 313.979, 'text': 'i want to grab the header.', 'start': 312.859, 'duration': 1.12}, {'end': 315.819, 'text': "i'm just going to add a box shadow to it.", 'start': 313.979, 'duration': 1.84}, {'end': 326.321, 'text': 'this is going to be 0 pixels on the x, y on the x, 3 pixels on the y and 10 pixel blur.', 'start': 315.819, 'duration': 10.502}, {'end': 328.522, 'text': "i'm gonna just do an rgba.", 'start': 326.321, 'duration': 2.201}, {'end': 335.174, 'text': "i'm gonna say black, black, black, Okay.", 'start': 328.522, 'duration': 6.652}, {'end': 341.722, 'text': 'And then this one is going to be the, how the opacity, okay.', 'start': 337.236, 'duration': 4.486}, {'end': 342.243, 'text': 'The alpha.', 'start': 341.742, 'duration': 0.501}], 'summary': 'Adding box shadow to the header with 0px on x, 3px on y, and 10px blur.', 'duration': 35.725, 'max_score': 306.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE306518.jpg'}], 'start': 6.65, 'title': 'Creating dynamic navigation in javascript and css', 'summary': 'Introduces creating a simple web page with dynamic navigation using new javascript techniques, emphasizing simplicity, and potential user engagement. it also demonstrates creating a simple navigation with header, nav, and sections, and applying css styling with box shadow and position sticky.', 'chapters': [{'end': 113.023, 'start': 6.65, 'title': 'Creating dynamic navigation in javascript', 'summary': 'Introduces creating a simple web page with dynamic navigation using new javascript techniques, while emphasizing the simplicity of the process and the potential for user engagement through comments.', 'duration': 106.373, 'highlights': ['The chapter introduces creating a simple web page with dynamic navigation using new JavaScript techniques.', 'The speaker emphasizes the simplicity of the process and mentions stumbling upon the method by luck.', 'The potential for user engagement is highlighted through the encouragement to request more JavaScript tutorials in the comments.']}, {'end': 370.679, 'start': 113.864, 'title': 'Creating a simple navigation and styling with css', 'summary': 'Demonstrates creating a simple navigation with a header, nav, and sections, and applying css styling with box shadow and position sticky.', 'duration': 256.815, 'highlights': ['The chapter demonstrates creating a simple navigation with a header, nav, and sections, and applying CSS styling with box shadow and position sticky.', 'The speaker explains the process of adding a simple navigation with a header, nav, and sections, including the use of data attributes to sync the navigation and sections.', 'The speaker provides a detailed explanation of applying CSS styling to the header, including adding a box shadow with specific parameters and making the position sticky for the header.']}], 'duration': 364.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE6650.jpg', 'highlights': ['The chapter introduces creating a simple web page with dynamic navigation using new JavaScript techniques.', 'The potential for user engagement is highlighted through the encouragement to request more JavaScript tutorials in the comments.', 'The speaker emphasizes the simplicity of the process and mentions stumbling upon the method by luck.', 'The chapter demonstrates creating a simple navigation with a header, nav, and sections, and applying CSS styling with box shadow and position sticky.', 'The speaker explains the process of adding a simple navigation with a header, nav, and sections, including the use of data attributes to sync the navigation and sections.', 'The speaker provides a detailed explanation of applying CSS styling to the header, including adding a box shadow with specific parameters and making the position sticky for the header.']}, {'end': 561.28, 'segs': [{'end': 561.28, 'src': 'embed', 'start': 422.106, 'weight': 0, 'content': [{'end': 426.927, 'text': "let's grab the ul as well, so both of them just gonna add a font size to these 1.5.", 'start': 422.106, 'duration': 4.821}, {'end': 435.543, 'text': "rem. okay, Next up I'm going to grab the navh1 and the navul.", 'start': 426.927, 'duration': 8.616}, {'end': 437.243, 'text': 'Actually, wait.', 'start': 435.563, 'duration': 1.68}, {'end': 439.384, 'text': 'This is the same thing.', 'start': 438.464, 'duration': 0.92}, {'end': 443.106, 'text': "Let's do navul.", 'start': 439.404, 'duration': 3.702}, {'end': 444.906, 'text': "Let's do navh1.", 'start': 444.026, 'duration': 0.88}, {'end': 449.836, 'text': 'Okay, that and just add a flex one to each.', 'start': 446.693, 'duration': 3.143}, {'end': 451.457, 'text': 'Okay, there we go.', 'start': 450.657, 'duration': 0.8}, {'end': 454.84, 'text': 'So now I can display flex my ul.', 'start': 451.938, 'duration': 2.902}, {'end': 458.663, 'text': 'We can say nav ul list style.', 'start': 455.621, 'duration': 3.042}, {'end': 461.486, 'text': "Let's get rid of that crap.", 'start': 458.684, 'duration': 2.802}, {'end': 463.087, 'text': 'List style none.', 'start': 462.207, 'duration': 0.88}, {'end': 470.294, 'text': 'Then we can say display flex and justify content space between, boom.', 'start': 463.908, 'duration': 6.386}, {'end': 477.461, 'text': "Okay, nav A, color black and let's get rid of that text decoration, none.", 'start': 471.135, 'duration': 6.326}, {'end': 479.703, 'text': 'Okay, we are almost there.', 'start': 478.482, 'duration': 1.221}, {'end': 482.746, 'text': 'Just like two more lines of code, I promise.', 'start': 480.504, 'duration': 2.242}, {'end': 490.416, 'text': 'We grab the section, and this is just going to have a min height of 100 VH, just so we have some space going on here.', 'start': 483.652, 'duration': 6.764}, {'end': 495.36, 'text': 'A display flex, justify content space, blah, blah, blah.', 'start': 491.057, 'duration': 4.303}, {'end': 499.763, 'text': 'Center, line items, center.', 'start': 496.621, 'duration': 3.142}, {'end': 503.625, 'text': "Okay And let's make this bigger.", 'start': 501.143, 'duration': 2.482}, {'end': 507.267, 'text': 'Section, H2, font size, 5 rem.', 'start': 503.745, 'duration': 3.522}, {'end': 510.129, 'text': 'Ooh, so nice.', 'start': 508.268, 'duration': 1.861}, {'end': 512.39, 'text': 'And color is going to be white.', 'start': 510.79, 'duration': 1.6}, {'end': 517.111, 'text': "But now we cannot see so let's add some background colors.", 'start': 514.349, 'duration': 2.762}, {'end': 519.594, 'text': 'Okay, I did one from UI.', 'start': 517.873, 'duration': 1.721}, {'end': 527.022, 'text': 'What was it called? UI gray gradient.', 'start': 520.635, 'duration': 6.387}, {'end': 531.467, 'text': 'UI gradient and I copied the first three.', 'start': 529.305, 'duration': 2.162}, {'end': 535.12, 'text': 'Oh no, they change.', 'start': 534.159, 'duration': 0.961}, {'end': 538.302, 'text': 'You can use your own.', 'start': 536.581, 'duration': 1.721}, {'end': 541.565, 'text': 'So let me copy those over because I have it here.', 'start': 539.223, 'duration': 2.342}, {'end': 550.832, 'text': 'Basically what I did was I went to each one of them and home project and contact and I added a linear gradient like this.', 'start': 541.605, 'duration': 9.227}, {'end': 552.714, 'text': 'Let me make this bigger for you to see.', 'start': 551.112, 'duration': 1.602}, {'end': 561.28, 'text': 'a linear gradient to right top and just add the corresponding colors that I stole from UI gradients.', 'start': 553.414, 'duration': 7.866}], 'summary': 'Styling elements with specific font sizes, flex properties, and color adjustments, creating a ui with background gradients.', 'duration': 139.174, 'max_score': 422.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE422106.jpg'}], 'start': 371.379, 'title': 'Ui design styling and color addition', 'summary': 'Demonstrates adding ui gradients as background colors, styling font size and color, focusing on center, line items, and h2 section, with specific details and actions taken.', 'chapters': [{'end': 495.36, 'start': 371.379, 'title': 'Styling navigation and sections', 'summary': 'Demonstrates the process of styling the navigation bar and section using css, including setting min height, margins, flexbox properties, and removing list styles, to improve the layout and spacing, with a focus on achieving a clean and organized design.', 'duration': 123.981, 'highlights': ['The chapter focuses on styling the navigation bar and section using CSS, including setting min height, margins, and flexbox properties to improve the layout and spacing.', "The use of 'display flex' and 'justify content' properties are emphasized for achieving desired spacing and alignment in the navigation and section elements.", 'The process involves removing list styles and adjusting font sizes to enhance the visual appearance of the navigation bar and section.', 'The importance of creating a clean and organized design is highlighted throughout the demonstration.']}, {'end': 561.28, 'start': 496.621, 'title': 'Ui design styling and color addition', 'summary': 'Covers the process of adding ui gradients as background colors and styling font size and color for center, line items, and h2 section, with specific details and actions taken in implementing the changes.', 'duration': 64.659, 'highlights': ['The speaker adds a linear gradient to the background colors for each section, using the corresponding colors stolen from UI gradients.', 'Styling adjustments include centering, line items, and setting the font size to 5 rem with a white color.', 'The speaker mentions using UI gray gradient and copying the first three colors for the background.']}], 'duration': 189.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE371379.jpg', 'highlights': ['The chapter focuses on styling the navigation bar and section using CSS, including setting min height, margins, and flexbox properties to improve the layout and spacing.', "The use of 'display flex' and 'justify content' properties are emphasized for achieving desired spacing and alignment in the navigation and section elements.", 'The process involves removing list styles and adjusting font sizes to enhance the visual appearance of the navigation bar and section.', 'The importance of creating a clean and organized design is highlighted throughout the demonstration.', 'The speaker adds a linear gradient to the background colors for each section, using the corresponding colors stolen from UI gradients.', 'Styling adjustments include centering, line items, and setting the font size to 5 rem with a white color.', 'The speaker mentions using UI gray gradient and copying the first three colors for the background.']}, {'end': 826.705, 'segs': [{'end': 586.23, 'src': 'embed', 'start': 561.3, 'weight': 0, 'content': [{'end': 567.084, 'text': "You click here, pop, copied, copied, and you just paste it here, okay? That's all you need to do.", 'start': 561.3, 'duration': 5.784}, {'end': 568.925, 'text': 'You can do this, come on.', 'start': 567.104, 'duration': 1.821}, {'end': 569.586, 'text': 'Okay, good.', 'start': 568.945, 'duration': 0.641}, {'end': 574.729, 'text': 'So if we hit save now, take a look, wow, superb colors.', 'start': 570.727, 'duration': 4.002}, {'end': 583.407, 'text': 'Okay Finally, actually, we need to do the thing up here that kind of goes like blah, blah.', 'start': 576.21, 'duration': 7.197}, {'end': 586.23, 'text': 'That sounds like a rap song.', 'start': 584.929, 'duration': 1.301}], 'summary': 'Instruction on copying and pasting with positive feedback and light-hearted humor.', 'duration': 24.93, 'max_score': 561.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE561300.jpg'}, {'end': 660.352, 'src': 'heatmap', 'start': 594.638, 'weight': 1, 'content': [{'end': 598.821, 'text': "So what I'm going to do is go here back to our index.html.", 'start': 594.638, 'duration': 4.183}, {'end': 601.043, 'text': "And I'm going to go up here to the.", 'start': 599.462, 'duration': 1.581}, {'end': 607.95, 'text': 'Li right here and just going to create an empty div, which is going to be called bubble.', 'start': 603.226, 'duration': 4.724}, {'end': 611.293, 'text': "I don't know why I named the bubble, you can name it whatever you want.", 'start': 608.45, 'duration': 2.843}, {'end': 618.138, 'text': "So we can customize this bubble, what I'm going to do is say bubble, I'm going to add a position absolute to it.", 'start': 612.053, 'duration': 6.085}, {'end': 621.781, 'text': 'Because right now, it kind of takes up space here.', 'start': 618.559, 'duration': 3.222}, {'end': 622.942, 'text': "And I don't want that.", 'start': 622.221, 'duration': 0.721}, {'end': 624.884, 'text': "I don't want this to take up any space.", 'start': 622.962, 'duration': 1.922}, {'end': 627.386, 'text': 'So when I hit save now, as you can see kind of jumps back there.', 'start': 624.904, 'duration': 2.482}, {'end': 633.99, 'text': "Okay, position absolute, I'm going to add a Z index of minus two.", 'start': 628.466, 'duration': 5.524}, {'end': 635.511, 'text': "So it's behind the text.", 'start': 634.07, 'duration': 1.441}, {'end': 641.356, 'text': "And for now, I'm just going to copy over one of these background gradients.", 'start': 637.172, 'duration': 4.184}, {'end': 642.757, 'text': "So let's do the first one.", 'start': 641.596, 'duration': 1.161}, {'end': 646.08, 'text': "I'm getting lost in my code.", 'start': 643.678, 'duration': 2.402}, {'end': 647.902, 'text': 'All right, let me make more space.', 'start': 646.801, 'duration': 1.101}, {'end': 649.263, 'text': 'There we go.', 'start': 648.823, 'duration': 0.44}, {'end': 653.207, 'text': 'Now we cannot see it because we need a height and width to it.', 'start': 650.064, 'duration': 3.143}, {'end': 656.17, 'text': "But the cool thing is we're going to do that in JavaScript.", 'start': 653.587, 'duration': 2.583}, {'end': 660.352, 'text': "So before we do that, I'm just gonna add a transition of all.", 'start': 656.75, 'duration': 3.602}], 'summary': "Adding an empty div named 'bubble' with css properties to customize its appearance", 'duration': 48.299, 'max_score': 594.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE594638.jpg'}, {'end': 788.709, 'src': 'embed', 'start': 760.685, 'weight': 3, 'content': [{'end': 768.312, 'text': 'And what an intersection observer does is It detects whenever something is on the page.', 'start': 760.685, 'duration': 7.627}, {'end': 772.456, 'text': 'So if I scroll, oh, okay, it detected that this blue part of the page is there.', 'start': 768.513, 'duration': 3.943}, {'end': 777.28, 'text': 'So then you can run a function or you can run certain things to manipulate that.', 'start': 772.776, 'duration': 4.504}, {'end': 781.863, 'text': 'Okay, rather than doing it with scroll, because with scroll, you have a lot more issues.', 'start': 777.7, 'duration': 4.163}, {'end': 788.709, 'text': 'It runs every millisecond or whatever time you put on the page.', 'start': 782.304, 'duration': 6.405}], 'summary': 'Intersection observer detects and manipulates elements on page, avoiding scroll issues.', 'duration': 28.024, 'max_score': 760.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE760685.jpg'}], 'start': 561.3, 'title': 'Creating and customizing elements', 'summary': 'Demonstrates creating and customizing div elements with position absolute and z index of minus two and creating gradient backgrounds in javascript using simple code and the intersection observer.', 'chapters': [{'end': 635.511, 'start': 561.3, 'title': 'Creating and customizing a div', 'summary': 'Demonstrates creating and customizing a div element by adding position absolute and z index of minus two to achieve a desired visual effect.', 'duration': 74.211, 'highlights': ['Adding position absolute to the div to prevent it from taking up space.', 'Applying a Z index of minus two to position the div behind the text.', 'Demonstration of pasting and saving steps for visual effect customization.']}, {'end': 826.705, 'start': 637.172, 'title': 'Creating gradient backgrounds in javascript', 'summary': 'Demonstrates how to create gradient backgrounds using javascript, using simple code and the intersection observer to detect when a section is on the page, avoiding issues with continuous scrolling.', 'duration': 189.533, 'highlights': ['The chapter demonstrates how to create gradient backgrounds using JavaScript. The speaker explains the process of copying over background gradients and using three lines of code to achieve the desired effect.', 'Using the intersection observer to detect when a section is on the page, avoiding issues with continuous scrolling. The chapter emphasizes using the intersection observer to detect when a section is on the page, ensuring that the code only runs once the specified element is visible, thus preventing issues with continuous scrolling.']}], 'duration': 265.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE561300.jpg', 'highlights': ['Demonstration of pasting and saving steps for visual effect customization.', 'Applying a Z index of minus two to position the div behind the text.', 'Adding position absolute to the div to prevent it from taking up space.', 'Using the intersection observer to detect when a section is on the page, avoiding issues with continuous scrolling.', 'The chapter demonstrates how to create gradient backgrounds using JavaScript. The speaker explains the process of copying over background gradients and using three lines of code to achieve the desired effect.']}, {'end': 1033.672, 'segs': [{'end': 887.702, 'src': 'embed', 'start': 854, 'weight': 0, 'content': [{'end': 865.544, 'text': 'So basically what I wanna do is activate my animation or whatever, when we are down 70% of the element that I want to react to.', 'start': 854, 'duration': 11.544}, {'end': 868.045, 'text': "So once it's here, boom, activate.", 'start': 865.564, 'duration': 2.481}, {'end': 870.466, 'text': 'Boom, activate again.', 'start': 869.425, 'duration': 1.041}, {'end': 872.166, 'text': 'All right, boom, boom.', 'start': 870.486, 'duration': 1.68}, {'end': 874.147, 'text': "That's fun to say.", 'start': 873.326, 'duration': 0.821}, {'end': 878.068, 'text': 'Boom So you can do that with threshold.', 'start': 874.727, 'duration': 3.341}, {'end': 880.989, 'text': 'Threshold, threshold, threshold.', 'start': 879.148, 'duration': 1.841}, {'end': 884.759, 'text': 'Is that correct? Threshold.', 'start': 881.009, 'duration': 3.75}, {'end': 887.461, 'text': "Yeah I'm going to put 0.7, which is going to mean 70%.", 'start': 885.239, 'duration': 2.222}, {'end': 887.702, 'text': '0 is 0%.', 'start': 887.461, 'duration': 0.241}], 'summary': 'Activate animation when element is 70% down, using a threshold of 0.7.', 'duration': 33.702, 'max_score': 854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE854000.jpg'}, {'end': 1033.672, 'src': 'heatmap', 'start': 952.555, 'weight': 1, 'content': [{'end': 954.896, 'text': 'Well, we wanna observe all of these right?', 'start': 952.555, 'duration': 2.341}, {'end': 961.739, 'text': 'We wanna make sure that all of these sections are detected whenever they come into frame or leave the frame.', 'start': 954.936, 'duration': 6.803}, {'end': 964.68, 'text': 'So what we can do is say sections dot foreach.', 'start': 962.179, 'duration': 2.501}, {'end': 967.442, 'text': 'So we can loop over them and say section.', 'start': 965.001, 'duration': 2.441}, {'end': 970.643, 'text': 'For each section, we can run an arrow function here.', 'start': 968.062, 'duration': 2.581}, {'end': 974.105, 'text': 'And I can say observer dot observe.', 'start': 971.163, 'duration': 2.942}, {'end': 979.763, 'text': 'oops, observe the section.', 'start': 976.38, 'duration': 3.383}, {'end': 982.286, 'text': "All right, so it's gonna observe each section.", 'start': 979.783, 'duration': 2.503}, {'end': 987.531, 'text': 'Okay, so once it observes each section, we get the entries here.', 'start': 983.527, 'duration': 4.004}, {'end': 989.393, 'text': "All right, so here's where we arrive.", 'start': 987.851, 'duration': 1.542}, {'end': 991.515, 'text': 'And now I wanna loop over this again.', 'start': 989.733, 'duration': 1.782}, {'end': 1004.232, 'text': 'So I can say entries, like this, dot for each entry, all right, so this is the single section on the page, we can run an arrow function again.', 'start': 992.135, 'duration': 12.097}, {'end': 1006.873, 'text': 'And here we can just console log entry.', 'start': 1004.733, 'duration': 2.14}, {'end': 1009.654, 'text': "Okay, so let's take a look.", 'start': 1008.274, 'duration': 1.38}, {'end': 1012.215, 'text': 'Do we get anything? Refresh.', 'start': 1010.034, 'duration': 2.181}, {'end': 1018.938, 'text': "So once we scroll, as you can see, once I hit that mark, it's gonna run.", 'start': 1012.295, 'duration': 6.643}, {'end': 1027.789, 'text': "And it also gives us a lot of cool parameters that we can mess around with such as is intersecting true that we're going to be using.", 'start': 1020.566, 'duration': 7.223}, {'end': 1033.672, 'text': 'You have bounding client rectangle and a lot of different things here and even the target.', 'start': 1028.209, 'duration': 5.463}], 'summary': 'Utilizing javascript to observe sections and log entry parameters for each section on the page.', 'duration': 81.117, 'max_score': 952.555, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE952555.jpg'}], 'start': 828.366, 'title': 'Element activation and intersection observer', 'summary': "Covers using the 'threshold' option to activate an animation when the element is 70% in view, and implementing intersection observer in javascript to detect section visibility and log entry parameters upon intersection.", 'chapters': [{'end': 887.702, 'start': 828.366, 'title': 'Using options for element activation', 'summary': "Explains how to use the 'threshold' option to activate an animation when the element is 70% in view, providing a clear understanding of the parameter and its practical application.", 'duration': 59.336, 'highlights': ["The 'threshold' option allows specifying when to activate an animation, with the example of setting it at 70% of the element in view.", "The speaker demonstrates the usage of the 'threshold' parameter, emphasizing 0.7 as 70% and 0 as 0% for activation."]}, {'end': 1033.672, 'start': 887.702, 'title': 'Implementing intersection observer for section detection', 'summary': 'Explains how to implement intersection observer in javascript to detect when sections come into view on a web page, allowing for the observation of all sections and the logging of entry parameters upon intersection.', 'duration': 145.97, 'highlights': ['Implementing Intersection Observer to detect when sections come into view The chapter explains how to implement Intersection Observer in JavaScript to detect when sections come into view on a web page.', 'Observation of all sections and logging entry parameters upon intersection The explanation covers the process of observing all sections and logging entry parameters upon intersection, including the use of parameters such as isIntersecting and target.', 'Looping over entries and running arrow functions to observe sections The transcript describes the process of looping over entries and running arrow functions to observe sections, providing a detailed insight into the step-by-step implementation.']}], 'duration': 205.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE828366.jpg', 'highlights': ["The 'threshold' option allows specifying when to activate an animation, with the example of setting it at 70% of the element in view.", 'Implementing Intersection Observer in JavaScript to detect when sections come into view on a web page.', 'Observation of all sections and logging entry parameters upon intersection, including the use of parameters such as isIntersecting and target.', "The speaker demonstrates the usage of the 'threshold' parameter, emphasizing 0.7 as 70% and 0 as 0% for activation.", 'Looping over entries and running arrow functions to observe sections, providing a detailed insight into the step-by-step implementation.']}, {'end': 1207.074, 'segs': [{'end': 1063.261, 'src': 'embed', 'start': 1034.071, 'weight': 0, 'content': [{'end': 1037.272, 'text': 'So the actual section on the page and a lot of other cool stuff.', 'start': 1034.071, 'duration': 3.201}, {'end': 1038.314, 'text': 'So take a look.', 'start': 1037.733, 'duration': 0.581}, {'end': 1039.034, 'text': 'It already works.', 'start': 1038.374, 'duration': 0.66}, {'end': 1043.796, 'text': 'It detects whenever the page comes into view project, boom.', 'start': 1039.054, 'duration': 4.742}, {'end': 1046.907, 'text': 'Contact, boom.', 'start': 1046.087, 'duration': 0.82}, {'end': 1048.108, 'text': 'Okay, so it works.', 'start': 1047.348, 'duration': 0.76}, {'end': 1048.989, 'text': "So that's the entry.", 'start': 1048.148, 'duration': 0.841}, {'end': 1052.512, 'text': "You have each individual page that you're observing down here.", 'start': 1049.41, 'duration': 3.102}, {'end': 1063.261, 'text': 'Okay, so what we need to do now is we need to get the class name from this entry, because remember, we want to kind of match it up with this.', 'start': 1053.933, 'duration': 9.328}], 'summary': 'Developed functionality to detect and display page views accurately.', 'duration': 29.19, 'max_score': 1034.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1034070.jpg'}, {'end': 1104.724, 'src': 'heatmap', 'start': 1075.089, 'weight': 0.82, 'content': [{'end': 1079.251, 'text': "That's gonna give us console.log className.", 'start': 1075.089, 'duration': 4.162}, {'end': 1083.472, 'text': "It's gonna give us the class of these sections.", 'start': 1081.131, 'duration': 2.341}, {'end': 1084.572, 'text': 'So look at that.', 'start': 1083.912, 'duration': 0.66}, {'end': 1085.833, 'text': "I'm at home now.", 'start': 1085.153, 'duration': 0.68}, {'end': 1089.914, 'text': "Can I zoom in on this? I'm not gonna lie, I don't know how to do it.", 'start': 1086.772, 'duration': 3.142}, {'end': 1093.396, 'text': 'If I scroll down, projects, boom.', 'start': 1091.055, 'duration': 2.341}, {'end': 1094.757, 'text': 'Scroll down, contact.', 'start': 1093.677, 'duration': 1.08}, {'end': 1096.018, 'text': 'So it works perfectly.', 'start': 1095.118, 'duration': 0.9}, {'end': 1098.68, 'text': "I'm getting the class from each of these sections.", 'start': 1096.058, 'duration': 2.622}, {'end': 1104.724, 'text': 'Okay, so now what we can do is we can check out the active anchor.', 'start': 1100.101, 'duration': 4.623}], 'summary': 'The script captures class names using console.log, facilitating easy navigation on the webpage.', 'duration': 29.635, 'max_score': 1075.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1075089.jpg'}, {'end': 1183.191, 'src': 'embed', 'start': 1140.017, 'weight': 1, 'content': [{'end': 1147.662, 'text': 'And here I can just say class name and boom, we know which anchor is active.', 'start': 1140.017, 'duration': 7.645}, {'end': 1160.75, 'text': 'Perfect So right now, what I also want to do is grab, what do I want to do? Grab the gradient index.', 'start': 1149.443, 'duration': 11.307}, {'end': 1173.863, 'text': 'And the way we can do that is we can say const gradient index And here we can get the entry.target.getAttribute.', 'start': 1162.071, 'duration': 11.792}, {'end': 1178.387, 'text': "All right, we're gonna get that 0, 1, 2 that we added to the sections.", 'start': 1174.764, 'duration': 3.623}, {'end': 1183.191, 'text': 'GetAttribute, like this.', 'start': 1179.828, 'duration': 3.363}], 'summary': 'Code extracts active anchor class and grabs gradient index using getattribute method.', 'duration': 43.174, 'max_score': 1140.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1140017.jpg'}], 'start': 1034.071, 'title': 'Javascript dom manipulation', 'summary': 'Detecting page section view, retrieving class names and data attributes, and manipulating the dom using javascript, ensuring accuracy and seamless transitions.', 'chapters': [{'end': 1207.074, 'start': 1034.071, 'title': 'Javascript dom manipulation', 'summary': 'Explains how to detect when a page section comes into view, retrieve class names and data attributes, and manipulate the dom using javascript, achieving accurate results and seamless transitions.', 'duration': 173.003, 'highlights': ['Detecting when a page section comes into view The script detects and logs the class name of each observed section as it comes into view, ensuring accurate tracking of the page content.', 'Retrieving class names and data attributes The process involves retrieving the class name and data attributes of each section, allowing for dynamic manipulation of the DOM and accurate identification of the active anchor.', 'Manipulating the DOM using JavaScript The script utilizes JavaScript to dynamically manipulate the DOM, enabling seamless transitions and accurate tracking of the active anchor and gradient index for each page section.']}], 'duration': 173.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1034070.jpg', 'highlights': ['Detecting when a page section comes into view The script detects and logs the class name of each observed section as it comes into view, ensuring accurate tracking of the page content.', 'Retrieving class names and data attributes The process involves retrieving the class name and data attributes of each section, allowing for dynamic manipulation of the DOM and accurate identification of the active anchor.', 'Manipulating the DOM using JavaScript The script utilizes JavaScript to dynamically manipulate the DOM, enabling seamless transitions and accurate tracking of the active anchor and gradient index for each page section.']}, {'end': 1604.561, 'segs': [{'end': 1263.094, 'src': 'embed', 'start': 1207.914, 'weight': 0, 'content': [{'end': 1218.904, 'text': 'What I also want to do is kind of get the positions of this so I can kind of move also get the height and width of the bubble.', 'start': 1207.914, 'duration': 10.99}, {'end': 1223.307, 'text': 'So it kind of matches the size of this text and this text and this text,', 'start': 1219.405, 'duration': 3.902}, {'end': 1226.95, 'text': 'because you might have something longer here and you want to make sure that still looks nice.', 'start': 1223.307, 'duration': 3.643}, {'end': 1230.232, 'text': 'So what we can do is we can grab some coordinates.', 'start': 1227.53, 'duration': 2.702}, {'end': 1241.379, 'text': 'We can say coordinates like this, and I can say active anchor dot get bounding client rectangle schmectangle of the job.', 'start': 1230.252, 'duration': 11.127}, {'end': 1251.006, 'text': 'Okay, So with this we have access to the height, the width, the position, everything of each anchor tag.', 'start': 1242.04, 'duration': 8.966}, {'end': 1252.567, 'text': 'so now we can kind of break this down.', 'start': 1251.006, 'duration': 1.561}, {'end': 1263.094, 'text': 'i can say const directions and set this equal to, and i can just say height, and i can say chords dot height, comma.', 'start': 1252.567, 'duration': 10.527}], 'summary': 'Obtaining positions and dimensions of elements for dynamic sizing and positioning', 'duration': 55.18, 'max_score': 1207.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1207914.jpg'}, {'end': 1341.916, 'src': 'embed', 'start': 1316.246, 'weight': 3, 'content': [{'end': 1326.516, 'text': "Why you do this? setProperty like this, and I'm gonna say the left property, I'm gonna add a comma and some backticks here.", 'start': 1316.246, 'duration': 10.27}, {'end': 1335.852, 'text': "And here I'm gonna interpolate directions.leftPixels like this, all right? I'm gonna give you two moments to see kind of what's going on here.", 'start': 1327.608, 'duration': 8.244}, {'end': 1341.916, 'text': 'So I basically just grab the bubble, grab the style and set the left property here.', 'start': 1336.313, 'duration': 5.603}], 'summary': 'Using setproperty to set left property to directions.leftpixels.', 'duration': 25.67, 'max_score': 1316.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1316246.jpg'}, {'end': 1410.099, 'src': 'heatmap', 'start': 1383.03, 'weight': 0.743, 'content': [{'end': 1388.816, 'text': 'Save Does it work? Okay, there we go.', 'start': 1383.03, 'duration': 5.786}, {'end': 1393.32, 'text': 'Refresh There we go.', 'start': 1389.036, 'duration': 4.284}, {'end': 1396.524, 'text': "So it's working nicely.", 'start': 1394.562, 'duration': 1.962}, {'end': 1402.917, 'text': 'Perfect But this kind of looks a bit weird right now.', 'start': 1399.166, 'duration': 3.751}, {'end': 1403.837, 'text': "It's kind of stuck.", 'start': 1402.997, 'duration': 0.84}, {'end': 1410.099, 'text': 'Well, we have the size of the, of the text, right? So the width and the height is going to be like this.', 'start': 1404.637, 'duration': 5.462}], 'summary': 'Testing confirms successful functionality, with some visual anomalies.', 'duration': 27.069, 'max_score': 1383.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1383030.jpg'}, {'end': 1554.196, 'src': 'heatmap', 'start': 1523.75, 'weight': 1, 'content': [{'end': 1527.871, 'text': "Let's do all 0.5 second ease and save refresh.", 'start': 1523.75, 'duration': 4.121}, {'end': 1534.283, 'text': 'There we go.', 'start': 1533.703, 'duration': 0.58}, {'end': 1536.525, 'text': 'All right, thank you so much for watching.', 'start': 1534.764, 'duration': 1.761}, {'end': 1540.927, 'text': 'Quickly, I wanna say, because a lot of people tell me, do more magic tricks.', 'start': 1536.945, 'duration': 3.982}, {'end': 1547.251, 'text': 'And trust me, I love magic just as much as the next person on the street.', 'start': 1541.588, 'duration': 5.663}, {'end': 1554.196, 'text': "But the thing is that a lot of people don't realize that these tricks are very expensive.", 'start': 1549.073, 'duration': 5.123}], 'summary': '0.5 second ease and save refresh, expensive magic tricks.', 'duration': 30.446, 'max_score': 1523.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1523750.jpg'}], 'start': 1207.914, 'title': 'Bubble creation and styling', 'summary': "Discusses obtaining the height, width, and position of anchor tags for dynamically adjusting the size and positioning of bubbles based on the text content, using the 'getboundingclientrect' method. it also demonstrates creating and styling bubbles using setproperty and transform to set properties such as left, top, width, height, and background, with a transition duration of 0.5 seconds.", 'chapters': [{'end': 1290.437, 'start': 1207.914, 'title': 'Bubble positioning and sizing', 'summary': "Discusses obtaining the height, width, and position of anchor tags for dynamically adjusting the size and positioning of bubbles based on the text content, using the 'getboundingclientrect' method.", 'duration': 82.523, 'highlights': ["By using the 'getBoundingClientRect' method, we can obtain the precise height, width, and position of each anchor tag, allowing for dynamic adjustment of bubble size and positioning based on text content.", 'The process involves retrieving the coordinates, height, and width of the anchor tags to ensure that the bubble size matches the associated text, thereby achieving a visually appealing display.', 'The chapter also emphasizes the importance of ensuring that the bubble looks visually appealing even when the associated text is longer, highlighting the need for dynamic size adjustment.']}, {'end': 1604.561, 'start': 1290.437, 'title': 'Creating and styling bubbles', 'summary': 'Demonstrates creating and styling bubbles using setproperty and transform to set properties such as left, top, width, height, and background, with a transition duration of 0.5 seconds, while also discussing the plan to invest in more magic tricks.', 'duration': 314.124, 'highlights': ['Creating and styling bubbles using setProperty and transform to set properties such as left, top, width, height, and background. The speaker demonstrates using setProperty and transform to set the properties of the bubble, including left, top, width, height, and background, to create and style the bubbles.', 'Discussing the plan to invest in more magic tricks and include them in future episodes. The speaker shares the plan to gather money and invest in more magic tricks to include in future episodes, addressing the limitation of materials and the intention to enhance the content with more magic tricks.', 'Promoting the HTML and CSS course and encouraging viewers to check it out. The speaker encourages viewers to check out the HTML and CSS course, expressing that it is family-friendly and inviting feedback from the audience.']}], 'duration': 396.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/RLc8NB2JyxE/pics/RLc8NB2JyxE1207914.jpg', 'highlights': ["By using the 'getBoundingClientRect' method, we can obtain the precise height, width, and position of each anchor tag, allowing for dynamic adjustment of bubble size and positioning based on text content.", 'The process involves retrieving the coordinates, height, and width of the anchor tags to ensure that the bubble size matches the associated text, thereby achieving a visually appealing display.', 'The chapter also emphasizes the importance of ensuring that the bubble looks visually appealing even when the associated text is longer, highlighting the need for dynamic size adjustment.', 'Creating and styling bubbles using setProperty and transform to set properties such as left, top, width, height, and background. The speaker demonstrates using setProperty and transform to set the properties of the bubble, including left, top, width, height, and background, to create and style the bubbles.']}], 'highlights': ['The chapter introduces creating a simple web page with dynamic navigation using new JavaScript techniques.', 'The potential for user engagement is highlighted through the encouragement to request more JavaScript tutorials in the comments.', 'The speaker emphasizes the simplicity of the process and mentions stumbling upon the method by luck.', 'The chapter demonstrates creating a simple navigation with a header, nav, and sections, and applying CSS styling with box shadow and position sticky.', 'The speaker explains the process of adding a simple navigation with a header, nav, and sections, including the use of data attributes to sync the navigation and sections.', 'The speaker provides a detailed explanation of applying CSS styling to the header, including adding a box shadow with specific parameters and making the position sticky for the header.', 'The chapter focuses on styling the navigation bar and section using CSS, including setting min height, margins, and flexbox properties to improve the layout and spacing.', "The use of 'display flex' and 'justify content' properties are emphasized for achieving desired spacing and alignment in the navigation and section elements.", 'The process involves removing list styles and adjusting font sizes to enhance the visual appearance of the navigation bar and section.', 'The importance of creating a clean and organized design is highlighted throughout the demonstration.', 'The speaker adds a linear gradient to the background colors for each section, using the corresponding colors stolen from UI gradients.', 'Styling adjustments include centering, line items, and setting the font size to 5 rem with a white color.', 'The speaker mentions using UI gray gradient and copying the first three colors for the background.', 'Demonstration of pasting and saving steps for visual effect customization.', 'Applying a Z index of minus two to position the div behind the text.', 'Adding position absolute to the div to prevent it from taking up space.', 'Using the intersection observer to detect when a section is on the page, avoiding issues with continuous scrolling.', 'The chapter demonstrates how to create gradient backgrounds using JavaScript. The speaker explains the process of copying over background gradients and using three lines of code to achieve the desired effect.', "The 'threshold' option allows specifying when to activate an animation, with the example of setting it at 70% of the element in view.", 'Implementing Intersection Observer in JavaScript to detect when sections come into view on a web page.', 'Observation of all sections and logging entry parameters upon intersection, including the use of parameters such as isIntersecting and target.', "The speaker demonstrates the usage of the 'threshold' parameter, emphasizing 0.7 as 70% and 0 as 0% for activation.", 'Looping over entries and running arrow functions to observe sections, providing a detailed insight into the step-by-step implementation.', 'Detecting when a page section comes into view The script detects and logs the class name of each observed section as it comes into view, ensuring accurate tracking of the page content.', 'Retrieving class names and data attributes The process involves retrieving the class name and data attributes of each section, allowing for dynamic manipulation of the DOM and accurate identification of the active anchor.', 'Manipulating the DOM using JavaScript The script utilizes JavaScript to dynamically manipulate the DOM, enabling seamless transitions and accurate tracking of the active anchor and gradient index for each page section.', "By using the 'getBoundingClientRect' method, we can obtain the precise height, width, and position of each anchor tag, allowing for dynamic adjustment of bubble size and positioning based on text content.", 'The process involves retrieving the coordinates, height, and width of the anchor tags to ensure that the bubble size matches the associated text, thereby achieving a visually appealing display.', 'The chapter also emphasizes the importance of ensuring that the bubble looks visually appealing even when the associated text is longer, highlighting the need for dynamic size adjustment.', 'Creating and styling bubbles using setProperty and transform to set properties such as left, top, width, height, and background. The speaker demonstrates using setProperty and transform to set the properties of the bubble, including left, top, width, height, and background, to create and style the bubbles.']}