title
Animate On Scroll Webpage | AOS Library

description
In this project we will build a webpage from scratch that uses the AOS (Animate on Scroll) library to implement a fading effect when the page is scrolled Code: https://codepen.io/bradtraversy/pen/bGbREWg Library Github: https://github.com/michalsnik/aos Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Udemy Courses: https://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Animate On Scroll Webpage | AOS Library', 'heatmap': [{'end': 1079.536, 'start': 1049.822, 'weight': 0.773}, {'end': 1107.678, 'start': 1086.483, 'weight': 0.716}, {'end': 1262.5, 'start': 1230.434, 'weight': 1}], 'summary': "Tutorial demonstrates building a webpage with scroll animations using the aos library, covering html structure, css styling basics, grid layout, 'buy now' button styling, and animating web effects for front-end developers.", 'chapters': [{'end': 325.162, 'segs': [{'end': 37.45, 'src': 'embed', 'start': 7.059, 'weight': 6, 'content': [{'end': 8.922, 'text': 'this video is sponsored by devmountain.', 'start': 7.059, 'duration': 1.863}, {'end': 12.988, 'text': "if you're interested in learning web development, ios or ux design,", 'start': 8.922, 'duration': 4.066}, {'end': 18.977, 'text': 'devmountain is a 12-week design and development boot camp intended to get you a full-time position in the industry.', 'start': 12.988, 'duration': 5.989}, {'end': 22.602, 'text': 'to learn more, visit devmountain.com or click the link in the description below.', 'start': 18.977, 'duration': 3.625}, {'end': 23.884, 'text': "hey, what's going on, guys?", 'start': 22.984, 'duration': 0.9}, {'end': 25.405, 'text': 'so have a little project for you.', 'start': 23.884, 'duration': 1.521}, {'end': 30.567, 'text': "today we're going to build a web page that implements animation on scroll.", 'start': 25.405, 'duration': 5.162}, {'end': 37.45, 'text': 'so basically, we have this acrylic painting gallery and you can see we have the header here and then we have this first one and then,', 'start': 30.567, 'duration': 6.883}], 'summary': 'Devmountain offers a 12-week boot camp in web development, ios, and ux design to secure a full-time industry position.', 'duration': 30.391, 'max_score': 7.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ7059.jpg'}, {'end': 73.365, 'src': 'embed', 'start': 47.174, 'weight': 0, 'content': [{'end': 53.437, 'text': "so basically, we have five of these cards that we're going to create with css using the grid, And then, if I scroll up,", 'start': 47.174, 'duration': 6.263}, {'end': 55.417, 'text': 'you can see that they actually fade out.', 'start': 53.437, 'duration': 1.98}, {'end': 63.301, 'text': "And what's going to allow us to do this is a library called Animate on Scroll or AOS, which is a really cool library.", 'start': 56.398, 'duration': 6.903}, {'end': 64.361, 'text': "It's very practical.", 'start': 63.341, 'duration': 1.02}, {'end': 67.443, 'text': "I'm a big fan of of stuff that's easy to implement.", 'start': 64.441, 'duration': 3.002}, {'end': 73.365, 'text': 'Of course, you could write you could do this by yourself with with CSS and JavaScript.', 'start': 68.383, 'duration': 4.982}], 'summary': 'Creating 5 css cards with grid layout, using aos library for fade effect.', 'duration': 26.191, 'max_score': 47.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ47174.jpg'}, {'end': 247.967, 'src': 'embed', 'start': 222.743, 'weight': 3, 'content': [{'end': 229.971, 'text': "We're going to use HTML5 main tag with a class of container to basically just contain everything pushing into the middle.", 'start': 222.743, 'duration': 7.228}, {'end': 234.617, 'text': "And then we're just going to have a bunch of sections with the class of card.", 'start': 230.832, 'duration': 3.785}, {'end': 243.283, 'text': "okay. so each one of those boxes with the painting and the text that's going to be in a class of card which is going to be a css grid container.", 'start': 235.157, 'duration': 8.126}, {'end': 247.967, 'text': "so inside each grid container, in each card, we're going to have two items.", 'start': 243.283, 'duration': 4.684}], 'summary': 'Using html5 main tag with a class of container to contain everything and sections with a class of card, each containing two items.', 'duration': 25.224, 'max_score': 222.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ222743.jpg'}], 'start': 7.059, 'title': 'Implementing aos scroll animation', 'summary': 'Covers building a web page with a scroll animation using the aos library to showcase an acrylic painting gallery with cards. it discusses creating a simple html structure, linking a style sheet, and implementing the aos library, with a focus on html5 tags and css grid for layout.', 'chapters': [{'end': 129.607, 'start': 7.059, 'title': 'Implementing scroll animation with aos', 'summary': 'Discusses building a web page with a scroll animation using the aos library, which showcases an acrylic painting gallery with cards that implement animation on scroll, and recommends following along for css beginners or skipping to the implementation of the library for others.', 'duration': 122.548, 'highlights': ['The AOS library is used to implement animation on scroll for a web page showcasing an acrylic painting gallery with five cards, demonstrating the ease of implementation and the absence of jQuery.', 'Devmountain is a 12-week design and development boot camp aimed at securing a full-time position in the industry, promoting web development, iOS, and UX design learning opportunities.', 'The tutorial will cover building the web page from scratch, including writing HTML and CSS, using the grid, pseudo selectors, media queries, and implementing the AOS library towards the end, with responsive design for screens around 600 pixels.', 'The AOS library offers various parameters and options to customize the animation, such as changing the offset and delay.']}, {'end': 325.162, 'start': 129.607, 'title': 'Creating acrylic painting gallery', 'summary': 'Covers creating a simple html structure for an acrylic painting gallery, including linking a style sheet and implementing the aos library, with a focus on using html5 tags and css grid for layout.', 'duration': 195.555, 'highlights': ['Creating a simple HTML structure for an acrylic painting gallery The chapter focuses on creating a basic HTML structure for an acrylic painting gallery, including a header, main tag with a container class, and multiple sections with a class of card.', 'Linking a style sheet and implementing the AOS library The tutorial demonstrates linking a style sheet (style.css) and implementing the AOS library for animation effects.', 'Using HTML5 main tag and CSS grid for layout The chapter emphasizes the use of HTML5 main tag with a container class and CSS grid for layout, with specific focus on creating grid containers for images and text.']}], 'duration': 318.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ7059.jpg', 'highlights': ['The AOS library is used to implement animation on scroll for a web page showcasing an acrylic painting gallery with five cards, demonstrating the ease of implementation and the absence of jQuery.', 'The tutorial will cover building the web page from scratch, including writing HTML and CSS, using the grid, pseudo selectors, media queries, and implementing the AOS library towards the end, with responsive design for screens around 600 pixels.', 'The AOS library offers various parameters and options to customize the animation, such as changing the offset and delay.', 'Creating a simple HTML structure for an acrylic painting gallery The chapter focuses on creating a basic HTML structure for an acrylic painting gallery, including a header, main tag with a container class, and multiple sections with a class of card.', 'Linking a style sheet and implementing the AOS library The tutorial demonstrates linking a style sheet (style.css) and implementing the AOS library for animation effects.', 'Using HTML5 main tag and CSS grid for layout The chapter emphasizes the use of HTML5 main tag with a container class and CSS grid for layout, with specific focus on creating grid containers for images and text.', 'Devmountain is a 12-week design and development boot camp aimed at securing a full-time position in the industry, promoting web development, iOS, and UX design learning opportunities.']}, {'end': 640.847, 'segs': [{'end': 417.62, 'src': 'embed', 'start': 388.923, 'weight': 0, 'content': [{'end': 390.645, 'text': 'So one rem is 16 pixels.', 'start': 388.923, 'duration': 1.722}, {'end': 393.188, 'text': '1.3 rems is going to be whatever 16 pixels times 1.3 is.', 'start': 390.665, 'duration': 2.523}, {'end': 393.409, 'text': 'All right.', 'start': 393.208, 'duration': 0.201}, {'end': 404.956, 'text': "So I'm going to set the backgrounds of the body to a very light gray.", 'start': 398.714, 'duration': 6.242}, {'end': 410.058, 'text': "We're going to do F nine three times and that should do it for the body.", 'start': 404.976, 'duration': 5.082}, {'end': 412.578, 'text': 'So we take a look at that.', 'start': 410.298, 'duration': 2.28}, {'end': 414.199, 'text': 'Now you can see the fonts change.', 'start': 412.598, 'duration': 1.601}, {'end': 417.62, 'text': "We get the, the background, all the margin and padding's gone.", 'start': 414.239, 'duration': 3.381}], 'summary': '1.3 rems equals 20.8 pixels. body backgrounds set to very light gray.', 'duration': 28.697, 'max_score': 388.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ388923.jpg'}, {'end': 475.977, 'src': 'embed', 'start': 446.471, 'weight': 1, 'content': [{'end': 447.831, 'text': 'We want this to be responsive.', 'start': 446.471, 'duration': 1.36}, {'end': 451.473, 'text': 'So we want to want this to be a max width so it can shrink.', 'start': 447.871, 'duration': 3.602}, {'end': 456.185, 'text': 'And max width is going to be 1100 pixels, which is usually what I do.', 'start': 452.122, 'duration': 4.063}, {'end': 461.288, 'text': 'And then margin is going to be auto so that we can push it into the center.', 'start': 456.385, 'duration': 4.903}, {'end': 463.93, 'text': 'Overflow is going to be auto.', 'start': 462.169, 'duration': 1.761}, {'end': 465.951, 'text': "And then let's set the padding.", 'start': 464.11, 'duration': 1.841}, {'end': 470.494, 'text': "We'll just do zero on the top and bottom and then two rem on the left and right.", 'start': 465.971, 'duration': 4.523}, {'end': 473.456, 'text': "So that's our container, let's save it and take a look.", 'start': 471.155, 'duration': 2.301}, {'end': 475.977, 'text': 'And now all this stuff is in the middle.', 'start': 474.096, 'duration': 1.881}], 'summary': 'Setting a max width of 1100 pixels, margin auto, and padding 2rem for a responsive design.', 'duration': 29.506, 'max_score': 446.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ446471.jpg'}, {'end': 579.136, 'src': 'embed', 'start': 550.375, 'weight': 2, 'content': [{'end': 553.656, 'text': 'Now that we have a flexbox, we can use align items to the center.', 'start': 550.375, 'duration': 3.281}, {'end': 557.596, 'text': 'And also, we want to justify the content to the center.', 'start': 553.776, 'duration': 3.82}, {'end': 561.097, 'text': "And if we take a look, now you can see it's right in the middle, which is where we want it.", 'start': 557.756, 'duration': 3.341}, {'end': 563.418, 'text': 'We also want to make sure the text is centered.', 'start': 561.497, 'duration': 1.921}, {'end': 565.318, 'text': 'So text align.', 'start': 564.258, 'duration': 1.06}, {'end': 569.654, 'text': 'center OK.', 'start': 567.373, 'duration': 2.281}, {'end': 574.295, 'text': "And let's just do padding to RAM.", 'start': 569.954, 'duration': 4.341}, {'end': 579.136, 'text': 'And I think that should be it as far as just the header itself.', 'start': 576.355, 'duration': 2.781}], 'summary': 'Using flexbox, aligning items and justifying content to center, resulting in a well-centered header.', 'duration': 28.761, 'max_score': 550.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ550375.jpg'}], 'start': 326.443, 'title': 'Css styling basics and website elements', 'summary': 'Covers the basics of css styling, including resetting margins and padding, setting font properties, and defining background color with a font size of 1.3 rem, as well as setting core styles for links, creating a responsive container with a max width of 1100 pixels, centering the header using flexbox, and styling text and colors for specific elements.', 'chapters': [{'end': 417.62, 'start': 326.443, 'title': 'Css styling basics', 'summary': 'Covers the basics of css styling, including resetting margins and padding, setting font properties, and defining background color, with a font size of 1.3 rem, equivalent to 20.8 pixels.', 'duration': 91.177, 'highlights': ['The chapter covers the basics of CSS styling, including resetting margins and padding, setting font properties, and defining background color, with a font size of 1.3 rem, equivalent to 20.8 pixels.', 'The font size is set to 1.3 rem, which is calculated to be 20.8 pixels based on the default 16-pixel font size of the HTML element.', 'A reset is performed to remove all margin and padding from elements, and the box sizing is set to border box to ensure padding does not affect the width.']}, {'end': 640.847, 'start': 418.36, 'title': 'Styling website elements and layout', 'summary': 'Covers setting core styles for links, creating a responsive container with a max width of 1100 pixels, centering the header using flexbox, and styling text and colors for specific elements.', 'duration': 222.487, 'highlights': ['Setting a max width of 1100 pixels for the responsive container and centering it with a margin of auto, leading to a uniform layout across devices.', 'Using Flexbox to center the header vertically and horizontally, and aligning the text, resulting in a visually pleasing and well-structured header.', 'Styling the span within the header to a specific hexadecimal color value, enhancing the visual appeal of the text elements.']}], 'duration': 314.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ326443.jpg', 'highlights': ['The chapter covers the basics of CSS styling, including resetting margins and padding, setting font properties, and defining background color, with a font size of 1.3 rem, equivalent to 20.8 pixels.', 'Setting a max width of 1100 pixels for the responsive container and centering it with a margin of auto, leading to a uniform layout across devices.', 'Using Flexbox to center the header vertically and horizontally, and aligning the text, resulting in a visually pleasing and well-structured header.']}, {'end': 930.322, 'segs': [{'end': 726.315, 'src': 'embed', 'start': 641.467, 'weight': 0, 'content': [{'end': 651.756, 'text': "So we'll take the main header paragraph and let's set that font size to two rem.", 'start': 641.467, 'duration': 10.289}, {'end': 660.742, 'text': 'Now the images, all the images, I want to be 100% of their container.', 'start': 653.939, 'duration': 6.803}, {'end': 663.263, 'text': "So whatever they're contained in, it's going to take 100%.", 'start': 660.822, 'duration': 2.441}, {'end': 667.045, 'text': "Right now, it's just the actual class of container.", 'start': 663.263, 'duration': 3.782}, {'end': 675.769, 'text': "But we're going to basically create a two column grid using the grid system, using the card class.", 'start': 667.485, 'duration': 8.284}, {'end': 677.47, 'text': "So we'll start on that.", 'start': 676.45, 'duration': 1.02}, {'end': 680.412, 'text': "So let's go ahead and say card.", 'start': 678.631, 'duration': 1.781}, {'end': 686.709, 'text': 'And we want to display as a grid case.', 'start': 683.668, 'duration': 3.041}, {'end': 689.33, 'text': 'Remember, we have all those sections with the class of card.', 'start': 686.749, 'duration': 2.581}, {'end': 693.152, 'text': "We're displaying those as a grid and I just want to even columns.", 'start': 689.37, 'duration': 3.782}, {'end': 699.815, 'text': "So we'll have the painting and then we'll have the the text or basically the div that has the heading in the in the paragraph.", 'start': 693.192, 'duration': 6.623}, {'end': 709.639, 'text': "So let's do grid template columns and we just want one fraction and one fraction.", 'start': 700.495, 'duration': 9.144}, {'end': 712.745, 'text': 'which will basically be two even columns.', 'start': 710.703, 'duration': 2.042}, {'end': 716.307, 'text': 'If we wanted three columns, if we had three grid items, we could do another one.', 'start': 712.805, 'duration': 3.502}, {'end': 721.572, 'text': 'Or we could do like two FR and three FR if we wanted them different sizes.', 'start': 716.928, 'duration': 4.644}, {'end': 723.873, 'text': 'I just want two one fractions.', 'start': 722.052, 'duration': 1.821}, {'end': 726.315, 'text': 'We can also just use repeat.', 'start': 724.454, 'duration': 1.861}], 'summary': 'Setting main header to 2rem, images to 100%, creating two-column grid using card class.', 'duration': 84.848, 'max_score': 641.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ641467.jpg'}, {'end': 785.363, 'src': 'embed', 'start': 752.531, 'weight': 5, 'content': [{'end': 757.393, 'text': "So it's a grid gap, not camp grid gap.", 'start': 752.531, 'duration': 4.862}, {'end': 759.074, 'text': "And let's set that to two REM.", 'start': 757.653, 'duration': 1.421}, {'end': 762.123, 'text': 'All right.', 'start': 761.843, 'duration': 0.28}, {'end': 767.448, 'text': 'And then I just want the background to be light gray.', 'start': 762.243, 'duration': 5.205}, {'end': 776.155, 'text': "We're going to do F1 three times and then let's add a margin bottom so that the card below it has some we put some space in between them.", 'start': 767.468, 'duration': 8.687}, {'end': 777.376, 'text': "So let's do two REM.", 'start': 776.255, 'duration': 1.121}, {'end': 780.379, 'text': 'So now if we take a look, looks like that.', 'start': 778.177, 'duration': 2.202}, {'end': 782.38, 'text': 'All right.', 'start': 782, 'duration': 0.38}, {'end': 784.482, 'text': "So let's see.", 'start': 782.761, 'duration': 1.721}, {'end': 785.363, 'text': 'I do want.', 'start': 784.642, 'duration': 0.721}], 'summary': 'Setting grid gap to 2 rem, light gray background, adding margin for spacing between cards.', 'duration': 32.832, 'max_score': 752.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ752531.jpg'}, {'end': 844.074, 'src': 'embed', 'start': 817.583, 'weight': 6, 'content': [{'end': 823.265, 'text': "We could set it to 100%, but I'm just going to set the image to a height of 400 fixed.", 'start': 817.583, 'duration': 5.682}, {'end': 831.087, 'text': "So let's say card image set the height to 400 pixels.", 'start': 823.965, 'duration': 7.122}, {'end': 837.09, 'text': "So that way, when we make this smaller, it doesn't do that.", 'start': 832.888, 'duration': 4.202}, {'end': 839.692, 'text': "And we're going to make this responsive.", 'start': 838.231, 'duration': 1.461}, {'end': 844.074, 'text': "So once it hits a certain size, this doesn't matter anyways because they'll be on top of each other.", 'start': 839.712, 'duration': 4.362}], 'summary': 'Setting the image height to 400 pixels to ensure responsiveness.', 'duration': 26.491, 'max_score': 817.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ817583.jpg'}, {'end': 930.322, 'src': 'embed', 'start': 899.913, 'weight': 2, 'content': [{'end': 905.955, 'text': 'even and then we want to target the image in the way that we can.', 'start': 899.913, 'duration': 6.042}, {'end': 909.675, 'text': 'basically, we can just change the order of the grid items.', 'start': 905.955, 'duration': 3.72}, {'end': 915.977, 'text': 'so by default, the order is the images one and the div is two.', 'start': 909.675, 'duration': 6.302}, {'end': 923.599, 'text': "so what I'm going to do is, on even ones, I'm going to change the image to order to put in the second position or second order.", 'start': 915.977, 'duration': 7.622}, {'end': 930.322, 'text': 'And now, if we take a look now, every even card or section, the image is two.', 'start': 924.099, 'duration': 6.223}], 'summary': 'Targeting images to change order of grid items for even sections.', 'duration': 30.409, 'max_score': 899.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ899913.jpg'}], 'start': 641.467, 'title': 'Css formatting and grid layout basics', 'summary': 'Covers setting font size, image size, and creating a two-column grid layout using the card class. it also explains css grid layout basics, including grid template columns, grid gap, background color, and nth child pseudo selector.', 'chapters': [{'end': 699.815, 'start': 641.467, 'title': 'Css formatting and grid display', 'summary': 'Demonstrates setting font size to two rem for the main header paragraph, making images 100% of their container, and creating a two column grid layout using the card class for sections.', 'duration': 58.348, 'highlights': ['Creating a two column grid using the card class for sections', 'Setting font size to two rem for the main header paragraph', 'Making images 100% of their container']}, {'end': 930.322, 'start': 700.495, 'title': 'Css grid layout basics', 'summary': 'Covers the basics of css grid layout, including setting up grid template columns, using repeat function, grid gap, setting background color, adding margin and padding, changing image height and order using nth child pseudo selector.', 'duration': 229.827, 'highlights': ['Setting up grid template columns with one fraction and one fraction, creating two even columns. Demonstrates the process of setting up grid template columns to create even columns.', 'Using grid gap property to add spacing between grid items. Explains the use of grid gap property to add space between grid items, set to two REM.', 'Changing the height of the image to 400 pixels and making it responsive. Explains the adjustment of image height to 400 pixels and making it responsive to different screen sizes.', 'Using nth child pseudo selector to change the order of grid items, specifically targeting every even card or section to change the image order. Demonstrates the use of nth child pseudo selector to change the order of grid items, specifically targeting every even card or section to change the image order.']}], 'duration': 288.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ641467.jpg', 'highlights': ['Creating a two column grid using the card class for sections', 'Setting up grid template columns with one fraction and one fraction, creating two even columns', 'Using nth child pseudo selector to change the order of grid items, specifically targeting every even card or section to change the image order', 'Setting font size to two rem for the main header paragraph', 'Making images 100% of their container', 'Using grid gap property to add spacing between grid items, set to two REM', 'Changing the height of the image to 400 pixels and making it responsive']}, {'end': 1095.569, 'segs': [{'end': 960.81, 'src': 'embed', 'start': 930.442, 'weight': 0, 'content': [{'end': 932.383, 'text': "It's in the order position two.", 'start': 930.442, 'duration': 1.941}, {'end': 934.784, 'text': "OK, so we're getting there.", 'start': 933.444, 'duration': 1.34}, {'end': 936.105, 'text': 'The buy now button.', 'start': 935.144, 'duration': 0.961}, {'end': 937.986, 'text': "Let's go ahead and style that real quick.", 'start': 936.305, 'duration': 1.681}, {'end': 950.532, 'text': "So that is a class of BTN and we're just going to display inline block and let's give it a background of black.", 'start': 939.386, 'duration': 11.146}, {'end': 956.147, 'text': 'and a color of white.', 'start': 952.464, 'duration': 3.683}, {'end': 957.828, 'text': "i'm just going to add some padding here.", 'start': 956.147, 'duration': 1.681}, {'end': 959.309, 'text': "i'm going to use your rem units.", 'start': 957.828, 'duration': 1.481}, {'end': 960.81, 'text': 'if you want to use pixels, you can.', 'start': 959.309, 'duration': 1.501}], 'summary': 'Styling the buy now button with class btn for inline block and black background.', 'duration': 30.368, 'max_score': 930.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ930442.jpg'}, {'end': 1024.827, 'src': 'embed', 'start': 992.147, 'weight': 1, 'content': [{'end': 994.668, 'text': 'So if I hover over it, you can see it changes.', 'start': 992.147, 'duration': 2.521}, {'end': 1002.95, 'text': "Now the very last thing we want to do in the CSS is simply make it responsive by taking away the display grid when we're at a certain width.", 'start': 995.008, 'duration': 7.942}, {'end': 1009.052, 'text': 'So around right here, I want to just take away the columns and have them stacked.', 'start': 1003.47, 'duration': 5.582}, {'end': 1016.138, 'text': "So, we can do that very easily by just adding a media query and let's do max width.", 'start': 1009.492, 'duration': 6.646}, {'end': 1018.501, 'text': "I'm going to do 600 pixels.", 'start': 1016.159, 'duration': 2.342}, {'end': 1024.827, 'text': 'So, basically any CSS we put in here is going to be in effect 600 pixels or less.', 'start': 1019.201, 'duration': 5.626}], 'summary': 'Css makes layout responsive by stacking columns at 600 pixels or less.', 'duration': 32.68, 'max_score': 992.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ992147.jpg'}, {'end': 1086.483, 'src': 'heatmap', 'start': 1045.359, 'weight': 2, 'content': [{'end': 1049.322, 'text': "So now it's display block, which just makes, you know, puts it on top of each other.", 'start': 1045.359, 'duration': 3.963}, {'end': 1054.444, 'text': 'And as soon as we get above 700, then it goes back into the two column grid.', 'start': 1049.822, 'duration': 4.622}, {'end': 1057.142, 'text': "So that's it for the CSS.", 'start': 1055.419, 'duration': 1.723}, {'end': 1060.207, 'text': "Now we're going to implement the library, which is very simple.", 'start': 1057.182, 'duration': 3.025}, {'end': 1061.63, 'text': "So we're going to go to the GitHub.", 'start': 1060.347, 'duration': 1.283}, {'end': 1064.755, 'text': "And I'll try to remember to put this link in the description.", 'start': 1062.231, 'duration': 2.524}, {'end': 1068.121, 'text': "And let's grab the link to the CSS.", 'start': 1065.336, 'duration': 2.785}, {'end': 1072.47, 'text': 'and put that in our html.', 'start': 1070.268, 'duration': 2.202}, {'end': 1079.536, 'text': "we'll put it right below the font and then let's grab the this,", 'start': 1072.47, 'duration': 7.066}, {'end': 1086.483, 'text': 'the script tag to the actual javascript file and the script tags that are initializing the library.', 'start': 1079.536, 'duration': 6.947}], 'summary': 'Css is used for display block, switches to 2-column grid above 700, library implementation from github.', 'duration': 41.124, 'max_score': 1045.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ1045358.jpg'}], 'start': 930.442, 'title': 'Styling buy now button and making css responsive', 'summary': "Covers css styling of a 'buy now' button including display, background, color, padding, and hover effect, and making it responsive using a media query with a max width of 700 pixels, and implementing a library by adding its css and javascript files to the html.", 'chapters': [{'end': 1095.569, 'start': 930.442, 'title': 'Styling buy now button and making css responsive', 'summary': "Covers the css styling of a 'buy now' button, including display, background, color, padding, and hover effect, and making it responsive using a media query with a max width of 700 pixels, as well as implementing a library by adding its css and javascript files to the html.", 'duration': 165.127, 'highlights': ["The chapter covers the CSS styling of a 'Buy Now' button, including display, background, color, padding, and hover effect. CSS properties and values applied to the 'Buy Now' button.", "Making the 'Buy Now' button responsive using a media query with a max width of 700 pixels. Implementation of responsive design using a media query with specific width.", 'Implementing a library by adding its CSS and JavaScript files to the HTML. Incorporating external library by linking its CSS and JavaScript files in the HTML.']}], 'duration': 165.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ930442.jpg', 'highlights': ["Covers CSS styling of a 'Buy Now' button, including display, background, color, padding, and hover effect.", "Making the 'Buy Now' button responsive using a media query with a max width of 700 pixels.", 'Implementing a library by adding its CSS and JavaScript files to the HTML.']}, {'end': 1284.037, 'segs': [{'end': 1144.595, 'src': 'embed', 'start': 1118.222, 'weight': 2, 'content': [{'end': 1127.725, 'text': 'Now, if we go to the documentation and we go down to right here, you can see we have a data AOS attribute and this one is fade up.', 'start': 1118.222, 'duration': 9.503}, {'end': 1129.365, 'text': 'So this will give a fade up effect.', 'start': 1127.845, 'duration': 1.52}, {'end': 1132.35, 'text': "So there's up, down, left, right, in, out.", 'start': 1129.929, 'duration': 2.421}, {'end': 1135.031, 'text': "We're just going to use the right and left.", 'start': 1133.09, 'duration': 1.941}, {'end': 1139.613, 'text': "So let's go to the second card because that's where we want to start to animate.", 'start': 1135.631, 'duration': 3.982}, {'end': 1141.914, 'text': "And let's add.", 'start': 1140.434, 'duration': 1.48}, {'end': 1144.595, 'text': 'So this is the second one right here.', 'start': 1143.155, 'duration': 1.44}], 'summary': 'The documentation mentions using the data aos attribute for fade up effect and using right and left animations.', 'duration': 26.373, 'max_score': 1118.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ1118222.jpg'}, {'end': 1277.732, 'src': 'heatmap', 'start': 1230.434, 'weight': 0, 'content': [{'end': 1234.978, 'text': 'the default is 120 and then duration.', 'start': 1230.434, 'duration': 4.544}, {'end': 1237.62, 'text': "i'm going to make it last a little longer.", 'start': 1234.978, 'duration': 2.642}, {'end': 1239.502, 'text': "so we'll do 1000 milliseconds, which is one second.", 'start': 1237.62, 'duration': 1.882}, {'end': 1242.907, 'text': 'So save that.', 'start': 1241.846, 'duration': 1.061}, {'end': 1244.448, 'text': "And now let's go back.", 'start': 1243.187, 'duration': 1.261}, {'end': 1246.71, 'text': 'Just reload here.', 'start': 1245.729, 'duration': 0.981}, {'end': 1250.013, 'text': 'And now when I scroll down, it takes a little longer.', 'start': 1246.81, 'duration': 3.203}, {'end': 1252.836, 'text': 'So we have to go down a little further for it to start to come in.', 'start': 1250.033, 'duration': 2.803}, {'end': 1254.377, 'text': 'It also comes in slower.', 'start': 1252.956, 'duration': 1.421}, {'end': 1259.141, 'text': 'OK And then as we go up, you can see it goes away.', 'start': 1254.397, 'duration': 4.744}, {'end': 1262.5, 'text': 'so this is really easy to implement.', 'start': 1260.638, 'duration': 1.862}, {'end': 1274.049, 'text': 'guys, you know if you have a site where you want to add these kinds of effects and of course you could use this in react or view or any front-end framework that you want,', 'start': 1262.5, 'duration': 11.549}, {'end': 1277.732, 'text': "and there's a lot more options too, than than i've showed you here.", 'start': 1274.049, 'duration': 3.683}], 'summary': 'Adjusting scroll duration to 1000ms improves user experience for website. can be easily implemented in various front-end frameworks.', 'duration': 47.298, 'max_score': 1230.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ1230434.jpg'}], 'start': 1096.17, 'title': 'Animating and adjusting web effects', 'summary': 'Covers animating cards with aos attribute, specifying fade effects, adjusting duration and offset, and implementing front-end effects with various options for web developers.', 'chapters': [{'end': 1177.012, 'start': 1096.17, 'title': 'Animating cards with aos', 'summary': 'Discusses how to animate cards using the aos attribute, specifying fade effects for each card except the first one, with options including fade up, down, left, right, in, and out, resulting in a quick and easy implementation.', 'duration': 80.842, 'highlights': ['Cards are animated using the AOS attribute with fade effects specified for each card except the first one The chapter discusses specifying fade effects for each card except the first one, using the AOS attribute.', 'Options for the fade effects include up, down, left, right, in, and out The chapter mentions the options for the fade effects, including up, down, left, right, in, and out.', 'The implementation is quick and easy The chapter emphasizes that the implementation of the AOS attribute for animating cards is very easy to implement.']}, {'end': 1259.141, 'start': 1177.112, 'title': 'Adjusting animation duration and offset', 'summary': 'Demonstrates how to adjust the animation duration and offset, setting the animation to last 1000 milliseconds and the offset to 400, resulting in slower and delayed appearance of the element during scrolling.', 'duration': 82.029, 'highlights': ['The chapter demonstrates adjusting the animation duration and offset, setting the animation to last 1000 milliseconds and the offset to 400, resulting in slower and delayed appearance of the element during scrolling.', "It's possible to add different options for each tag, such as setting the offset to a specific element, and adding them specifically for each tag if desired.", 'The animation comes in faster by default, but the duration is changed to make it a little slower, resulting in a longer duration of one second and a delayed appearance during scrolling.']}, {'end': 1284.037, 'start': 1260.638, 'title': 'Implementing front-end effects', 'summary': 'Discusses the ease of implementing front-end effects in various front-end frameworks, with more options available than demonstrated, making it a useful tool for web developers.', 'duration': 23.399, 'highlights': ['The ease of implementing front-end effects in various front-end frameworks, such as React or Vue, making it a useful tool for web developers.', 'The availability of more options beyond those demonstrated in the tutorial.']}], 'duration': 187.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ptfUwPJbGlQ/pics/ptfUwPJbGlQ1096170.jpg', 'highlights': ['The ease of implementing front-end effects in various front-end frameworks, such as React or Vue, making it a useful tool for web developers.', 'The chapter demonstrates adjusting the animation duration and offset, setting the animation to last 1000 milliseconds and the offset to 400, resulting in slower and delayed appearance of the element during scrolling.', 'Options for the fade effects include up, down, left, right, in, and out The chapter mentions the options for the fade effects, including up, down, left, right, in, and out.']}], 'highlights': ['The AOS library is used to implement animation on scroll for a web page showcasing an acrylic painting gallery with five cards, demonstrating the ease of implementation and the absence of jQuery.', 'The tutorial will cover building the web page from scratch, including writing HTML and CSS, using the grid, pseudo selectors, media queries, and implementing the AOS library towards the end, with responsive design for screens around 600 pixels.', 'The AOS library offers various parameters and options to customize the animation, such as changing the offset and delay.', 'Creating a simple HTML structure for an acrylic painting gallery The chapter focuses on creating a basic HTML structure for an acrylic painting gallery, including a header, main tag with a container class, and multiple sections with a class of card.', 'Linking a style sheet and implementing the AOS library The tutorial demonstrates linking a style sheet (style.css) and implementing the AOS library for animation effects.', 'Using HTML5 main tag and CSS grid for layout The chapter emphasizes the use of HTML5 main tag with a container class and CSS grid for layout, with specific focus on creating grid containers for images and text.', 'The chapter covers the basics of CSS styling, including resetting margins and padding, setting font properties, and defining background color, with a font size of 1.3 rem, equivalent to 20.8 pixels.', 'Setting a max width of 1100 pixels for the responsive container and centering it with a margin of auto, leading to a uniform layout across devices.', 'Using Flexbox to center the header vertically and horizontally, and aligning the text, resulting in a visually pleasing and well-structured header.', 'Creating a two column grid using the card class for sections', 'Setting up grid template columns with one fraction and one fraction, creating two even columns', 'Using nth child pseudo selector to change the order of grid items, specifically targeting every even card or section to change the image order', 'Setting font size to two rem for the main header paragraph', 'Making images 100% of their container', 'Using grid gap property to add spacing between grid items, set to two REM', 'Changing the height of the image to 400 pixels and making it responsive', "Covers CSS styling of a 'Buy Now' button, including display, background, color, padding, and hover effect.", "Making the 'Buy Now' button responsive using a media query with a max width of 700 pixels.", 'Implementing a library by adding its CSS and JavaScript files to the HTML.', 'The ease of implementing front-end effects in various front-end frameworks, such as React or Vue, making it a useful tool for web developers.', 'The chapter demonstrates adjusting the animation duration and offset, setting the animation to last 1000 milliseconds and the offset to 400, resulting in slower and delayed appearance of the element during scrolling.', 'Options for the fade effects include up, down, left, right, in, and out The chapter mentions the options for the fade effects, including up, down, left, right, in, and out.']}