title
Parallax in HTML, CSS and JavaScript Tutorial - Let's make it happen!

description
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account! -- FAST Tut: 01:57 - Bloopers: 31:21 -- You guys did it! 1k likes in 6 hours. So, here's the video where I show you how to take the Figma parallax prototype we designed in the previous video (linked below) and make it a reality in the browser. For this tutorial, I'm using a lightweight (3kb) solution for parallax called Laxxx.js. I've linked below MORE parallax tutorials I've created in the past, which cover a lot more ways to integrate parallax. Laxxx.js: https://github.com/alexfoxy/laxxx Part 1 (The design in Figma): https://www.youtube.com/watch?v=RT5h-lLH0QA Codepen (This is built just for mobile, not desktop resolutions): https://codepen.io/designcourse/pen/ExxKPYO PREVIOUS Parallax Tutorials: GSAP & ScrollMagic https://www.youtube.com/watch?v=S18Wh9IELo0 Rellax.js Parallax https://www.youtube.com/watch?v=aWJgIETz-Kk Vanilla JavaScript Parallax https://www.youtube.com/watch?v=Dxm6EwvQIl8 Laxxx.js Parallax https://www.youtube.com/watch?v=jaVy3SCibJw Parallax.js https://www.youtube.com/watch?v=6zGTxITQkN0 - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': "Parallax in HTML, CSS and JavaScript Tutorial - Let's make it happen!", 'heatmap': [{'end': 272.12, 'start': 230.469, 'weight': 0.714}, {'end': 716.878, 'start': 691.2, 'weight': 1}, {'end': 1368.388, 'start': 1348.662, 'weight': 0.752}, {'end': 1470.153, 'start': 1425.645, 'weight': 0.897}, {'end': 1679.792, 'start': 1658.459, 'weight': 0.738}], 'summary': 'Learn to integrate lax.js for achieving parallax effect in html, css, and javascript, optimize images for responsive layout, use css grid layout for alignment, implement parallax effect for mobile, and create parallax effect based on scroll distance with examples achieving a prototype close to the figma design.', 'chapters': [{'end': 175.257, 'segs': [{'end': 42.798, 'src': 'embed', 'start': 0.389, 'weight': 1, 'content': [{'end': 8.779, 'text': "so you gave me a thousand likes in six hours, so we're gonna make this parallax happen in html, css and javascript mind blown.", 'start': 0.389, 'duration': 8.39}, {'end': 16.867, 'text': 'First, a very, a very, a very exciting news.', 'start': 12.486, 'duration': 4.381}, {'end': 18.488, 'text': 'What are you? First, something new.', 'start': 17.007, 'duration': 1.481}, {'end': 22.569, 'text': "I've integrated a 60 second fast tutorial at the beginning of this video.", 'start': 18.648, 'duration': 3.921}, {'end': 25.83, 'text': "For those of you who don't want to watch, you know all the steps.", 'start': 22.609, 'duration': 3.221}, {'end': 30.571, 'text': 'right after that 60 second tutorial begins the regular tutorial where you see all the steps.', 'start': 25.83, 'duration': 4.741}, {'end': 38.976, 'text': 'Before we begin though, Linode, the sponsor of this video, makes it easy to host your site, your app, or service on whatever technology stack you use.', 'start': 30.871, 'duration': 8.105}, {'end': 42.798, 'text': 'With one-click apps like WordPress and Drupal, getting up and running is easy.', 'start': 39.316, 'duration': 3.482}], 'summary': 'Received 1000 likes in 6 hours, creating parallax effect in html, css, and javascript. introduced 60-second fast tutorial at the beginning. linode sponsors video for hosting websites and apps.', 'duration': 42.409, 'max_score': 0.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4389.jpg'}, {'end': 175.257, 'src': 'embed', 'start': 145.447, 'weight': 0, 'content': [{'end': 151.028, 'text': "I'm using lax.js as seen here, which is a 3KB solution for integrating parallax, and it's dead simple.", 'start': 145.447, 'duration': 5.581}, {'end': 154.789, 'text': 'You can import it through a CDN, and then you simply have to initialize it.', 'start': 151.348, 'duration': 3.441}, {'end': 155.769, 'text': "And that's it.", 'start': 155.289, 'duration': 0.48}, {'end': 157.03, 'text': 'No more JavaScript code.', 'start': 155.869, 'duration': 1.161}, {'end': 158.87, 'text': 'To use lax.js.', 'start': 157.53, 'duration': 1.34}, {'end': 167.932, 'text': 'you simply add a class of lax to the element you want to animate and then either use an attribute-based lax preset or attribute-based lax properties like translateX or Y,', 'start': 158.87, 'duration': 9.062}, {'end': 169.752, 'text': 'opacity scale, skew or rotate.', 'start': 167.932, 'duration': 1.82}, {'end': 175.257, 'text': "The values you give these attributes gives you a lot of control over the type of movement that's applied to the given parallax effect.", 'start': 170.332, 'duration': 4.925}], 'summary': 'Using lax.js for parallax effect, a 3kb solution, easy integration, no more javascript code needed', 'duration': 29.81, 'max_score': 145.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4145447.jpg'}], 'start': 0.389, 'title': 'Parallax tutorial', 'summary': 'Discusses a parallax tutorial in html, css, and javascript, focusing on integrating lax.js, achieving 1000 likes in 6 hours, and introducing a 60-second fast tutorial.', 'chapters': [{'end': 175.257, 'start': 0.389, 'title': 'Parallax tutorial in html, css, and javascript', 'summary': 'Discusses a parallax tutorial in html, css, and javascript, with a focus on integrating lax.js for parallax effects, achieving 1000 likes in 6 hours, and introducing a 60-second fast tutorial.', 'duration': 174.868, 'highlights': ['The chapter discusses a parallax tutorial in HTML, CSS, and JavaScript, with a focus on integrating lax.js for parallax effects. The tutorial focuses on demonstrating how to create a parallax effect using lax.js, a 3KB solution for integrating parallax, and its simple integration through a CDN.', 'Achieving 1000 likes in 6 hours. The audience achieved the target of 1000 likes within 6 hours, showcasing strong engagement and interest in the parallax tutorial.', 'Introducing a 60-second fast tutorial at the beginning of the video. A 60-second fast tutorial is introduced at the start of the video to cater to viewers who prefer a quick overview of the steps before diving into the regular tutorial, enhancing accessibility and user experience.']}], 'duration': 174.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4389.jpg', 'highlights': ['The tutorial focuses on demonstrating how to create a parallax effect using lax.js, a 3KB solution for integrating parallax, and its simple integration through a CDN.', 'Achieving 1000 likes in 6 hours. The audience achieved the target of 1000 likes within 6 hours, showcasing strong engagement and interest in the parallax tutorial.', 'Introducing a 60-second fast tutorial at the beginning of the video. A 60-second fast tutorial is introduced at the start of the video to cater to viewers who prefer a quick overview of the steps before diving into the regular tutorial, enhancing accessibility and user experience.']}, {'end': 504.904, 'segs': [{'end': 215.996, 'src': 'embed', 'start': 175.497, 'weight': 0, 'content': [{'end': 179.601, 'text': 'So I suggest just getting in there and experimenting with the values to see what they do.', 'start': 175.497, 'duration': 4.104}, {'end': 184.502, 'text': 'Exciting! All right, so here we are in Visual Studio Code.', 'start': 180.041, 'duration': 4.461}, {'end': 188.203, 'text': 'I have a blank folder, almost blank.', 'start': 184.582, 'duration': 3.621}, {'end': 194.566, 'text': 'We have an images folder, as you can see, and it has a forest.png, mountains.png.', 'start': 188.243, 'duration': 6.323}, {'end': 198.407, 'text': 'This could actually be a JPEG just of this,', 'start': 195.406, 'duration': 3.001}, {'end': 206.811, 'text': 'but this is literally the same images that I exported during the prototyping portion of the video that I did two days ago or a few days ago.', 'start': 198.407, 'duration': 8.404}, {'end': 209.152, 'text': "So I'm just keeping it quick and easy.", 'start': 207.651, 'duration': 1.501}, {'end': 211.733, 'text': 'You could probably do a lot more image optimization on this.', 'start': 209.172, 'duration': 2.561}, {'end': 215.996, 'text': 'But nonetheless, I will make this available, these files, so check the description.', 'start': 212.553, 'duration': 3.443}], 'summary': 'Experiment with values in visual studio code, using forest.png and mountains.png, exported during prototyping.', 'duration': 40.499, 'max_score': 175.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4175497.jpg'}, {'end': 272.12, 'src': 'heatmap', 'start': 230.469, 'weight': 0.714, 'content': [{'end': 232.789, 'text': 'I did a brief crash course on abbreviations.', 'start': 230.469, 'duration': 2.32}, {'end': 236.07, 'text': 'Basically, it makes it easy, quick and easy to type in HTML.', 'start': 232.829, 'duration': 3.241}, {'end': 241.411, 'text': "We want to link up our style sheet, so it's main.css inside of a CSS folder.", 'start': 236.61, 'duration': 4.801}, {'end': 243.012, 'text': "It doesn't exist, so let's create that.", 'start': 241.431, 'duration': 1.581}, {'end': 245.614, 'text': 'and then also main.sas.', 'start': 243.792, 'duration': 1.822}, {'end': 246.675, 'text': "We'll use sas for this.", 'start': 245.634, 'duration': 1.041}, {'end': 249.478, 'text': "So you're gonna need the sas extension.", 'start': 246.875, 'duration': 2.603}, {'end': 252.261, 'text': "We're also gonna use live reload.", 'start': 250.199, 'duration': 2.062}, {'end': 257.026, 'text': "So if I first click watch sas, you're gonna need that extension.", 'start': 252.401, 'duration': 4.625}, {'end': 261.75, 'text': 'And then right click on index.html, open with live server.', 'start': 258.147, 'duration': 3.603}, {'end': 263.973, 'text': "So those are the two extensions you're gonna need.", 'start': 261.81, 'duration': 2.163}, {'end': 266.675, 'text': "This is our very blank page that's showing us right now.", 'start': 264.273, 'duration': 2.402}, {'end': 272.12, 'text': "And for those extensions, by the way, it's just the live SAS compiler in the live server.", 'start': 267.456, 'duration': 4.664}], 'summary': 'Brief crash course on abbreviations for html, including creating css and sas files, and using live reload and live server extensions.', 'duration': 41.651, 'max_score': 230.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4230469.jpg'}, {'end': 272.12, 'src': 'embed', 'start': 241.431, 'weight': 1, 'content': [{'end': 243.012, 'text': "It doesn't exist, so let's create that.", 'start': 241.431, 'duration': 1.581}, {'end': 245.614, 'text': 'and then also main.sas.', 'start': 243.792, 'duration': 1.822}, {'end': 246.675, 'text': "We'll use sas for this.", 'start': 245.634, 'duration': 1.041}, {'end': 249.478, 'text': "So you're gonna need the sas extension.", 'start': 246.875, 'duration': 2.603}, {'end': 252.261, 'text': "We're also gonna use live reload.", 'start': 250.199, 'duration': 2.062}, {'end': 257.026, 'text': "So if I first click watch sas, you're gonna need that extension.", 'start': 252.401, 'duration': 4.625}, {'end': 261.75, 'text': 'And then right click on index.html, open with live server.', 'start': 258.147, 'duration': 3.603}, {'end': 263.973, 'text': "So those are the two extensions you're gonna need.", 'start': 261.81, 'duration': 2.163}, {'end': 266.675, 'text': "This is our very blank page that's showing us right now.", 'start': 264.273, 'duration': 2.402}, {'end': 272.12, 'text': "And for those extensions, by the way, it's just the live SAS compiler in the live server.", 'start': 267.456, 'duration': 4.664}], 'summary': 'Create the main.sas file, use sas, and install sas and live server extensions for live reloading and compilation.', 'duration': 30.689, 'max_score': 241.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4241431.jpg'}, {'end': 337.239, 'src': 'embed', 'start': 289.793, 'weight': 2, 'content': [{'end': 290.714, 'text': "Oh, that's right.", 'start': 289.793, 'duration': 0.921}, {'end': 292.115, 'text': "I didn't use Adobe XD.", 'start': 290.814, 'duration': 1.301}, {'end': 293.276, 'text': 'I used Figma.', 'start': 292.215, 'duration': 1.061}, {'end': 295.117, 'text': 'Let me open up Figma real quick.', 'start': 293.616, 'duration': 1.501}, {'end': 299.261, 'text': 'And this is our prototype that we created.', 'start': 296.979, 'duration': 2.282}, {'end': 302.664, 'text': "And when you're doing HTML and CSS, by the way, it's not loaded yet.", 'start': 299.281, 'duration': 3.383}, {'end': 303.204, 'text': 'There it goes.', 'start': 302.684, 'duration': 0.52}, {'end': 305.386, 'text': 'You just have to think of everything in terms of blocks.', 'start': 303.665, 'duration': 1.721}, {'end': 308.269, 'text': 'So we have a navigation up here.', 'start': 305.486, 'duration': 2.783}, {'end': 309.13, 'text': "That's a block.", 'start': 308.369, 'duration': 0.761}, {'end': 311.172, 'text': 'We have the individual logo.', 'start': 309.21, 'duration': 1.962}, {'end': 312.212, 'text': 'We have the menu.', 'start': 311.232, 'duration': 0.98}, {'end': 316.474, 'text': 'Then we have this H1 element for the title.', 'start': 313.413, 'duration': 3.061}, {'end': 321.575, 'text': 'I decided to go against having this black line and just using this arrow instead.', 'start': 317.314, 'duration': 4.261}, {'end': 326.796, 'text': 'But our other blocks are just this graphic down, this mountains graphic and this tree graphic.', 'start': 322.055, 'duration': 4.741}, {'end': 330.617, 'text': 'And then outside of that, we have this.', 'start': 327.577, 'duration': 3.04}, {'end': 335.458, 'text': "So that's what we're gonna design for and get our HTML for setup rather.", 'start': 331.317, 'duration': 4.141}, {'end': 337.239, 'text': "So let's see here.", 'start': 335.598, 'duration': 1.641}], 'summary': 'Using figma, created a prototype with html/css, focusing on block elements and specific design features.', 'duration': 47.446, 'max_score': 289.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4289793.jpg'}], 'start': 175.497, 'title': 'Visual studio code image experimentation and setting up html and css with live reload', 'summary': 'Demonstrates experimenting with image values in visual studio code using forest.png and mountains.png, and setting up html and css with live reload, including creating a simple html markup, and linking main.css outside the images folder.', 'chapters': [{'end': 215.996, 'start': 175.497, 'title': 'Visual studio code image experimentation', 'summary': 'Shows experimenting with image values in visual studio code using forest.png and mountains.png from the images folder, with potential for further image optimization, and availability of files in the description.', 'duration': 40.499, 'highlights': ['Visual Studio Code experimentation with forest.png and mountains.png from the images folder.', 'Potential for further image optimization.', 'Availability of files in the description.']}, {'end': 504.904, 'start': 218.106, 'title': 'Setting up html and css with live reload', 'summary': 'Discusses setting up an index.html outside the images folder, linking the main.css in a css folder, using live reload and live server extensions, and creating a simple html markup for a webpage design.', 'duration': 286.798, 'highlights': ['Linking the main.css inside a CSS folder and using live reload and live server extensions. The chapter discusses the need to link the main.css inside a CSS folder and also mentions the use of live reload and live server extensions for the webpage setup.', 'Creating a simple HTML markup for a webpage design. The chapter explains the process of creating a simple HTML markup for a webpage design, including the use of containers, header, H1 element, and other elements for the webpage layout.', 'Importance of thinking in terms of blocks for HTML and CSS design. The chapter emphasizes the importance of thinking in terms of blocks for HTML and CSS design, focusing on elements like navigation, logo, H1 element, and other graphic elements for the webpage.']}], 'duration': 329.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4175497.jpg', 'highlights': ['Visual Studio Code experimentation with forest.png and mountains.png from the images folder.', 'Linking the main.css inside a CSS folder and using live reload and live server extensions.', 'Creating a simple HTML markup for a webpage design.', 'Importance of thinking in terms of blocks for HTML and CSS design.', 'Potential for further image optimization.', 'Availability of files in the description.']}, {'end': 727.284, 'segs': [{'end': 555.182, 'src': 'embed', 'start': 504.904, 'weight': 1, 'content': [{'end': 510.166, 'text': 'we have our two images, which are the mountain graphic and also the tree.', 'start': 504.904, 'duration': 5.262}, {'end': 513.727, 'text': 'so this is images forward, slash mountains dot, png.', 'start': 510.166, 'duration': 3.561}, {'end': 522.931, 'text': 'really, this should just be a jpeg, um, and then mountains for the alt here and then class mountains.', 'start': 513.727, 'duration': 9.204}, {'end': 525.438, 'text': "that's looking good.", 'start': 524.477, 'duration': 0.961}, {'end': 532.747, 'text': "um, let's replicate this trees, and this will be trees.", 'start': 525.438, 'duration': 7.309}, {'end': 533.788, 'text': "no, it's called forest.", 'start': 532.747, 'duration': 1.041}, {'end': 540.456, 'text': "actually, there we go, and then, um, we're having a class trees and um, i also reference this.", 'start': 533.788, 'duration': 6.668}, {'end': 543.057, 'text': "Actually, no, we're good.", 'start': 542.017, 'duration': 1.04}, {'end': 545.018, 'text': "I was going to give these IDs, but we don't need them.", 'start': 543.157, 'duration': 1.861}, {'end': 547.539, 'text': "We're not even referencing these in JavaScript, so we're fine.", 'start': 545.238, 'duration': 2.301}, {'end': 549.76, 'text': "All right, and so that's it.", 'start': 548.3, 'duration': 1.46}, {'end': 555.182, 'text': 'And if we go back and we look at our very ugly site, this is what it looks like so far.', 'start': 550.08, 'duration': 5.102}], 'summary': 'Creating web images: 2 images added, optimized formats, class & alt attributes used.', 'duration': 50.278, 'max_score': 504.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4504904.jpg'}, {'end': 679.875, 'src': 'embed', 'start': 626.708, 'weight': 0, 'content': [{'end': 630.089, 'text': 'So padding is going to be 2em all around.', 'start': 626.708, 'duration': 3.381}, {'end': 632.509, 'text': "So it's going to move things around.", 'start': 631.229, 'duration': 1.28}, {'end': 637.711, 'text': "We're going to do width 100%.", 'start': 633.209, 'duration': 4.502}, {'end': 638.991, 'text': "Actually, yeah, that's dumb.", 'start': 637.711, 'duration': 1.28}, {'end': 643.052, 'text': "What am I doing? We're going to do height 100 viewport height.", 'start': 639.171, 'duration': 3.881}, {'end': 645.624, 'text': "All right, so it's pushing things down.", 'start': 644.062, 'duration': 1.562}, {'end': 647.246, 'text': "Can't see anything yet, but don't worry.", 'start': 645.784, 'duration': 1.462}, {'end': 655.534, 'text': 'Actually, we can get that fixed up quite quickly just by addressing our mountains and trees.', 'start': 648.146, 'duration': 7.388}, {'end': 661.02, 'text': 'So mountains is a class and the trees are a class are applied to the two images.', 'start': 656.516, 'duration': 4.504}, {'end': 665.726, 'text': 'Position absolute because we want them to stack on top of each other.', 'start': 662.282, 'duration': 3.444}, {'end': 671.491, 'text': 'And we also want to put Z index negative one.', 'start': 667.169, 'duration': 4.322}, {'end': 675.613, 'text': "I know we still can't see them though, but we want the text that's on top of it to be visible.", 'start': 671.691, 'duration': 3.922}, {'end': 679.875, 'text': "So we're doing negative one and width 100% to make these images responsive.", 'start': 675.673, 'duration': 4.202}], 'summary': 'Applying 2em padding, 100% width, and using negative z index for responsive images', 'duration': 53.167, 'max_score': 626.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4626708.jpg'}, {'end': 721.821, 'src': 'heatmap', 'start': 691.2, 'weight': 1, 'content': [{'end': 694.882, 'text': "So mountains, we're gonna say top is zero.", 'start': 691.2, 'duration': 3.682}, {'end': 696.983, 'text': 'So there we go.', 'start': 696.323, 'duration': 0.66}, {'end': 699.225, 'text': 'We have our graphic starting to come along.', 'start': 697.163, 'duration': 2.062}, {'end': 705.269, 'text': "And then our trees, we're going to say top 18%.", 'start': 699.725, 'duration': 5.544}, {'end': 709.692, 'text': "So you're wondering, how did I know 18%? Because I was literally just experimenting with this.", 'start': 705.269, 'duration': 4.423}, {'end': 716.878, 'text': 'I wanted to get to the right, you know, I wanted to show a certain amount of mountains versus a certain amount of the trees.', 'start': 710.233, 'duration': 6.645}, {'end': 721.821, 'text': 'Again, if we change this to like 10%, it brings it up even higher.', 'start': 717.638, 'duration': 4.183}], 'summary': 'Graphic illustrating mountains at 0% and trees at 18% to achieve desired ratio.', 'duration': 30.621, 'max_score': 691.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4691200.jpg'}], 'start': 504.904, 'title': 'Image optimization and mobile viewport', 'summary': 'Covers optimizing images in html, addressing format conversion, alternative text, and image class organization, enhancing website layout. additionally, it discusses mobile viewport design, covering font styles, box sizing, and image positioning with specific percentages, aiming for a responsive layout and visual balance.', 'chapters': [{'end': 555.182, 'start': 504.904, 'title': 'Image optimization in html', 'summary': 'Covers the process of optimizing images in html, including converting image format, setting alternative text, and organizing image classes for a website, resulting in an improved website layout.', 'duration': 50.278, 'highlights': ["The process of optimizing images in HTML involves converting the mountain image from a png to a jpeg format, setting alternative text as 'mountains', and organizing the image class as 'mountains'.", "Organizing the tree image as 'forest', setting the class as 'trees', and not assigning IDs as they are not referenced in JavaScript leads to an improved website layout.", 'The optimization process results in an improved website layout, as demonstrated by the visual appearance of the site.']}, {'end': 727.284, 'start': 556.423, 'title': 'Mobile viewport design and styling', 'summary': 'Discusses designing for a mobile viewport, including setting font styles, box sizing, and positioning images with specific percentages, aiming to achieve a responsive layout and visual balance.', 'duration': 170.861, 'highlights': ['The chapter discusses designing for a mobile viewport, including setting font styles, box sizing, and positioning images with specific percentages, aiming to achieve a responsive layout and visual balance.', 'The speaker imports the Noble font with weights 400 and 700, sets the body tag properties for margin, height, background, and font family, and applies box sizing to border box for Before and after on everything.', 'The speaker sets the padding of the container to 2em all around, adjusts the width and height to 100% and 100 viewport height respectively, and positions the mountains and trees images with position absolute and Z index negative one for responsiveness.', 'The positioning of the mountains and trees images is fine-tuned by setting the top values, with the speaker explaining experimentation with percentages to achieve the desired visual balance.']}], 'duration': 222.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4504904.jpg', 'highlights': ['The optimization process results in an improved website layout, as demonstrated by the visual appearance of the site.', "Organizing the tree image as 'forest', setting the class as 'trees', and not assigning IDs as they are not referenced in JavaScript leads to an improved website layout.", "The process of optimizing images in HTML involves converting the mountain image from a png to a jpeg format, setting alternative text as 'mountains', and organizing the image class as 'mountains'.", 'The speaker sets the padding of the container to 2em all around, adjusts the width and height to 100% and 100 viewport height respectively, and positions the mountains and trees images with position absolute and Z index negative one for responsiveness.', 'The chapter discusses designing for a mobile viewport, including setting font styles, box sizing, and positioning images with specific percentages, aiming to achieve a responsive layout and visual balance.']}, {'end': 1296.59, 'segs': [{'end': 989.847, 'src': 'embed', 'start': 963.789, 'weight': 0, 'content': [{'end': 968.912, 'text': 'css and adding extra shapes and changes without having multiple divs,', 'start': 963.789, 'duration': 5.123}, {'end': 973.234, 'text': 'so you can just work off of the single same div to create something different in a sense.', 'start': 968.912, 'duration': 4.322}, {'end': 978.717, 'text': 'so the way you do that always is just put empty content and then we put position.', 'start': 973.234, 'duration': 5.483}, {'end': 989.847, 'text': 'absolute width is zero, height is going to be set to zero and the way we create a triangle And if you just Google create CSS triangle,', 'start': 978.717, 'duration': 11.13}], 'summary': 'Using css to create shapes like triangles with a single div.', 'duration': 26.058, 'max_score': 963.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4963789.jpg'}, {'end': 1075.272, 'src': 'embed', 'start': 1048.891, 'weight': 2, 'content': [{'end': 1056.518, 'text': 'So border color, we say white and then transparent three times.', 'start': 1048.891, 'duration': 7.627}, {'end': 1060.364, 'text': 'There we go.', 'start': 1059.824, 'duration': 0.54}, {'end': 1066.347, 'text': "So if you wondered like, how did I know to get this? Really, there's actually like a CSS triangle generator.", 'start': 1061.025, 'duration': 5.322}, {'end': 1067.948, 'text': "You just Google it, you'll find it.", 'start': 1066.587, 'duration': 1.361}, {'end': 1070.71, 'text': 'And it has a little nice interface for you to create it.', 'start': 1068.608, 'duration': 2.102}, {'end': 1072.39, 'text': 'And then it just gives you the CSS output.', 'start': 1070.75, 'duration': 1.64}, {'end': 1073.251, 'text': "That's how I did that.", 'start': 1072.55, 'duration': 0.701}, {'end': 1075.272, 'text': 'So there we go.', 'start': 1074.732, 'duration': 0.54}], 'summary': 'Using a css triangle generator to create a border with white and transparent colors.', 'duration': 26.381, 'max_score': 1048.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41048891.jpg'}, {'end': 1182.135, 'src': 'embed', 'start': 1144.528, 'weight': 1, 'content': [{'end': 1145.509, 'text': "We're going to say color white.", 'start': 1144.528, 'duration': 0.981}, {'end': 1147.811, 'text': 'There we go.', 'start': 1147.29, 'duration': 0.521}, {'end': 1152.214, 'text': "And then we're going to address the H2 as well.", 'start': 1148.131, 'duration': 4.083}, {'end': 1159.34, 'text': "We're going to say font size 3em, margin 0, and font weight normal.", 'start': 1152.234, 'duration': 7.106}, {'end': 1162.223, 'text': 'There we go.', 'start': 1161.923, 'duration': 0.3}, {'end': 1164.174, 'text': 'There we go.', 'start': 1163.513, 'duration': 0.661}, {'end': 1167.137, 'text': 'And then also our subtext.', 'start': 1165.696, 'duration': 1.441}, {'end': 1169.38, 'text': 'I think this is our last element, by the way.', 'start': 1167.818, 'duration': 1.562}, {'end': 1170.762, 'text': 'Then we can get to the fun stuff.', 'start': 1169.66, 'duration': 1.102}, {'end': 1173.525, 'text': 'Subtext, margin top, zero.', 'start': 1171.202, 'duration': 2.323}, {'end': 1177.549, 'text': 'Font size needs to be bigger, 1.4em.', 'start': 1174.686, 'duration': 2.863}, {'end': 1182.135, 'text': 'And text transform, uppercase.', 'start': 1178.791, 'duration': 3.344}], 'summary': 'Styling elements with css: font size, margin, text transform.', 'duration': 37.607, 'max_score': 1144.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41144528.jpg'}], 'start': 727.584, 'title': 'Css grid layout and responsive design', 'summary': 'Covers utilizing css grid layout and styling properties to align elements, setting row percentages, and creating css triangles. it also covers the design process in figma and the implementation of css for header elements, h2 element, subtext, and media queries, including adjustments for different viewport widths.', 'chapters': [{'end': 1075.272, 'start': 727.584, 'title': 'Css grid layout and styling', 'summary': 'Covers the process of utilizing css grid layout and styling properties to align elements, including setting row percentages and creating css triangles, with a focus on centering, positioning, and visual appearance.', 'duration': 347.688, 'highlights': ['The chapter emphasizes utilizing CSS grid layout and styling properties to align elements, including setting row percentages and creating CSS triangles. The speaker explains the process of utilizing CSS grid layout and styling properties to align elements, including setting row percentages and creating CSS triangles for visual appearance.', "The speaker demonstrates the use of 'display grid' and 'grid template rows' to set specific row percentages for the layout. The speaker demonstrates the use of 'display grid' and 'grid template rows' to set specific row percentages for the layout, such as 10% for the nav bar and 30% for the preserve nature section.", 'The process of creating CSS triangles is explained, emphasizing the use of positioning, border width, and color to achieve the desired visual appearance. The speaker explains the process of creating CSS triangles, emphasizing the use of positioning, border width, and color to achieve the desired visual appearance, including using a CSS triangle generator for assistance.']}, {'end': 1296.59, 'start': 1075.312, 'title': 'Styling and responsive design', 'summary': 'Covers the design process in figma and the implementation of css for header elements, h2 element, subtext, and media queries, including adjustments for different viewport widths.', 'duration': 221.278, 'highlights': ['Implemented CSS for header elements, H2 element, subtext, and media queries Demonstrates the application of CSS for various design elements and responsiveness, ensuring a seamless user experience.', 'Used media queries at 665, 930, and 1050 pixels to adjust design elements Shows the utilization of media queries to make design adjustments at specific viewport widths, enhancing the responsiveness of the layout.', 'Applied CSS rule sets to handle responsive design challenges Addressed responsive design challenges by adjusting the layout for different viewport widths using CSS rule sets, ensuring a visually appealing display.']}], 'duration': 569.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu4727584.jpg', 'highlights': ['The chapter emphasizes utilizing CSS grid layout and styling properties to align elements, including setting row percentages and creating CSS triangles.', 'Implemented CSS for header elements, H2 element, subtext, and media queries Demonstrates the application of CSS for various design elements and responsiveness, ensuring a seamless user experience.', 'The process of creating CSS triangles is explained, emphasizing the use of positioning, border width, and color to achieve the desired visual appearance.']}, {'end': 1527.732, 'segs': [{'end': 1371.528, 'src': 'heatmap', 'start': 1336.753, 'weight': 0, 'content': [{'end': 1340.796, 'text': "so, like i mentioned at the beginning of this video, there's a lot of ways to approach parallax.", 'start': 1336.753, 'duration': 4.043}, {'end': 1348.662, 'text': 'you can go the pure vanilla javascript way if you want, and you can also go through the third-party scripts and libraries route,', 'start': 1340.796, 'duration': 7.866}, {'end': 1350.203, 'text': "which is what we're going to do with lax.js.", 'start': 1348.662, 'duration': 1.541}, {'end': 1355.545, 'text': 'So, as you can see, we have this right here.', 'start': 1351.624, 'duration': 3.921}, {'end': 1360.066, 'text': 'This is the GitHub page for lax.js.', 'start': 1355.605, 'duration': 4.461}, {'end': 1362.286, 'text': "And you could see there's a bunch of examples.", 'start': 1360.086, 'duration': 2.2}, {'end': 1363.867, 'text': 'Shows you how to install it if you want.', 'start': 1362.326, 'duration': 1.541}, {'end': 1368.388, 'text': "We're going to use the quick option right here, a script source from a CDN.", 'start': 1363.907, 'duration': 4.481}, {'end': 1371.528, 'text': 'And then it just tells you to initialize the plugin.', 'start': 1368.928, 'duration': 2.6}], 'summary': 'The video discusses using lax.js for parallax, providing examples and installation guidance.', 'duration': 34.775, 'max_score': 1336.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41336753.jpg'}, {'end': 1527.732, 'src': 'heatmap', 'start': 1425.645, 'weight': 3, 'content': [{'end': 1426.485, 'text': 'So this is all it is.', 'start': 1425.645, 'duration': 0.84}, {'end': 1427.772, 'text': 'All right.', 'start': 1427.472, 'duration': 0.3}, {'end': 1429.773, 'text': "We don't have to do anything else.", 'start': 1427.852, 'duration': 1.921}, {'end': 1430.573, 'text': 'That is it.', 'start': 1430.113, 'duration': 0.46}, {'end': 1435.915, 'text': 'We only now deal with the HTML attribute values, um, in terms of getting this working.', 'start': 1430.613, 'duration': 5.302}, {'end': 1440.277, 'text': "So if we were to save it again, nothing's happening cause we're not doing anything.", 'start': 1436.355, 'duration': 3.922}, {'end': 1443.358, 'text': 'Um, again, nothing.', 'start': 1440.937, 'duration': 2.421}, {'end': 1449.14, 'text': "So let's first focus on this preserve nature text.", 'start': 1443.958, 'duration': 5.182}, {'end': 1449.72, 'text': 'All right.', 'start': 1449.42, 'duration': 0.3}, {'end': 1455.502, 'text': "The way I designed it in the, um, let's see our little demo here.", 'start': 1450.14, 'duration': 5.362}, {'end': 1460.989, 'text': 'which is right here, is it kind of goes up and it fades out.', 'start': 1457.008, 'duration': 3.981}, {'end': 1464.411, 'text': 'All right.', 'start': 1461.009, 'duration': 3.402}, {'end': 1470.153, 'text': "So what we do is that is, what is it? It's H1.", 'start': 1464.551, 'duration': 5.602}, {'end': 1472.174, 'text': "It's this H1 element right here.", 'start': 1470.593, 'duration': 1.581}, {'end': 1477.343, 'text': 'So what we do is we apply to it a class of lax.', 'start': 1472.934, 'duration': 4.409}, {'end': 1483.905, 'text': 'So everything has to have a class of lax that you want to apply any type of parallax effect to.', 'start': 1477.543, 'duration': 6.362}, {'end': 1488.566, 'text': 'Then we can use the custom data attribute.', 'start': 1485.285, 'duration': 3.281}, {'end': 1492.907, 'text': 'What is it that we want to change? We want to change the y value, the vertical value.', 'start': 1488.986, 'duration': 3.921}, {'end': 1495.148, 'text': 'We want it to go up.', 'start': 1492.987, 'duration': 2.161}, {'end': 1499.909, 'text': 'So we could say data hyphen lax hyphen translate hyphen y.', 'start': 1495.668, 'duration': 4.241}, {'end': 1504.793, 'text': 'Where does that come from? Well, it comes from right here.', 'start': 1500.709, 'duration': 4.084}, {'end': 1510.278, 'text': 'It comes from the documentation where it presents to you all the custom attributes.', 'start': 1505.434, 'duration': 4.844}, {'end': 1515.042, 'text': 'So data lacks translate Y.', 'start': 1511.019, 'duration': 4.023}, {'end': 1515.903, 'text': "That's where that comes from.", 'start': 1515.042, 'duration': 0.861}, {'end': 1523.329, 'text': 'all right, we say equals, and you put in with a lot of these.', 'start': 1516.804, 'duration': 6.525}, {'end': 1527.732, 'text': 'you have, uh, basically two parameters that are comma separated.', 'start': 1523.329, 'duration': 4.403}], 'summary': 'The transcript discusses applying parallax effect to html elements using custom attributes and classes.', 'duration': 63.181, 'max_score': 1425.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41425645.jpg'}], 'start': 1297.972, 'title': 'Implementing parallax effect with lax.js', 'summary': "Demonstrates how to implement a parallax effect for mobile using lax.js, a lightweight script weighing only 3kb minified and zipped, with various customization options and supported presets. it also discusses implementing a parallax effect using lax.js, focusing on applying classes and custom data attributes to html elements to achieve vertical movement, with emphasis on class 'lax' and custom data attribute 'data-lax-translate-y'.", 'chapters': [{'end': 1401.764, 'start': 1297.972, 'title': 'Implementing parallax effect with lax.js', 'summary': 'Demonstrates how to implement a parallax effect for mobile using lax.js, a lightweight script weighing only 3kb minified and zipped, with various customization options and supported presets.', 'duration': 103.792, 'highlights': ['lax.js is a lightweight script, only 3KB minified and zipped, with various customization options and supported presets lax.js is highlighted as a lightweight script, weighing only 3KB when minified and zipped, offering numerous customization options and supported presets.', 'Demonstrating the implementation of a parallax effect for mobile using lax.js The chapter focuses on demonstrating the implementation of a parallax effect for mobile specifically using lax.js.', 'Discussion on various ways to approach parallax, including vanilla JavaScript and third-party scripts like lax.js The chapter discusses different approaches to parallax, including vanilla JavaScript and third-party scripts like lax.js, providing insights into the available options.']}, {'end': 1527.732, 'start': 1401.804, 'title': 'Using lax.js for parallax effect', 'summary': "Discusses implementing a parallax effect using lax.js, focusing on applying classes and custom data attributes to html elements to achieve vertical movement, with emphasis on class 'lax' and custom data attribute 'data-lax-translate-y'.", 'duration': 125.928, 'highlights': ["Applying the 'lax' class to HTML elements enables the parallax effect, while the custom data attribute 'data-lax-translate-y' is used to specify the vertical movement, as per the documentation.", "The custom data attribute 'data-lax-translate-y' is crucial for defining the vertical movement in Lax.js, requiring two comma-separated parameters for its implementation."]}], 'duration': 229.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41297972.jpg', 'highlights': ['lax.js is a lightweight script, only 3KB minified and zipped, with various customization options and supported presets', 'Demonstrating the implementation of a parallax effect for mobile using lax.js', 'Discussion on various ways to approach parallax, including vanilla JavaScript and third-party scripts like lax.js', "Applying the 'lax' class to HTML elements enables the parallax effect, while the custom data attribute 'data-lax-translate-y' is used to specify the vertical movement, as per the documentation", "The custom data attribute 'data-lax-translate-y' is crucial for defining the vertical movement in Lax.js, requiring two comma-separated parameters for its implementation"]}, {'end': 1925.252, 'segs': [{'end': 1559.046, 'src': 'embed', 'start': 1527.732, 'weight': 0, 'content': [{'end': 1535.497, 'text': "um, i'm gonna put zero, zero here and then we're gonna say 400 and then negative 400 here.", 'start': 1527.732, 'duration': 7.765}, {'end': 1543.283, 'text': 'so, as you can see, it has, uh, changed the behavior of it.', 'start': 1535.497, 'duration': 7.786}, {'end': 1548.022, 'text': "it's actually moving faster than the rest of the page.", 'start': 1543.283, 'duration': 4.739}, {'end': 1550.783, 'text': "And that's what creates that interesting parallax effect.", 'start': 1548.182, 'duration': 2.601}, {'end': 1557.666, 'text': 'This first value is based on how long it will last.', 'start': 1552.244, 'duration': 5.422}, {'end': 1559.046, 'text': "It's not like milliseconds.", 'start': 1557.746, 'duration': 1.3}], 'summary': 'Changing the values to 0, 400, and -400 creates a faster parallax effect, based on duration not milliseconds.', 'duration': 31.314, 'max_score': 1527.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41527732.jpg'}, {'end': 1638.329, 'src': 'embed', 'start': 1585.355, 'weight': 1, 'content': [{'end': 1588.277, 'text': 'We could probably really make it fly off if we change this to like 3000.', 'start': 1585.355, 'duration': 2.922}, {'end': 1592.779, 'text': 'Oops So look at that.', 'start': 1588.277, 'duration': 4.502}, {'end': 1593.939, 'text': 'I mean, it just goes instantly.', 'start': 1592.839, 'duration': 1.1}, {'end': 1595.78, 'text': 'So you have a lot of control over it.', 'start': 1594.219, 'duration': 1.561}, {'end': 1599.267, 'text': "We're just going to leave it at 400.", 'start': 1595.8, 'duration': 3.467}, {'end': 1607.269, 'text': 'And if you also wanted it to fade out, which I kind of did in the mock-up, you can also add the data lacks opacity attribute and control it that way.', 'start': 1599.267, 'duration': 8.002}, {'end': 1608.87, 'text': "We're going to leave it like that for now though.", 'start': 1607.59, 'duration': 1.28}, {'end': 1612.311, 'text': "Next up, we're going to have our line.", 'start': 1609.51, 'duration': 2.801}, {'end': 1615.072, 'text': "So this line, we're just going to have fade out.", 'start': 1612.971, 'duration': 2.101}, {'end': 1625.455, 'text': "So we're going to say once again, class is lacks, and then we have to add data hyphen lacks hyphen opacity.", 'start': 1615.672, 'duration': 9.783}, {'end': 1631.865, 'text': "equals. we're going to say 0 and 1.", 'start': 1628.183, 'duration': 3.682}, {'end': 1638.329, 'text': 'the opacity is 1, and then we say for a duration of just 100 instead of 400.', 'start': 1631.865, 'duration': 6.464}], 'summary': 'Changing to 3000 instantly increases control. opacity set to fade out with 100 duration.', 'duration': 52.974, 'max_score': 1585.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41585355.jpg'}, {'end': 1698.975, 'src': 'heatmap', 'start': 1658.459, 'weight': 0.738, 'content': [{'end': 1660.28, 'text': "Oh, because I have two classes, I'm an idiot.", 'start': 1658.459, 'duration': 1.821}, {'end': 1663.122, 'text': 'There we go.', 'start': 1662.662, 'duration': 0.46}, {'end': 1667.104, 'text': 'Awesome All right.', 'start': 1666.164, 'duration': 0.94}, {'end': 1677.031, 'text': "So next up, we have, let's work in the mountains here and the trees, the thing that really makes the effect come together.", 'start': 1667.805, 'duration': 9.226}, {'end': 1679.792, 'text': "So we'll come down here to our two image sources.", 'start': 1677.491, 'duration': 2.301}, {'end': 1683.915, 'text': "And again, class, we're going to add lax to both of those.", 'start': 1680.553, 'duration': 3.362}, {'end': 1698.975, 'text': "And then we're going to have after that, um, data hyphen lacks hyphen translate Y equals again, zero one here, 400 and negative a hundred.", 'start': 1685.731, 'duration': 13.244}], 'summary': 'Adding effects to two image sources with data-lacks-translatey values of 0, -400, and -100.', 'duration': 40.516, 'max_score': 1658.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41658459.jpg'}, {'end': 1880.631, 'src': 'embed', 'start': 1784.283, 'weight': 3, 'content': [{'end': 1790.066, 'text': 'Hyphen opacity equals 0, 0, and 300, and then 1.', 'start': 1784.283, 'duration': 5.783}, {'end': 1794.73, 'text': 'So the opacity is going from 0 to 1.', 'start': 1790.066, 'duration': 4.664}, {'end': 1799.233, 'text': 'So here we are.', 'start': 1794.73, 'duration': 4.503}, {'end': 1801.294, 'text': 'We scroll.', 'start': 1800.714, 'duration': 0.58}, {'end': 1803.595, 'text': "And something's not right, though.", 'start': 1802.034, 'duration': 1.561}, {'end': 1805.136, 'text': 'Oops Yeah, because I did that.', 'start': 1803.736, 'duration': 1.4}, {'end': 1807.158, 'text': 'There we go.', 'start': 1805.157, 'duration': 2.001}, {'end': 1812.087, 'text': 'Check that out.', 'start': 1810.865, 'duration': 1.222}, {'end': 1823.324, 'text': 'And that is pretty close to what we had in the actual Figma prototype.', 'start': 1818.877, 'duration': 4.447}, {'end': 1842.732, 'text': 'if you wanted to make it like a smooth scroll, you could actually, i would make it so that when a person scrolls with it,', 'start': 1834.346, 'duration': 8.386}, {'end': 1849.897, 'text': "it'll automatically kind of come to this anchor point or so, or this anchor, and i it'll smooth scroll.", 'start': 1842.732, 'duration': 7.165}, {'end': 1857.182, 'text': 'or if you had like a side, one of those um side navigations where it has like the dots um you click on it,', 'start': 1849.897, 'duration': 7.285}, {'end': 1859.224, 'text': 'then it will scroll automatically to the section.', 'start': 1857.182, 'duration': 2.042}, {'end': 1860.425, 'text': 'you could do that as well, if you wish.', 'start': 1859.224, 'duration': 1.201}, {'end': 1863.06, 'text': 'All right, awesome, awesome stuff.', 'start': 1861.519, 'duration': 1.541}, {'end': 1865.121, 'text': 'Okay, so hopefully you enjoyed that.', 'start': 1863.58, 'duration': 1.541}, {'end': 1874.387, 'text': "If you did, once again, give me a like and also, most importantly, subscribe because I'm going to do a guitar playing reveal at 500, 000 subscribers.", 'start': 1865.221, 'duration': 9.166}, {'end': 1875.788, 'text': 'We should be getting there very quickly.', 'start': 1874.427, 'duration': 1.361}, {'end': 1878.53, 'text': 'Subscribe, subscribe, just smash it all the time.', 'start': 1876.228, 'duration': 2.302}, {'end': 1880.631, 'text': "All right, I'll see you guys real soon.", 'start': 1878.93, 'duration': 1.701}], 'summary': 'Demonstrated smooth scroll feature and encouraged subscriptions for guitar playing reveal at 500,000 subscribers.', 'duration': 96.348, 'max_score': 1784.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41784283.jpg'}], 'start': 1527.732, 'title': 'Creating parallax effect with scroll and parallax effect tutorial', 'summary': 'Demonstrates how to create a parallax effect by changing the behavior of an element based on scroll distance, with examples showing a greater negative value results in faster movement and the ability to control the duration and direction of the effect. it also covers the creation of a parallax effect for background mountains and tree line using specific data-lax-translate properties and opacity adjustments, achieving a prototype close to the figma design, with a suggestion for implementing smooth scroll and a call to action for subscription and likes.', 'chapters': [{'end': 1667.104, 'start': 1527.732, 'title': 'Creating parallax effect with scroll', 'summary': "Demonstrates how to create a parallax effect by changing the behavior of an element based on scroll distance, with examples showing that a greater negative value results in faster movement and the ability to control the duration and direction of the effect, while also explaining how to add a fade-out effect using the 'data-lacks-opacity' attribute.", 'duration': 139.372, 'highlights': ['The greater the negative value, like 900, the element will practically fly off the page. A greater negative value, such as 900, results in the element moving significantly faster, demonstrating the ability to control the speed and direction of the parallax effect.', 'Changing the value to 3000 causes the element to instantly fly off the page. By setting the value to 3000, the element instantly moves off the page, showcasing the level of control over the parallax effect.', "Adding the 'data-lacks-opacity' attribute allows control over the fade-out effect of the element. The 'data-lacks-opacity' attribute provides the capability to control the fade-out effect of the element, enabling the manipulation of opacity for the desired visual effect."]}, {'end': 1925.252, 'start': 1667.805, 'title': 'Parallax effect tutorial', 'summary': 'Covers the creation of a parallax effect for background mountains and tree line using specific data-lax-translate properties and opacity adjustments, achieving a prototype close to the figma design, with a suggestion for implementing smooth scroll and a call to action for subscription and likes.', 'duration': 257.447, 'highlights': ['The creation of the parallax effect is achieved by using specific data-lax-translate properties and opacity adjustments The tutorial demonstrates the use of data-lax-translate properties and opacity adjustments to create a parallax effect for background mountains and tree line, achieving a prototype close to the Figma design.', 'Suggestion for implementing smooth scroll and side navigations for automatic section scrolling The tutorial suggests the implementation of smooth scroll or side navigations for automatic section scrolling, providing options for enhancing the user experience.', 'Call to action for subscription and likes with a promise of a guitar playing reveal at 500,000 subscribers A call to action is made for viewers to subscribe and like the content, with a promise of a guitar playing reveal at 500,000 subscribers, emphasizing the importance of subscribing and liking the video.']}], 'duration': 397.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P5zGTEGPpu4/pics/P5zGTEGPpu41527732.jpg', 'highlights': ['A greater negative value, such as 900, results in the element moving significantly faster, demonstrating the ability to control the speed and direction of the parallax effect.', 'By setting the value to 3000, the element instantly moves off the page, showcasing the level of control over the parallax effect.', "The 'data-lacks-opacity' attribute provides the capability to control the fade-out effect of the element, enabling the manipulation of opacity for the desired visual effect.", 'The tutorial demonstrates the use of data-lax-translate properties and opacity adjustments to create a parallax effect for background mountains and tree line, achieving a prototype close to the Figma design.', 'The tutorial suggests the implementation of smooth scroll or side navigations for automatic section scrolling, providing options for enhancing the user experience.', 'A call to action is made for viewers to subscribe and like the content, with a promise of a guitar playing reveal at 500,000 subscribers, emphasizing the importance of subscribing and liking the video.']}], 'highlights': ['The tutorial focuses on demonstrating how to create a parallax effect using lax.js, a 3KB solution for integrating parallax, and its simple integration through a CDN.', 'The optimization process results in an improved website layout, as demonstrated by the visual appearance of the site.', 'The chapter emphasizes utilizing CSS grid layout and styling properties to align elements, including setting row percentages and creating CSS triangles.', 'lax.js is a lightweight script, only 3KB minified and zipped, with various customization options and supported presets', 'A greater negative value, such as 900, results in the element moving significantly faster, demonstrating the ability to control the speed and direction of the parallax effect.', 'By setting the value to 3000, the element instantly moves off the page, showcasing the level of control over the parallax effect.']}