title
Parallax On The Web (Part 2) – Parallax Header

description
Today we get our hands dirty and code up a parallax header for a made-up clothing store called "Black Bird" Get the code on GitHub - https://github.com/DevTips/Parallax-on-the-Web-DevTips- Learn more about CSS Positioning: https://youtu.be/kejG8G0dr5U?list=PLqGj3iMvMa4L731ispRfGAabXeRpM4RL6 See all the videos in this playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'Parallax On The Web (Part 2) – Parallax Header', 'heatmap': [{'end': 265.712, 'start': 157.732, 'weight': 0.956}, {'end': 476.39, 'start': 420.136, 'weight': 0.861}, {'end': 797.072, 'start': 757.143, 'weight': 0.754}], 'summary': 'Covers parallax in marketing and e-commerce websites, recreating a mock online clothing store homepage using fixed background scrolling; workspace setup with atom and codekit, and creation of a parallax header; css background fixing, parallaxing effects, and styling; and tracking scroll position with javascript and jquery for modern store design.', 'chapters': [{'end': 148.136, 'segs': [{'end': 31.336, 'src': 'embed', 'start': 1.684, 'weight': 1, 'content': [{'end': 5.205, 'text': 'This is the second video in a series called Parallax on the Web.', 'start': 1.684, 'duration': 3.521}, {'end': 7.826, 'text': 'Parallax on the Web.', 'start': 5.566, 'duration': 2.26}, {'end': 13.289, 'text': 'In the first video, we looked at over 20 examples, covering eight different categories,', 'start': 8.707, 'duration': 4.582}, {'end': 18.211, 'text': 'of how really smart and talented people are innovating in this technique today.', 'start': 13.289, 'duration': 4.922}, {'end': 23.473, 'text': 'In the comments of that video, you guys linked to tons of other really impressive examples of Parallax on the Web.', 'start': 18.631, 'duration': 4.842}, {'end': 25.994, 'text': "Just loads of great resources offered up by y'all.", 'start': 23.793, 'duration': 2.201}, {'end': 28.075, 'text': "If you haven't checked that out, please be my guest.", 'start': 26.014, 'duration': 2.061}, {'end': 31.336, 'text': "For the rest of this series, and I don't even know how many videos that will be.", 'start': 28.135, 'duration': 3.201}], 'summary': 'The parallax on the web series covers over 20 examples of innovation in this technique, with numerous impressive resources shared by viewers.', 'duration': 29.652, 'max_score': 1.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1684.jpg'}, {'end': 81.405, 'src': 'embed', 'start': 37.461, 'weight': 0, 'content': [{'end': 45.287, 'text': "And so in this video, we're going to be looking at one of the most common uses of Parallax that you will see in marketing and e-commerce websites.", 'start': 37.461, 'duration': 7.826}, {'end': 49.951, 'text': 'In that other video, I called it fixed background scrolling element.', 'start': 45.668, 'duration': 4.283}, {'end': 51.032, 'text': "So we're going to be building this.", 'start': 49.991, 'duration': 1.041}, {'end': 55.396, 'text': "It's a mock online clothing store homepage that uses Parallax in the header.", 'start': 51.412, 'duration': 3.984}, {'end': 58.298, 'text': 'You can find the files I used to create this example on GitHub.', 'start': 55.596, 'duration': 2.702}, {'end': 60.22, 'text': "There's a link in the description below.", 'start': 58.438, 'duration': 1.782}, {'end': 62.581, 'text': "But without any further ado, let's get into it.", 'start': 60.58, 'duration': 2.001}, {'end': 64.26, 'text': 'To begin the project,', 'start': 63.421, 'duration': 0.839}, {'end': 76.744, 'text': 'the first thing I did was look for a good kind of image that had a good sense of the depth to it that would enable me to extract different elements and create the different layers of our parallax effect.', 'start': 64.26, 'duration': 12.484}, {'end': 81.405, 'text': "So I found this image here of this bird and I thought, wow, that's really great.", 'start': 77.284, 'duration': 4.121}], 'summary': 'This video demonstrates building a parallax effect for an e-commerce website using a bird image with depth for layers.', 'duration': 43.944, 'max_score': 37.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg37461.jpg'}], 'start': 1.684, 'title': 'Parallax in e-commerce websites', 'summary': 'Explores the use of parallax in marketing and e-commerce websites, demonstrating the process of recreating a mock online clothing store homepage using a fixed background scrolling element and referencing over 20 examples from the previous video.', 'chapters': [{'end': 148.136, 'start': 1.684, 'title': 'Parallax in e-commerce websites', 'summary': 'Explores the common use of parallax in marketing and e-commerce websites, showcasing the process of recreating a mock online clothing store homepage using a fixed background scrolling element and referencing over 20 examples from the previous video.', 'duration': 146.452, 'highlights': ['The chapter explores the process of recreating a mock online clothing store homepage using a fixed background scrolling element. The video delves into building a mock online clothing store homepage that utilizes Parallax in the header, showcasing the extraction and manipulation of different image elements to create a parallax effect.', 'Referencing over 20 examples from the previous video. The first video covered over 20 examples of Parallax techniques across eight categories, showcasing the innovation in this technique by talented individuals.', 'Utilizing a good sense of depth in the selected image for creating different layers of the parallax effect. The process starts with finding an image with a good sense of depth, allowing the extraction of different elements to form the layers of the parallax effect.']}], 'duration': 146.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1684.jpg', 'highlights': ['The video delves into building a mock online clothing store homepage that utilizes Parallax in the header.', 'The first video covered over 20 examples of Parallax techniques across eight categories.', 'The process starts with finding an image with a good sense of depth, allowing the extraction of different elements to form the layers of the parallax effect.']}, {'end': 524.307, 'segs': [{'end': 265.712, 'src': 'heatmap', 'start': 148.876, 'weight': 0, 'content': [{'end': 151.578, 'text': 'So let me show you our workspace.', 'start': 148.876, 'duration': 2.702}, {'end': 153.759, 'text': "Let's close Photoshop.", 'start': 151.598, 'duration': 2.161}, {'end': 154.299, 'text': "We don't need it.", 'start': 153.779, 'duration': 0.52}, {'end': 156.352, 'text': "I'm going to drag this into Atom.", 'start': 155.071, 'duration': 1.281}, {'end': 157.692, 'text': "I've been using Atom lately.", 'start': 156.432, 'duration': 1.26}, {'end': 158.432, 'text': 'I quite like it.', 'start': 157.732, 'duration': 0.7}, {'end': 163.014, 'text': 'And I have CodeKit here running our code.', 'start': 160.333, 'duration': 2.681}, {'end': 168.917, 'text': 'And I started the workspace using a framework called Skeleton.', 'start': 163.495, 'duration': 5.422}, {'end': 170.698, 'text': 'Skeleton is cool.', 'start': 169.697, 'duration': 1.001}, {'end': 176.16, 'text': "This is the first time I've ever used it, but it's nice and lightweight.", 'start': 170.718, 'duration': 5.442}, {'end': 180.162, 'text': "There's not much to it compared to the other frameworks that I've been using in the other series.", 'start': 176.18, 'duration': 3.982}, {'end': 182.692, 'text': "So it's cool.", 'start': 180.891, 'duration': 1.801}, {'end': 185.653, 'text': "Maybe I'll focus more in on skeleton at a later time.", 'start': 182.732, 'duration': 2.921}, {'end': 191.936, 'text': 'But I just use skeleton as the base styles and also a simple grid that I might want to use later on.', 'start': 186.054, 'duration': 5.882}, {'end': 193.457, 'text': "But I'm not using the grid to begin with.", 'start': 192.076, 'duration': 1.381}, {'end': 199.18, 'text': 'So what I have here is a jade file, which is very basic.', 'start': 194.037, 'duration': 5.143}, {'end': 204.662, 'text': "And the only thing in it that's kind of notable is that I have this section called content.", 'start': 199.56, 'duration': 5.102}, {'end': 210.025, 'text': 'And in there is a headline and some lorem for a paragraph.', 'start': 205.603, 'duration': 4.422}, {'end': 212.61, 'text': "And it's just because I'm doing a clothing store.", 'start': 210.729, 'duration': 1.881}, {'end': 221.273, 'text': 'So what I want to do is create this parallax header above the clothing store HTML that I have here.', 'start': 212.65, 'duration': 8.623}, {'end': 227.455, 'text': 'Also to note, I have a div right here with a height manually set of 2, 000 pixels.', 'start': 221.773, 'duration': 5.682}, {'end': 231.877, 'text': "The reason I did this is because it is a parallax scrolling effect that we're going for.", 'start': 227.936, 'duration': 3.941}, {'end': 235.098, 'text': 'So I need to have the browser be scrollable.', 'start': 232.257, 'duration': 2.841}, {'end': 241.311, 'text': 'So I just made this really big div so I can scroll up and down no matter how Hi, I have my window here.', 'start': 235.178, 'duration': 6.133}, {'end': 250.819, 'text': 'I also have jQuery script added and a functions page, which is completely blank at the moment.', 'start': 242.732, 'duration': 8.087}, {'end': 252.861, 'text': "So here's my SAS.", 'start': 251.6, 'duration': 1.261}, {'end': 254.502, 'text': 'I have the base styles here,', 'start': 252.901, 'duration': 1.601}, {'end': 265.712, 'text': "which just take care of the font and this article and a few other defaults that Skeleton didn't really take care of for me,", 'start': 254.502, 'duration': 11.21}], 'summary': 'Using atom and codekit, the speaker demonstrates building a lightweight framework called skeleton for a clothing store html, including a parallax scrolling effect and jquery script.', 'duration': 78.579, 'max_score': 148.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg148876.jpg'}, {'end': 480.333, 'src': 'heatmap', 'start': 415.333, 'weight': 5, 'content': [{'end': 420.016, 'text': 'The logo is going to be in the mid ground and the fore bird is going to be in the foreground.', 'start': 415.333, 'duration': 4.683}, {'end': 425.38, 'text': "And we're going to use these layered elements to create this parallaxing effect.", 'start': 420.136, 'duration': 5.244}, {'end': 429.056, 'text': "So that's really the markup of the header.", 'start': 426.656, 'duration': 2.4}, {'end': 430.697, 'text': "It's really quite simple.", 'start': 429.176, 'duration': 1.521}, {'end': 435.318, 'text': "We have our elements all there, and we're gonna use a lot of CSS to round this out.", 'start': 430.737, 'duration': 4.581}, {'end': 444.379, 'text': "So I'm gonna go into my layout, my layout sass, and in this section called parallax is where I'm gonna start.", 'start': 437.858, 'duration': 6.521}, {'end': 447.52, 'text': "And I'll start with the bird box, which is the header.", 'start': 444.899, 'duration': 2.621}, {'end': 453.261, 'text': "And I'll begin with saying position relative.", 'start': 448.02, 'duration': 5.241}, {'end': 461.962, 'text': "Now, the reason I do position relative is because I'm going to have all of these elements that are in the bird box, these parallaxing elements.", 'start': 454.497, 'duration': 7.465}, {'end': 467.485, 'text': "I'm going to have them all absolutely positioned within the bird box.", 'start': 461.962, 'duration': 5.523}, {'end': 474.389, 'text': 'So the bird box needs to be positioned relative so that it can be an anchor for these different parallaxing elements.', 'start': 467.705, 'duration': 6.684}, {'end': 476.39, 'text': 'So position relative is super important.', 'start': 474.649, 'duration': 1.741}, {'end': 480.333, 'text': "And the height, I'm just going to have an arbitrary height.", 'start': 477.051, 'duration': 3.282}], 'summary': 'Using css to create a parallaxing effect for the header with relative positioning and arbitrary height.', 'duration': 65, 'max_score': 415.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg415333.jpg'}, {'end': 488.023, 'src': 'embed', 'start': 461.962, 'weight': 6, 'content': [{'end': 467.485, 'text': "I'm going to have them all absolutely positioned within the bird box.", 'start': 461.962, 'duration': 5.523}, {'end': 474.389, 'text': 'So the bird box needs to be positioned relative so that it can be an anchor for these different parallaxing elements.', 'start': 467.705, 'duration': 6.684}, {'end': 476.39, 'text': 'So position relative is super important.', 'start': 474.649, 'duration': 1.741}, {'end': 480.333, 'text': "And the height, I'm just going to have an arbitrary height.", 'start': 477.051, 'duration': 3.282}, {'end': 483.615, 'text': "Let's just start with 600 and see if that's good.", 'start': 480.893, 'duration': 2.722}, {'end': 488.023, 'text': "And let's start with the background.", 'start': 484.541, 'duration': 3.482}], 'summary': 'Position bird box relative for parallaxing elements, set height to 600.', 'duration': 26.061, 'max_score': 461.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg461962.jpg'}], 'start': 148.876, 'title': 'Workspace setup and parallax header creation', 'summary': 'Covers workspace setup using atom and codekit, and introduction to the skeleton framework for web development. it also outlines the process of creating a parallax header for a clothing store website, including setting up the html structure, defining the parallax effect, and positioning the elements for the desired visual effect.', 'chapters': [{'end': 199.18, 'start': 148.876, 'title': 'Workspace setup and introduction to skeleton framework', 'summary': 'Showcases a workspace setup using atom and codekit, along with an introduction to the lightweight skeleton framework for web development, highlighting its simplicity and potential for future focus.', 'duration': 50.304, 'highlights': ['The workspace setup includes the use of Atom for code editing and CodeKit for running the code.', 'Introduction to the lightweight Skeleton framework, with emphasis on its simplicity compared to other frameworks.', 'The use of skeleton as the base styles and a simple grid for potential future use in web development.']}, {'end': 524.307, 'start': 199.56, 'title': 'Parallax header for clothing store', 'summary': 'Outlines the process of creating a parallax header for a clothing store website, including setting up the html structure, defining the parallax effect, and positioning the elements to achieve the desired visual effect.', 'duration': 324.747, 'highlights': ['The chapter outlines the process of creating a parallax header for a clothing store website. The entire transcript revolves around the process of creating a parallax header for a clothing store website, including the setup of HTML structure, defining the parallax effect, and positioning the elements to achieve the desired visual effect.', 'The need for a manually set height of 2,000 pixels to enable the parallax scrolling effect. The speaker explains the reason behind manually setting the height of a div to 2,000 pixels to enable the parallax scrolling effect, ensuring the browser is scrollable regardless of window size.', 'Description and positioning of parallax elements such as the logo, forebird, and background bird to create the desired parallaxing effect. The speaker describes the positioning and purpose of parallax elements, including the logo, forebird, and background bird, to create the desired parallaxing effect, utilizing layered elements to achieve the visual effect.', 'The importance of setting the position relative for the bird box and defining an arbitrary height for the parallax header. The speaker emphasizes the significance of setting the position relative for the bird box and defining an arbitrary height for the parallax header to anchor the parallaxing elements and establish the visual layout.']}], 'duration': 375.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg148876.jpg', 'highlights': ['The chapter outlines the process of creating a parallax header for a clothing store website, including setting up the HTML structure, defining the parallax effect, and positioning the elements for the desired visual effect.', 'The workspace setup includes the use of Atom for code editing and CodeKit for running the code.', 'Introduction to the lightweight Skeleton framework, with emphasis on its simplicity compared to other frameworks.', 'The use of Skeleton as the base styles and a simple grid for potential future use in web development.', 'The need for a manually set height of 2,000 pixels to enable the parallax scrolling effect.', 'Description and positioning of parallax elements such as the logo, forebird, and background bird to create the desired parallaxing effect.', 'The importance of setting the position relative for the bird box and defining an arbitrary height for the parallax header.']}, {'end': 806.68, 'segs': [{'end': 615.584, 'src': 'embed', 'start': 555.564, 'weight': 0, 'content': [{'end': 559.766, 'text': "So this next property and value that I'm going to write are really what makes that magic happen.", 'start': 555.564, 'duration': 4.202}, {'end': 567.289, 'text': "I'm going to say attachment fixed save.", 'start': 560.206, 'duration': 7.083}, {'end': 574.386, 'text': "And now I can see that the background isn't going anywhere.", 'start': 569.403, 'duration': 4.983}, {'end': 583.049, 'text': "But I got those little jiggliness and the background isn't working right in terms of the size anymore.", 'start': 577.708, 'duration': 5.341}, {'end': 587.41, 'text': 'So what I want to do is, instead of saying background size contain,', 'start': 583.809, 'duration': 3.601}, {'end': 600.292, 'text': 'because what background size contain does is it will stretch the image to where its tallest side or widest side is hitting the edge of its container.', 'start': 587.41, 'duration': 12.882}, {'end': 603.213, 'text': 'So the image is going to be completely contained in that container.', 'start': 600.372, 'duration': 2.841}, {'end': 605.036, 'text': 'in the box.', 'start': 604.536, 'duration': 0.5}, {'end': 608.559, 'text': 'But since we know exactly how big that box is going to be,', 'start': 605.396, 'duration': 3.163}, {'end': 615.584, 'text': 'we can be a little bit smarter with the size of the background and make the browser do less thinking.', 'start': 608.559, 'duration': 7.025}], 'summary': 'Adjusting background size to improve performance and appearance.', 'duration': 60.02, 'max_score': 555.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg555564.jpg'}, {'end': 807.761, 'src': 'heatmap', 'start': 757.143, 'weight': 3, 'content': [{'end': 757.663, 'text': 'Okay, good.', 'start': 757.143, 'duration': 0.52}, {'end': 758.884, 'text': 'Good Okay.', 'start': 758.024, 'duration': 0.86}, {'end': 761.346, 'text': "So now let's see how it's, it's anchored up to the top.", 'start': 758.924, 'duration': 2.422}, {'end': 770.751, 'text': "We want to use position absolute to get it down and we'll say we want to make it 50% from the top.", 'start': 761.686, 'duration': 9.065}, {'end': 783.148, 'text': "And since we know that it's a height of 100 pixels, we'll say margin top is negative 50 pixels.", 'start': 774.093, 'duration': 9.055}, {'end': 787.604, 'text': 'And what this does is it just pulls the logo back up straight to the center.', 'start': 783.589, 'duration': 4.015}, {'end': 790.266, 'text': "So let's look at our parallaxing effects so far.", 'start': 787.824, 'duration': 2.442}, {'end': 797.072, 'text': 'We have a fixed background and we have an absolutely positioned element in there, a centered element.', 'start': 790.566, 'duration': 6.506}, {'end': 805.419, 'text': 'So when we scroll, we can see that the logo is kind of acting independently of its background and we already have a parallaxing effect.', 'start': 797.132, 'duration': 8.287}, {'end': 806.68, 'text': "That's pretty cool.", 'start': 805.98, 'duration': 0.7}, {'end': 807.761, 'text': "That's pretty cool.", 'start': 807.121, 'duration': 0.64}], 'summary': 'Using position absolute, achieved parallax effect with logo centered and fixed background.', 'duration': 50.618, 'max_score': 757.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg757143.jpg'}], 'start': 524.388, 'title': 'Css background and parallaxing effects', 'summary': "Covers css background fixing and parallaxing effects through the 'attachment' property and background properties, achieving fixed backgrounds and parallaxing logos with specific dimensions and positioning.", 'chapters': [{'end': 587.41, 'start': 524.388, 'title': 'Css background fixed', 'summary': "Explains the process of fixing a background in css using the 'attachment' property, resulting in a fixed background that doesn't scroll with the content, addressing the issues of size and position.", 'duration': 63.022, 'highlights': ["The 'attachment' property with the value 'fixed' is what makes the background fixed in CSS.", "Using 'background-attachment: fixed' ensures that the background doesn't scroll with the content.", "Addressing the size and position of the background through 'background-size' and 'background-position' properties resolves the issue of the background getting out of the window."]}, {'end': 806.68, 'start': 587.41, 'title': 'Css parallaxing effects', 'summary': 'Explains how to create css parallaxing effects using background size, position, and properties, achieving a fixed background and a parallaxing logo with specific dimensions and positioning.', 'duration': 219.27, 'highlights': ['The chapter explains how to create CSS parallaxing effects using background size, position, and properties. Creating CSS parallaxing effects, utilizing background size, position, and properties.', 'Achieving a fixed background and a parallaxing logo with specific dimensions and positioning. Creating a fixed background and a parallaxing logo with specific dimensions and positioning.']}], 'duration': 282.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg524388.jpg', 'highlights': ["The 'attachment' property with the value 'fixed' is what makes the background fixed in CSS.", "Using 'background-attachment: fixed' ensures that the background doesn't scroll with the content.", "Addressing the size and position of the background through 'background-size' and 'background-position' properties resolves the issue of the background getting out of the window.", 'The chapter explains how to create CSS parallaxing effects using background size, position, and properties.', 'Achieving a fixed background and a parallaxing logo with specific dimensions and positioning.']}, {'end': 1220.912, 'segs': [{'end': 840.598, 'src': 'embed', 'start': 807.121, 'weight': 0, 'content': [{'end': 807.761, 'text': "That's pretty cool.", 'start': 807.121, 'duration': 0.64}, {'end': 812.686, 'text': "Let's do the next one and let's talk about the forebird, right? Forebird.", 'start': 808.242, 'duration': 4.444}, {'end': 817.042, 'text': 'Make this bigger for you guys.', 'start': 815.981, 'duration': 1.061}, {'end': 817.462, 'text': 'There we go.', 'start': 817.122, 'duration': 0.34}, {'end': 825.988, 'text': "So the forebird, let's say background color is pink.", 'start': 817.962, 'duration': 8.026}, {'end': 834.874, 'text': "I'm going to stop there, the pink, and I'll show you what I want to do in terms of the positioning and size of the forebird.", 'start': 827.829, 'duration': 7.045}, {'end': 840.598, 'text': 'So the forebird, I want to give it a width of 960 pixels.', 'start': 835.535, 'duration': 5.063}], 'summary': 'Discussing the forebird, setting background color to pink and width to 960 pixels.', 'duration': 33.477, 'max_score': 807.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg807121.jpg'}, {'end': 951.296, 'src': 'embed', 'start': 914.928, 'weight': 1, 'content': [{'end': 922.054, 'text': "So now we have we know where the box that contains our forward is, and it's nine 60 wide,", 'start': 914.928, 'duration': 7.126}, {'end': 929.18, 'text': 'which is going to be the general sense of the width of my browsing experience.', 'start': 922.054, 'duration': 7.126}, {'end': 933.604, 'text': "Um, but I need to center it cause it's off to the left and it's up to the top.", 'start': 930.481, 'duration': 3.123}, {'end': 939.789, 'text': "So we'll say, Oh, but before I do that, let's take the repeat off of this background.", 'start': 933.784, 'duration': 6.005}, {'end': 951.296, 'text': "no repeat, and we'll position it to the background.", 'start': 945.712, 'duration': 5.584}], 'summary': 'The forward box is 960 wide and needs centering with background adjustments.', 'duration': 36.368, 'max_score': 914.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg914928.jpg'}, {'end': 1139.322, 'src': 'embed', 'start': 1084.83, 'weight': 3, 'content': [{'end': 1087.512, 'text': "And the height doesn't need to be that much bigger.", 'start': 1084.83, 'duration': 2.682}, {'end': 1098.673, 'text': "What's the height of the back bird? The dimensions, height is 298.", 'start': 1088.925, 'duration': 9.748}, {'end': 1101.795, 'text': "So let's do that, 298 pixels.", 'start': 1098.673, 'duration': 3.122}, {'end': 1116.247, 'text': 'And the background, we know this already is image, URL, images, back bird dot ping.', 'start': 1102.856, 'duration': 13.391}, {'end': 1120.067, 'text': 'And repeat.', 'start': 1118.105, 'duration': 1.962}, {'end': 1121.688, 'text': 'No repeat.', 'start': 1121.148, 'duration': 0.54}, {'end': 1128.213, 'text': 'No dash repeat.', 'start': 1126.932, 'duration': 1.281}, {'end': 1131.536, 'text': 'And the position.', 'start': 1129.474, 'duration': 2.062}, {'end': 1139.322, 'text': 'Top and left this time because I want it on the other side of the logo.', 'start': 1135.999, 'duration': 3.323}], 'summary': "The back bird's height is 298 pixels, positioned top and left of the logo.", 'duration': 54.492, 'max_score': 1084.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1084830.jpg'}], 'start': 807.121, 'title': 'Css styling and positioning', 'summary': 'Discusses css styling for the forebird, specifying its dimensions and background color, and using rgba value to make the pink background slightly transparent. it also covers the process of styling and positioning web elements, including centering, sizing, and background adjustments, to create visually appealing browsing experience.', 'chapters': [{'end': 914.808, 'start': 807.121, 'title': 'Css styling for forebird', 'summary': 'Discusses the css styling for the forebird, specifying its dimensions and background color, and using rgba value to make the pink background slightly transparent.', 'duration': 107.687, 'highlights': ['The forebird is styled with a width of 960 pixels and a height of 733 pixels, with a background color specified as pink using RGBA value to make it 0.3% opaque.', 'The chapter demonstrates the use of CSS to define the positioning and size of the forebird, with specific pixel dimensions provided for both width and height.', "The background image for the forebird is set using a URL and the CSS property 'background-image', along with the use of RGBA value to adjust the transparency of the pink background color."]}, {'end': 1220.912, 'start': 914.928, 'title': 'Styling and positioning web elements', 'summary': 'Discusses the process of styling and positioning web elements, including centering, sizing, and background adjustments, to create a visually appealing browsing experience.', 'duration': 305.984, 'highlights': ['The box containing the forward is adjusted to a width of 960 pixels and centered using margin left -480 pixels, creating a visually centered browsing experience.', 'The height of the back bird element is set to 298 pixels with a background image positioned on the left side, contributing to the visual design of the webpage.', 'Background adjustments, such as removing repeat, setting position to right and bottom, and hiding overflow, are made to enhance the visual appearance of the webpage.']}], 'duration': 413.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg807121.jpg', 'highlights': ['The forebird is styled with a width of 960 pixels and a height of 733 pixels, with a background color specified as pink using RGBA value to make it 0.3% opaque.', 'The box containing the forward is adjusted to a width of 960 pixels and centered using margin left -480 pixels, creating a visually centered browsing experience.', 'The chapter demonstrates the use of CSS to define the positioning and size of the forebird, with specific pixel dimensions provided for both width and height.', 'The height of the back bird element is set to 298 pixels with a background image positioned on the left side, contributing to the visual design of the webpage.', "The background image for the forebird is set using a URL and the CSS property 'background-image', along with the use of RGBA value to adjust the transparency of the pink background color.", 'Background adjustments, such as removing repeat, setting position to right and bottom, and hiding overflow, are made to enhance the visual appearance of the webpage.']}, {'end': 1755.858, 'segs': [{'end': 1254.013, 'src': 'embed', 'start': 1220.912, 'weight': 0, 'content': [{'end': 1224.034, 'text': "or rather control how they move when they're scrolled.", 'start': 1220.912, 'duration': 3.122}, {'end': 1225.875, 'text': "So let's open our functions.", 'start': 1224.194, 'duration': 1.681}, {'end': 1232.74, 'text': "And now how we tell that they're moving is we listen to the scroll of the window.", 'start': 1226.556, 'duration': 6.184}, {'end': 1234.381, 'text': "So let's create an object.", 'start': 1232.8, 'duration': 1.581}, {'end': 1247.428, 'text': "window and then we'll put a listener for scroll and this is using jQuery, by the way and then in that scroll we'll have a function.", 'start': 1236.821, 'duration': 10.607}, {'end': 1254.013, 'text': "so what we're saying is, anytime the window scrolls, whatever I put inside of these braces is going to happen.", 'start': 1247.428, 'duration': 6.585}], 'summary': 'Using jquery to control window scroll behavior.', 'duration': 33.101, 'max_score': 1220.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1220912.jpg'}, {'end': 1344.439, 'src': 'embed', 'start': 1300.862, 'weight': 1, 'content': [{'end': 1308.047, 'text': "Okay, so what I've done is, I've said hey, this variable when this happens, which is the window, when the window scrolls,", 'start': 1300.862, 'duration': 7.185}, {'end': 1310.709, 'text': 'tell me where this is in relation to the top.', 'start': 1308.047, 'duration': 2.662}, {'end': 1311.89, 'text': 'Tell me how far it scrolled.', 'start': 1310.729, 'duration': 1.161}, {'end': 1318.614, 'text': "So I'll replace the high with a variable called wScroll.", 'start': 1312.29, 'duration': 6.324}, {'end': 1327.714, 'text': "And now each time it scrolls, it'll tell me how far positioned the scroll is from zero from the top.", 'start': 1319.555, 'duration': 8.159}, {'end': 1332.595, 'text': "See all these numbers? That's telling me how far I've scrolled.", 'start': 1330.095, 'duration': 2.5}, {'end': 1336.197, 'text': 'So when this top hits the top, it should be, say, around 600.', 'start': 1332.995, 'duration': 3.202}, {'end': 1340.038, 'text': 'Yep So that is just keeping track of my scroll.', 'start': 1336.197, 'duration': 3.841}, {'end': 1343.019, 'text': "No matter where I'm at, even if I go up or down, it'll keep track of it.", 'start': 1340.078, 'duration': 2.941}, {'end': 1344.439, 'text': "So that's nice.", 'start': 1343.719, 'duration': 0.72}], 'summary': 'Tracking the scroll position using variable wscroll, reaching around 600 at the top.', 'duration': 43.577, 'max_score': 1300.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1300862.jpg'}, {'end': 1561.183, 'src': 'embed', 'start': 1510.929, 'weight': 4, 'content': [{'end': 1517.712, 'text': 'Even without animating these two birds, this logo just changes kind of the whole look of the thing.', 'start': 1510.929, 'duration': 6.783}, {'end': 1518.653, 'text': "But let's not stop there.", 'start': 1517.752, 'duration': 0.901}, {'end': 1521.575, 'text': "Let's continue on with these birds.", 'start': 1518.693, 'duration': 2.882}, {'end': 1523.476, 'text': "So let's do the back bird.", 'start': 1522.315, 'duration': 1.161}, {'end': 1536.043, 'text': "And we'll do the same thing with the back bird, but we'll do it a little bit differently when it comes to.", 'start': 1528.018, 'duration': 8.025}, {'end': 1539.592, 'text': "It's scroll pace.", 'start': 1538.772, 'duration': 0.82}, {'end': 1544.235, 'text': "So instead of saying two, let's do four because we want it to be slower.", 'start': 1540.173, 'duration': 4.062}, {'end': 1545.415, 'text': "So we're going to divide it by four.", 'start': 1544.255, 'duration': 1.16}, {'end': 1549.317, 'text': "So it's going to move, but half the speed as the logo.", 'start': 1546.016, 'duration': 3.301}, {'end': 1555.12, 'text': 'You know, the funnest thing about making parallax designs is that you just get to scroll it for a while to test it.', 'start': 1549.517, 'duration': 5.603}, {'end': 1557.141, 'text': 'And like, yeah, you scroll, you scroll good.', 'start': 1555.2, 'duration': 1.941}, {'end': 1557.661, 'text': 'I love you.', 'start': 1557.241, 'duration': 0.42}, {'end': 1559.102, 'text': 'You scroll so hard.', 'start': 1557.801, 'duration': 1.301}, {'end': 1561.183, 'text': 'Scroll, scroll, yeah.', 'start': 1559.922, 'duration': 1.261}], 'summary': 'Animating birds in logo, adjusting scroll pace for parallax design.', 'duration': 50.254, 'max_score': 1510.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1510929.jpg'}, {'end': 1720.628, 'src': 'embed', 'start': 1691.486, 'weight': 3, 'content': [{'end': 1695.45, 'text': 'I think it gives our store that really modern and dynamic look.', 'start': 1691.486, 'duration': 3.964}, {'end': 1699.653, 'text': 'It does a lot to make the Blackbird clothing.', 'start': 1695.97, 'duration': 3.683}, {'end': 1700.334, 'text': 'I love it.', 'start': 1699.933, 'duration': 0.401}, {'end': 1702.475, 'text': 'So this is a clothing store as well.', 'start': 1700.694, 'duration': 1.781}, {'end': 1707.259, 'text': "And there's more parallaxing we can do on this design.", 'start': 1703.016, 'duration': 4.243}, {'end': 1709.441, 'text': "And we've run out of time for this video.", 'start': 1707.519, 'duration': 1.922}, {'end': 1710.482, 'text': "We've gone a little bit long.", 'start': 1709.461, 'duration': 1.021}, {'end': 1720.628, 'text': 'But next week we can add more parallaxing events or effects to this design and make it like really, really pleasurable to use.', 'start': 1710.942, 'duration': 9.686}], 'summary': 'Redesigned store for modern look, adding more parallaxing next week.', 'duration': 29.142, 'max_score': 1691.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1691486.jpg'}], 'start': 1220.912, 'title': 'Tracking scroll position and parallax technique', 'summary': 'Demonstrates tracking scroll position using javascript and jquery, capturing real-time distance scrolled, and discusses using the parallax technique to create a modern store design with detailed instructions on adjusting css and scroll manipulation.', 'chapters': [{'end': 1344.439, 'start': 1220.912, 'title': 'Tracking scroll position with javascript', 'summary': 'Demonstrates how to track and log the scroll position using javascript and jquery, with the ability to capture and display the distance scrolled in real-time and continuously.', 'duration': 123.527, 'highlights': ['The JavaScript code uses jQuery to listen to the scroll of the window and logs the scroll position in real-time, providing a continuous update of the distance scrolled.', "By utilizing a variable called 'wScroll', the code accurately captures and displays the distance scrolled, allowing for precise tracking of the scroll position.", 'The implementation of the code ensures that the scroll position is constantly monitored, regardless of the direction of the scroll, providing a seamless and accurate tracking experience.']}, {'end': 1755.858, 'start': 1344.519, 'title': 'Parallax technique for modern store design', 'summary': 'Discusses using the parallax technique to create a modern and dynamic look for a clothing store design, adjusting the css to make the background move slowly, the foreground move quickly, and the mid-ground act as a fulcrum, with detailed instructions and examples of manipulating the scroll pace and direction for logos and birds.', 'duration': 411.339, 'highlights': ['Using parallax technique to create a modern and dynamic look The speaker discusses using the parallax technique to create a modern and dynamic look for a clothing store design.', 'Adjusting CSS to control scroll pace and direction for logos and birds The speaker provides detailed instructions and examples of manipulating the scroll pace and direction for logos and birds, including adjusting the CSS properties like translate, scroll pace, and direction.', 'Demonstrating the impact of scroll pace on design elements The speaker demonstrates the impact of scroll pace on design elements by adjusting the speed and direction of the movement for logos and birds, emphasizing the importance of keeping elements in the center and controlling the speed of movement.']}], 'duration': 534.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WTZpNAbz3jg/pics/WTZpNAbz3jg1220912.jpg', 'highlights': ['The JavaScript code uses jQuery to listen to the scroll of the window and logs the scroll position in real-time, providing a continuous update of the distance scrolled.', "By utilizing a variable called 'wScroll', the code accurately captures and displays the distance scrolled, allowing for precise tracking of the scroll position.", 'The implementation of the code ensures that the scroll position is constantly monitored, regardless of the direction of the scroll, providing a seamless and accurate tracking experience.', 'Using parallax technique to create a modern and dynamic look The speaker discusses using the parallax technique to create a modern and dynamic look for a clothing store design.', 'Adjusting CSS to control scroll pace and direction for logos and birds The speaker provides detailed instructions and examples of manipulating the scroll pace and direction for logos and birds, including adjusting the CSS properties like translate, scroll pace, and direction.', 'Demonstrating the impact of scroll pace on design elements The speaker demonstrates the impact of scroll pace on design elements by adjusting the speed and direction of the movement for logos and birds, emphasizing the importance of keeping elements in the center and controlling the speed of movement.']}], 'highlights': ['The video delves into building a mock online clothing store homepage that utilizes Parallax in the header.', 'The first video covered over 20 examples of Parallax techniques across eight categories.', 'The process starts with finding an image with a good sense of depth, allowing the extraction of different elements to form the layers of the parallax effect.', 'The chapter outlines the process of creating a parallax header for a clothing store website, including setting up the HTML structure, defining the parallax effect, and positioning the elements for the desired visual effect.', 'The workspace setup includes the use of Atom for code editing and CodeKit for running the code.', 'Introduction to the lightweight Skeleton framework, with emphasis on its simplicity compared to other frameworks.', 'The use of Skeleton as the base styles and a simple grid for potential future use in web development.', 'The need for a manually set height of 2,000 pixels to enable the parallax scrolling effect.', 'Description and positioning of parallax elements such as the logo, forebird, and background bird to create the desired parallaxing effect.', 'The importance of setting the position relative for the bird box and defining an arbitrary height for the parallax header.', "The 'attachment' property with the value 'fixed' is what makes the background fixed in CSS.", "Using 'background-attachment: fixed' ensures that the background doesn't scroll with the content.", "Addressing the size and position of the background through 'background-size' and 'background-position' properties resolves the issue of the background getting out of the window.", 'The chapter explains how to create CSS parallaxing effects using background size, position, and properties.', 'Achieving a fixed background and a parallaxing logo with specific dimensions and positioning.', 'The forebird is styled with a width of 960 pixels and a height of 733 pixels, with a background color specified as pink using RGBA value to make it 0.3% opaque.', 'The box containing the forward is adjusted to a width of 960 pixels and centered using margin left -480 pixels, creating a visually centered browsing experience.', 'The chapter demonstrates the use of CSS to define the positioning and size of the forebird, with specific pixel dimensions provided for both width and height.', 'The height of the back bird element is set to 298 pixels with a background image positioned on the left side, contributing to the visual design of the webpage.', "The background image for the forebird is set using a URL and the CSS property 'background-image', along with the use of RGBA value to adjust the transparency of the pink background color.", 'Background adjustments, such as removing repeat, setting position to right and bottom, and hiding overflow, are made to enhance the visual appearance of the webpage.', 'The JavaScript code uses jQuery to listen to the scroll of the window and logs the scroll position in real-time, providing a continuous update of the distance scrolled.', "By utilizing a variable called 'wScroll', the code accurately captures and displays the distance scrolled, allowing for precise tracking of the scroll position.", 'The implementation of the code ensures that the scroll position is constantly monitored, regardless of the direction of the scroll, providing a seamless and accurate tracking experience.', 'Using parallax technique to create a modern and dynamic look The speaker discusses using the parallax technique to create a modern and dynamic look for a clothing store design.', 'Adjusting CSS to control scroll pace and direction for logos and birds The speaker provides detailed instructions and examples of manipulating the scroll pace and direction for logos and birds, including adjusting the CSS properties like translate, scroll pace, and direction.', 'Demonstrating the impact of scroll pace on design elements The speaker demonstrates the impact of scroll pace on design elements by adjusting the speed and direction of the movement for logos and birds, emphasizing the importance of keeping elements in the center and controlling the speed of movement.']}