title
Parallax on the Web (Part 1) - Parallax Examples

description
Let's look at several examples of Parallax on the web! "The phenomena of parallax is a result of having a perspective in in 3D space when movement is introduced to the observational experience." Examples ------ ## 1 - Fixed background, scrolling body http://www.ok-studios.de/home/ http://themes.tvda.eu/demos/kutcherstudio/ ## 2 - Slow Elements http://jason-kenny.com/ http://unfold.no/ http://www.apple.com/macbook/ ## 3 - Landing Elements http://www.apple.com/macbook] http://www.streamlineicons.com/ http://news.microsoft.com/stories/garage/index.html ## 4 - Multiple direction elements http://mainequarterly.com/thoreau/ https://carousel.dropbox.com/ ## 5 - Mouse movements http://stephband.info/jparallax/ http://www.alquimiawrg.com/#/home http://travisneilson.com/rootbeer-tasting/ ## 6 - thumbnails http://tympanus.net/Development/HoverEffectIdeas/ ## 7 - Follow the rabbit http://poppyspend.britishlegion.org.uk/ http://lostworldsfairs.com/atlantis/ http://benthebodyguard.com/index.php https://www.fiftythree.com/pencil ## 8 - Zooming elements http://travisneilson.com/workflow-tools/ http://www.nytimes.com/projects/2013/tomato-can-blues/?hp --- 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 1) - Parallax Examples', 'heatmap': [{'end': 191.014, 'start': 159.662, 'weight': 0.804}, {'end': 504.557, 'start': 477.574, 'weight': 0.869}, {'end': 684.725, 'start': 613.931, 'weight': 1}, {'end': 778.197, 'start': 747.218, 'weight': 0.773}, {'end': 1183.891, 'start': 1157.955, 'weight': 0.8}], 'summary': 'Provides in-depth insights into parallax effects, offering 20 real-life web design examples and discussing depth creation, interactive effects, mouse movements, and engaging narratives, with practical implementations and emphasis on enhancing user experiences.', 'chapters': [{'end': 191.014, 'segs': [{'end': 66.992, 'src': 'embed', 'start': 0.069, 'weight': 2, 'content': [{'end': 3.81, 'text': "Today, we're looking at one of the most requested topics in the comments below.", 'start': 0.069, 'duration': 3.741}, {'end': 6.47, 'text': "Today, we're looking at internet cat memes.", 'start': 4.23, 'duration': 2.24}, {'end': 8.531, 'text': 'Just kidding.', 'start': 8.01, 'duration': 0.521}, {'end': 10.171, 'text': "Today, we're looking at parallax.", 'start': 8.751, 'duration': 1.42}, {'end': 14.252, 'text': 'This will be a multi-part series.', 'start': 12.871, 'duration': 1.381}, {'end': 21.213, 'text': "This week, we're looking at just what parallax is and what are some more of the useful and effective examples of it.", 'start': 14.652, 'duration': 6.561}, {'end': 26.534, 'text': "Next week, we'll talk about how we can build these things using real-life code examples.", 'start': 21.893, 'duration': 4.641}, {'end': 37.34, 'text': 'Now, the hard thing about making a video about parallax is really just getting clear on what parallax is, or in other words,', 'start': 28.817, 'duration': 8.523}, {'end': 40.801, 'text': 'what implementation of parallax do we want to focus on?', 'start': 37.34, 'duration': 3.461}, {'end': 42.141, 'text': 'Let me show you what I mean.', 'start': 41.261, 'duration': 0.88}, {'end': 53.224, 'text': 'The phenomena of parallax is a result of having a perspective in 3D space when movement is introduced to the observational experience.', 'start': 42.161, 'duration': 11.063}, {'end': 59.707, 'text': "If I take my camera here and line up these toys I stole from my kids, I'm creating a perspective.", 'start': 54.245, 'duration': 5.462}, {'end': 66.992, 'text': 'You can see that the objects in the background appear smaller, and the one in the midground larger, and the one in the foreground the largest.', 'start': 60.308, 'duration': 6.684}], 'summary': 'Exploring parallax, a 3d perspective effect, and its examples.', 'duration': 66.923, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi069.jpg'}, {'end': 149.854, 'src': 'embed', 'start': 96.841, 'weight': 0, 'content': [{'end': 100.182, 'text': 'Binocular beings like us experience this all the time.', 'start': 96.841, 'duration': 3.341}, {'end': 107.784, 'text': 'We use it to understand the world around us, to tell if a car is coming close or away from us,', 'start': 100.602, 'duration': 7.182}, {'end': 111.385, 'text': 'to catch a frisbee and to tell if our crush is leaning in for the kiss.', 'start': 107.784, 'duration': 3.601}, {'end': 117.127, 'text': 'Astronomers use these parallax principles to measure the distance between galaxies.', 'start': 112.365, 'duration': 4.762}, {'end': 124.929, 'text': "It's a real thing, and we, as real things, connect with it because it is so.", 'start': 117.987, 'duration': 6.942}, {'end': 126.109, 'text': "But here's the rub.", 'start': 125.249, 'duration': 0.86}, {'end': 129.07, 'text': 'These digital surfaces are not real.', 'start': 126.51, 'duration': 2.56}, {'end': 131.671, 'text': "They're simulated experiences.", 'start': 129.61, 'duration': 2.061}, {'end': 134.832, 'text': 'We fake it, and there are a few ways to do that.', 'start': 132.631, 'duration': 2.201}, {'end': 144.235, 'text': 'There are a number of creative ways to use the principle of parallax to create an interesting feature on your webpage.', 'start': 138.053, 'duration': 6.182}, {'end': 147.576, 'text': "I have 20 examples that we're going to go through right now.", 'start': 144.895, 'duration': 2.681}, {'end': 149.854, 'text': "And I've broken them into eight sections.", 'start': 148.072, 'duration': 1.782}], 'summary': 'Parallax principles help understand the world, astronomers measure galaxy distances. digital surfaces are simulated. 20 examples of parallax features for webpages.', 'duration': 53.013, 'max_score': 96.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi096841.jpg'}, {'end': 191.014, 'src': 'heatmap', 'start': 159.662, 'weight': 0.804, 'content': [{'end': 166.088, 'text': 'And I mean, just as I described before, we have a few elements in the foreground and maybe you can take the liberty of blurring these elements here.', 'start': 159.662, 'duration': 6.426}, {'end': 168.209, 'text': "So they look like they're definitely in the foreground.", 'start': 166.308, 'duration': 1.901}, {'end': 173.221, 'text': 'And as we scroll the page, This main hero image stays exactly still.', 'start': 168.57, 'duration': 4.651}, {'end': 174.462, 'text': "It's just a fixed position.", 'start': 173.261, 'duration': 1.201}, {'end': 177.964, 'text': 'And the rest of the body will scroll by.', 'start': 175.363, 'duration': 2.601}, {'end': 181.827, 'text': 'The next section will cover that fixed position hero image.', 'start': 178.405, 'duration': 3.422}, {'end': 191.014, 'text': 'And then when it is done scrolling by, it will reveal another separate, different image, but fixed in the same way.', 'start': 182.388, 'duration': 8.626}], 'summary': 'Web design involves fixed position hero images and scrolling body content.', 'duration': 31.352, 'max_score': 159.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0159662.jpg'}], 'start': 0.069, 'title': 'Understanding parallax effect and phenomena', 'summary': 'Introduces and discusses the significance and practical applications of parallax, presenting real-life code implementations and 20 examples of its use in web design, aiming to clarify the concept and its applications in digital experiences.', 'chapters': [{'end': 42.141, 'start': 0.069, 'title': 'Understanding parallax effect', 'summary': 'Introduces the topic of parallax, emphasizing its significance and teasing a multi-part series, exploring useful examples and real-life code implementations, aiming to clarify the concept and its applications.', 'duration': 42.072, 'highlights': ["The chapter introduces the topic of parallax and its significance, addressing the audience's interest.", 'The chapter teases a multi-part series exploring useful examples and real-life code implementations.', 'The chapter emphasizes the challenge of clarifying the concept and its implementations.']}, {'end': 191.014, 'start': 42.161, 'title': 'Understanding parallax phenomena', 'summary': 'Discusses the concept of parallax, its relation to perspective, and its practical applications, including its use in web design to create engaging features. it also highlights the ways parallax is employed in digital experiences and presents 20 examples of its implementation.', 'duration': 148.853, 'highlights': ['Parallax is a result of having a perspective in 3D space when movement is introduced to the observational experience. The concept of parallax is explained as the result of introducing movement to the observational experience in 3D space.', 'Astronomers use parallax principles to measure the distance between galaxies. Parallax principles are utilized by astronomers to measure intergalactic distances, demonstrating its practical application in astronomy.', 'The chapter presents 20 examples of using parallax for creating engaging features in web design. The chapter provides 20 examples of using parallax for creating engaging features in web design, showcasing its versatility and practical application in digital experiences.']}], 'duration': 190.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi069.jpg', 'highlights': ['The chapter presents 20 examples of using parallax for creating engaging features in web design, showcasing its versatility and practical application in digital experiences.', 'Astronomers use parallax principles to measure the distance between galaxies, demonstrating its practical application in astronomy.', 'The chapter teases a multi-part series exploring useful examples and real-life code implementations.', "The chapter introduces the topic of parallax and its significance, addressing the audience's interest.", 'The chapter emphasizes the challenge of clarifying the concept and its implementations.', 'Parallax is a result of having a perspective in 3D space when movement is introduced to the observational experience.']}, {'end': 796.774, 'segs': [{'end': 260.18, 'src': 'embed', 'start': 191.394, 'weight': 0, 'content': [{'end': 199.96, 'text': "And this time we're using the same type of technique, having elements in the foreground that are blurred to make it seem like a really deep image.", 'start': 191.394, 'duration': 8.566}, {'end': 204.581, 'text': 'And in this way, of having foreground, mid-ground and background images right?', 'start': 200.43, 'duration': 4.151}, {'end': 205.945, 'text': 'Background is this?', 'start': 204.882, 'duration': 1.063}, {'end': 206.687, 'text': 'what do they call it??', 'start': 205.945, 'duration': 0.742}, {'end': 208.822, 'text': 'What are these things called? Toucans??', 'start': 207.602, 'duration': 1.22}, {'end': 210.103, 'text': "No, that's a flamingo.", 'start': 208.902, 'duration': 1.201}, {'end': 214.664, 'text': "Did you know that flamingos are not pink naturally? It's what they eat.", 'start': 210.863, 'duration': 3.801}, {'end': 217.705, 'text': "Anyway, there's a flamingo in the background.", 'start': 214.984, 'duration': 2.721}, {'end': 223.327, 'text': 'In the mid-ground would be this text block here and the logo.', 'start': 217.865, 'duration': 5.462}, {'end': 225.488, 'text': 'And the foreground would be this pencil.', 'start': 223.807, 'duration': 1.681}, {'end': 231.71, 'text': 'If they really wanted to accentuate this effect, they would have this pencil scrolling at a different pace.', 'start': 225.788, 'duration': 5.922}, {'end': 234.19, 'text': "That's just one nuance.", 'start': 232.87, 'duration': 1.32}, {'end': 239.512, 'text': 'And by not doing it actually made it a lot easier for them in terms of development complexity.', 'start': 234.651, 'duration': 4.861}, {'end': 242.453, 'text': 'Another example here is Cutcher Studios.', 'start': 240.273, 'duration': 2.18}, {'end': 253.317, 'text': "They have again these big background here, nice photography, and they're scrolling their website right on top of the background images.", 'start': 242.834, 'duration': 10.483}, {'end': 257.879, 'text': 'And these ones are actually using a carousel, so you can switch through the images here.', 'start': 253.717, 'duration': 4.162}, {'end': 260.18, 'text': "I'm not sure what.", 'start': 258.539, 'duration': 1.641}], 'summary': 'Using foreground, mid-ground, and background elements for depth perception. mention of flamingos not being naturally pink.', 'duration': 68.786, 'max_score': 191.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0191394.jpg'}, {'end': 349.439, 'src': 'embed', 'start': 323.823, 'weight': 3, 'content': [{'end': 329.246, 'text': "So this screen here adds an artistic effect, but also there's a technical reason for doing that.", 'start': 323.823, 'duration': 5.423}, {'end': 335.39, 'text': 'So this is the section, these two examples are what I call fixed background scrolling body.', 'start': 330.006, 'duration': 5.384}, {'end': 339.132, 'text': 'Okay, the next section is something I call slow elements.', 'start': 336.01, 'duration': 3.122}, {'end': 343.855, 'text': 'And this is when, basically, you have elements scrolling at different paces.', 'start': 339.792, 'duration': 4.063}, {'end': 349.439, 'text': 'In this case, we have this background, it looks fixed, but it is actually moving.', 'start': 344.656, 'duration': 4.783}], 'summary': 'Demonstrates artistic effects and technical features such as fixed background scrolling and slow elements.', 'duration': 25.616, 'max_score': 323.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0323823.jpg'}, {'end': 507.399, 'src': 'heatmap', 'start': 471.065, 'weight': 1, 'content': [{'end': 472.431, 'text': "I didn't realize I wasn't scrolled at the top.", 'start': 471.065, 'duration': 1.366}, {'end': 479.916, 'text': 'Clever All right, next one.', 'start': 477.574, 'duration': 2.342}, {'end': 487.923, 'text': "This one is still in the slow elements category and it's the new Apple MacBook promotion page, right? Their new golden MacBook.", 'start': 480.677, 'duration': 7.246}, {'end': 495.569, 'text': "This effect they're doing right here where the MacBook just like is falling through the air and opening and like landing gracefully right here.", 'start': 488.483, 'duration': 7.086}, {'end': 497.671, 'text': 'This is an interesting effect.', 'start': 496.23, 'duration': 1.441}, {'end': 504.557, 'text': "I won't like dive too much into it, but they're controlling a video by how much you scroll.", 'start': 497.731, 'duration': 6.826}, {'end': 507.399, 'text': "So it's really interesting, really unique and complex.", 'start': 504.637, 'duration': 2.762}], 'summary': "Reviewing the unique and complex scrolling-controlled video effect on apple's new golden macbook promotion page.", 'duration': 36.334, 'max_score': 471.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0471065.jpg'}, {'end': 684.725, 'src': 'heatmap', 'start': 613.931, 'weight': 1, 'content': [{'end': 615.012, 'text': 'Let me show you what I mean.', 'start': 613.931, 'duration': 1.081}, {'end': 618.374, 'text': 'When I scroll down, we have the MacBook effect, which again is just brilliant.', 'start': 615.332, 'duration': 3.042}, {'end': 621.456, 'text': 'But right here at the bottom, look under this paragraph.', 'start': 618.975, 'duration': 2.481}, {'end': 624.318, 'text': 'Did you see those numbers appear? It was really subtle.', 'start': 621.476, 'duration': 2.842}, {'end': 626.8, 'text': 'They just kind of scoot in from the right.', 'start': 624.358, 'duration': 2.442}, {'end': 628.541, 'text': 'Let me refresh and do that again.', 'start': 626.82, 'duration': 1.721}, {'end': 630.463, 'text': 'Pay attention to the bottom right here.', 'start': 628.922, 'duration': 1.541}, {'end': 637.992, 'text': "When I'm scrolling, See those numbers? They all kind of parallax in at different speeds.", 'start': 631.463, 'duration': 6.529}, {'end': 643.576, 'text': 'The larger numbers come in faster than the labels, the little letters down at the bottom.', 'start': 638.492, 'duration': 5.084}, {'end': 645.438, 'text': 'It makes a really, really great effect.', 'start': 643.716, 'duration': 1.722}, {'end': 648.5, 'text': "It brings attention to the statistics that they're trying to point out.", 'start': 645.518, 'duration': 2.982}, {'end': 652.724, 'text': "They want to show that this MacBook is light, that it's thin, and that it has a great display.", 'start': 648.54, 'duration': 4.184}, {'end': 656.01, 'text': 'So I think they use it in a really great way.', 'start': 654.189, 'duration': 1.821}, {'end': 659.452, 'text': "Let's look at the next website in this section of landing elements.", 'start': 656.05, 'duration': 3.402}, {'end': 661.853, 'text': 'This is called Streamline.', 'start': 659.892, 'duration': 1.961}, {'end': 662.894, 'text': "They're selling icons.", 'start': 661.874, 'duration': 1.02}, {'end': 670.198, 'text': "Let me refresh the page and you'll see like, it's compared to the subtlety of the Apple website that we just looked at.", 'start': 662.954, 'duration': 7.244}, {'end': 672.259, 'text': 'This is like a lot more aggressive.', 'start': 670.678, 'duration': 1.581}, {'end': 673.54, 'text': 'So let me refresh this and watch.', 'start': 672.299, 'duration': 1.241}, {'end': 678.302, 'text': "Everything's just jumping in all at once.", 'start': 676.241, 'duration': 2.061}, {'end': 680.843, 'text': 'I think the whole page just assembled itself.', 'start': 678.402, 'duration': 2.441}, {'end': 684.725, 'text': 'The illustrations, the icons down below, the headlines, these buttons popped in.', 'start': 680.883, 'duration': 3.842}], 'summary': 'Macbook website uses subtle parallax effect to highlight statistics, while streamline website is more aggressive with jumping-in elements.', 'duration': 70.794, 'max_score': 613.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0613931.jpg'}, {'end': 684.725, 'src': 'embed', 'start': 654.189, 'weight': 4, 'content': [{'end': 656.01, 'text': 'So I think they use it in a really great way.', 'start': 654.189, 'duration': 1.821}, {'end': 659.452, 'text': "Let's look at the next website in this section of landing elements.", 'start': 656.05, 'duration': 3.402}, {'end': 661.853, 'text': 'This is called Streamline.', 'start': 659.892, 'duration': 1.961}, {'end': 662.894, 'text': "They're selling icons.", 'start': 661.874, 'duration': 1.02}, {'end': 670.198, 'text': "Let me refresh the page and you'll see like, it's compared to the subtlety of the Apple website that we just looked at.", 'start': 662.954, 'duration': 7.244}, {'end': 672.259, 'text': 'This is like a lot more aggressive.', 'start': 670.678, 'duration': 1.581}, {'end': 673.54, 'text': 'So let me refresh this and watch.', 'start': 672.299, 'duration': 1.241}, {'end': 678.302, 'text': "Everything's just jumping in all at once.", 'start': 676.241, 'duration': 2.061}, {'end': 680.843, 'text': 'I think the whole page just assembled itself.', 'start': 678.402, 'duration': 2.441}, {'end': 684.725, 'text': 'The illustrations, the icons down below, the headlines, these buttons popped in.', 'start': 680.883, 'duration': 3.842}], 'summary': 'Streamline website uses aggressive design with all elements jumping in at once.', 'duration': 30.536, 'max_score': 654.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0654189.jpg'}, {'end': 796.774, 'src': 'heatmap', 'start': 747.218, 'weight': 5, 'content': [{'end': 752.16, 'text': 'So, and, and, and it also might keep you scrolling to see like what else is going to jump in.', 'start': 747.218, 'duration': 4.942}, {'end': 760.963, 'text': "And I don't know, I have mixed feelings about just see that these phones jumped all the way across the screen.", 'start': 752.4, 'duration': 8.563}, {'end': 768.672, 'text': 'Amazing Now, this one is done using a library, actually.', 'start': 763.464, 'duration': 5.208}, {'end': 770.333, 'text': "There's a library for all these jumping nests.", 'start': 768.692, 'duration': 1.641}, {'end': 772.154, 'text': "I forgot what it's called.", 'start': 770.373, 'duration': 1.781}, {'end': 778.197, 'text': "I think it's called wow.js.", 'start': 772.174, 'duration': 6.023}, {'end': 779.418, 'text': 'Is that right? .', 'start': 778.918, 'duration': 0.5}, {'end': 785.281, 'text': 'js Yeah, this guy, wow.js.', 'start': 781.879, 'duration': 3.402}, {'end': 789.703, 'text': 'Everything you could possibly think of.', 'start': 788.282, 'duration': 1.421}, {'end': 792.633, 'text': 'Oh, goodness.', 'start': 791.853, 'duration': 0.78}, {'end': 795.914, 'text': "Okay, so wow.js is the library that they're using here, by the way.", 'start': 792.713, 'duration': 3.201}, {'end': 796.774, 'text': 'All right.', 'start': 795.934, 'duration': 0.84}], 'summary': 'Discussion about using wow.js library for phone jumping effects.', 'duration': 33.31, 'max_score': 747.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0747218.jpg'}], 'start': 191.394, 'title': 'Depth and effects in web design', 'summary': 'Discusses creating depth in web design through foreground, mid-ground, and background images, simplifying development complexity. it also explores web design effects to improve browsing experience and user interaction, exemplified by instances like the apple macbook promotion page and streamline icons website.', 'chapters': [{'end': 278.129, 'start': 191.394, 'title': 'Depth technique in web design', 'summary': 'Discusses the technique of creating depth in web design through the use of foreground, mid-ground, and background images, exemplified by instances of blurred elements and black overlays, simplifying development complexity and showcasing visual effects.', 'duration': 86.735, 'highlights': ['The technique of creating depth in web design through foreground, mid-ground, and background images is discussed, exemplified by instances of blurred elements and black overlays, simplifying development complexity and showcasing visual effects.', 'Flamingos are not naturally pink; their color is a result of their diet, which adds an interesting, engaging fact to the discussion.', 'Cutcher Studios is highlighted as an example of utilizing the technique, where the website scrolls on top of background images, incorporating a carousel feature for image switching, showcasing a practical application of the depth technique.']}, {'end': 796.774, 'start': 278.549, 'title': 'Web design effects analysis', 'summary': 'Discusses various web design effects, including the use of slow elements, landing elements, and the technical and artistic reasons behind them, aiming to improve the browsing experience and user interaction, as seen in examples like the apple macbook promotion page and streamline icons website.', 'duration': 518.225, 'highlights': ['The technical and artistic reasons behind using slow elements and landing elements in web design are discussed, aiming to improve browsing experience and user interaction. N/A', "The Apple MacBook promotion page utilizes a unique parallax effect, controlling a video by scroll and using subtlety to enhance the user's experience without detracting from the message. N/A", 'The Streamline website uses a more aggressive approach with elements jumping in all at once, potentially creating interest and keeping users scrolling, although it may be considered heavy-handed. N/A', 'The wow.js library is mentioned as a tool used for creating jumping effects on the Streamline website, showcasing the wide range of effects it offers for web design. N/A']}], 'duration': 605.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0191394.jpg', 'highlights': ['The technique of creating depth in web design through foreground, mid-ground, and background images is discussed, exemplified by instances of blurred elements and black overlays, simplifying development complexity and showcasing visual effects.', "The Apple MacBook promotion page utilizes a unique parallax effect, controlling a video by scroll and using subtlety to enhance the user's experience without detracting from the message.", 'Cutcher Studios is highlighted as an example of utilizing the technique, where the website scrolls on top of background images, incorporating a carousel feature for image switching, showcasing a practical application of the depth technique.', 'The technical and artistic reasons behind using slow elements and landing elements in web design are discussed, aiming to improve browsing experience and user interaction.', 'The Streamline website uses a more aggressive approach with elements jumping in all at once, potentially creating interest and keeping users scrolling, although it may be considered heavy-handed.', 'The wow.js library is mentioned as a tool used for creating jumping effects on the Streamline website, showcasing the wide range of effects it offers for web design.', 'Flamingos are not naturally pink; their color is a result of their diet, which adds an interesting, engaging fact to the discussion.']}, {'end': 1215.271, 'segs': [{'end': 876.007, 'src': 'embed', 'start': 845.7, 'weight': 0, 'content': [{'end': 847.421, 'text': 'This is like where they experiment on things.', 'start': 845.7, 'duration': 1.721}, {'end': 854.082, 'text': 'They have a bunch of engineers and designers working together in a really messy environment to innovate new creative things.', 'start': 847.441, 'duration': 6.641}, {'end': 864.804, 'text': 'So they want to make it feel really, really, you know, kind of haphazard and creative, and just like mad science, right?', 'start': 854.122, 'duration': 10.682}, {'end': 866.965, 'text': 'And so when they scroll down, let me refresh that.', 'start': 865.144, 'duration': 1.821}, {'end': 872.085, 'text': 'When you scroll down these things, kind of just like looks like a table that just got thrown, you know,', 'start': 867.185, 'duration': 4.9}, {'end': 876.007, 'text': 'like some capacitors on and some motherboards on right here.', 'start': 872.085, 'duration': 3.922}], 'summary': 'Engineers and designers work in a messy, creative environment to innovate new things, resembling a mad science lab.', 'duration': 30.307, 'max_score': 845.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0845700.jpg'}, {'end': 913.642, 'src': 'embed', 'start': 887.935, 'weight': 1, 'content': [{'end': 894.377, 'text': "And that's nice as well, because, remember, you can use these, this idea of landing elements,", 'start': 887.935, 'duration': 6.442}, {'end': 898.959, 'text': 'to create interest to things that the user should interact with.', 'start': 894.377, 'duration': 4.582}, {'end': 909.484, 'text': 'So if these controls here were there the whole time and I had to mouse over them for them to respond, for example, give me this animation of yes,', 'start': 899.339, 'duration': 10.145}, {'end': 910.164, 'text': 'please click me.', 'start': 909.484, 'duration': 0.68}, {'end': 913.642, 'text': 'it would be less noticeable, right?', 'start': 911.68, 'duration': 1.962}], 'summary': 'Using landing elements creates interest and increases user interaction.', 'duration': 25.707, 'max_score': 887.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0887935.jpg'}, {'end': 976.856, 'src': 'embed', 'start': 953.052, 'weight': 2, 'content': [{'end': 961.071, 'text': "The text is moving, and this is not what I'm talking about, but this is a great example of fixed background moving elements that we discussed earlier,", 'start': 953.052, 'duration': 8.019}, {'end': 970.072, 'text': "right?. But when we get down here, we have this bisected view two full screen images and one's a video.", 'start': 961.071, 'duration': 9.001}, {'end': 972.214, 'text': 'And watch this.', 'start': 970.352, 'duration': 1.862}, {'end': 976.856, 'text': 'My screen locks, my scroll kind of locks.', 'start': 974.295, 'duration': 2.561}], 'summary': 'The transcript discusses fixed background moving elements and bisected view with two full-screen images and a video.', 'duration': 23.804, 'max_score': 953.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0953052.jpg'}, {'end': 1082.758, 'src': 'embed', 'start': 1054.508, 'weight': 3, 'content': [{'end': 1058.851, 'text': 'This mainquarterly.com slash throw is full of this stuff.', 'start': 1054.508, 'duration': 4.343}, {'end': 1062.112, 'text': 'Look at that big, big background video.', 'start': 1059.251, 'duration': 2.861}, {'end': 1063.153, 'text': 'I like it.', 'start': 1062.753, 'duration': 0.4}, {'end': 1065.341, 'text': 'Very interesting website.', 'start': 1064.4, 'duration': 0.941}, {'end': 1065.922, 'text': 'All right.', 'start': 1065.361, 'duration': 0.561}, {'end': 1071.307, 'text': 'The next one that has multiple direction elements is really cool.', 'start': 1066.302, 'duration': 5.005}, {'end': 1076.612, 'text': 'This one is called carousel.dropbox.com.', 'start': 1072.208, 'duration': 4.404}, {'end': 1080.356, 'text': 'And Carousel is a product that Dropbox has created.', 'start': 1076.732, 'duration': 3.624}, {'end': 1082.758, 'text': "And it's really cool.", 'start': 1081.077, 'duration': 1.681}], 'summary': 'Review of mainquarterly.com and carousel.dropbox.com websites.', 'duration': 28.25, 'max_score': 1054.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01054508.jpg'}, {'end': 1187.311, 'src': 'heatmap', 'start': 1157.955, 'weight': 0.8, 'content': [{'end': 1161.577, 'text': "These are things that are happening depending on where you're placing your mouse.", 'start': 1157.955, 'duration': 3.622}, {'end': 1165.86, 'text': 'This one is an example of jParallax, which is a jQuery plugin.', 'start': 1162.078, 'duration': 3.782}, {'end': 1170.883, 'text': 'So depending on where I have my mouse, the parallax is happening.', 'start': 1166.22, 'duration': 4.663}, {'end': 1177.487, 'text': 'But we have the same elements of quickly moving foregrounds, moderately moving midgrounds, and slowly moving backgrounds.', 'start': 1170.923, 'duration': 6.564}, {'end': 1183.891, 'text': 'See that sun is barely moving, but this foreground of these trees and whatever is moving very quickly.', 'start': 1177.527, 'duration': 6.364}, {'end': 1187.311, 'text': 'They have tons of really interesting examples.', 'start': 1184.329, 'duration': 2.982}], 'summary': 'Jparallax, a jquery plugin, creates parallax effects based on mouse position.', 'duration': 29.356, 'max_score': 1157.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01157955.jpg'}], 'start': 796.774, 'title': "Microsoft's landing page and interactive web design effects", 'summary': "Delves into microsoft's landing page, exploring design elements like the messy desk effect and dynamic slideshow controls. it also discusses interactive web design effects like fixed background moving elements, bisected view, and multiple direction elements, using examples from mainquarterly.com/throw and carousel.dropbox.com.", 'chapters': [{'end': 952.599, 'start': 796.774, 'title': 'Microsoft landing page analysis', 'summary': "Discusses the landing elements on microsoft's web page, highlighting the use of subtle design elements to create interest and engagement, showcasing a messy desk effect to represent a creative environment, and employing dynamic slideshow controls to capture user attention and interaction.", 'duration': 155.825, 'highlights': ['Microsoft showcases a messy desk effect on its web page to represent a creative environment, adding to the haphazard and innovative vibe, creating user engagement (e.g., engineers and designers working in a messy environment).', 'Dynamic slideshow controls are used on the Microsoft web page, with the controls appearing after scrolling to capture user attention and interaction, leveraging the concept of landing elements (e.g., creating interest and prompting interaction).', "Microsoft's web page employs subtle design elements to create interest and engagement, utilizing the concept of landing elements to prompt user interaction and enhance user experience."]}, {'end': 1215.271, 'start': 953.052, 'title': 'Interactive web design effects', 'summary': 'Discusses various interactive web design effects such as fixed background moving elements, bisected view with full screen images and videos, and multiple direction elements, and how these designs can be disorienting yet effective in keeping users scrolling, using examples such as mainquarterly.com/throw and carousel.dropbox.com.', 'duration': 262.219, 'highlights': ['The chapter discusses the disorienting yet effective interactive web design effects, such as fixed background moving elements, bisected view with full screen images and videos, and multiple direction elements. The chapter explores various interactive web design effects, including fixed background moving elements, bisected view with full screen images and videos, and multiple direction elements.', 'The design is disorienting and agitating, yet it effectively keeps users scrolling, as observed in the examples of mainquarterly.com/throw and carousel.dropbox.com. The design is disorienting and agitating, yet it effectively keeps users scrolling, as observed in the examples of mainquarterly.com/throw and carousel.dropbox.com.', 'The chapter also touches on mouse movements and jParallax as examples of interactive web design effects, with mentions of quickly moving foregrounds, moderately moving midgrounds, and slowly moving backgrounds. The chapter also touches on mouse movements and jParallax as examples of interactive web design effects, with mentions of quickly moving foregrounds, moderately moving midgrounds, and slowly moving backgrounds.']}], 'duration': 418.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi0796774.jpg', 'highlights': ['Microsoft showcases a messy desk effect on its web page to represent a creative environment, adding to the haphazard and innovative vibe, creating user engagement (e.g., engineers and designers working in a messy environment).', 'Dynamic slideshow controls are used on the Microsoft web page, with the controls appearing after scrolling to capture user attention and interaction, leveraging the concept of landing elements (e.g., creating interest and prompting interaction).', 'The chapter discusses the disorienting yet effective interactive web design effects, such as fixed background moving elements, bisected view with full screen images and videos, and multiple direction elements. The chapter explores various interactive web design effects, including fixed background moving elements, bisected view with full screen images and videos, and multiple direction elements.', 'The design is disorienting and agitating, yet it effectively keeps users scrolling, as observed in the examples of mainquarterly.com/throw and carousel.dropbox.com. The design is disorienting and agitating, yet it effectively keeps users scrolling, as observed in the examples of mainquarterly.com/throw and carousel.dropbox.com.']}, {'end': 1420.03, 'segs': [{'end': 1309.531, 'src': 'embed', 'start': 1215.811, 'weight': 3, 'content': [{'end': 1223.753, 'text': 'Anyway, the next one of this, what is it called? Mouse Movements Parallax is this one.', 'start': 1215.811, 'duration': 7.942}, {'end': 1225.974, 'text': 'So they created a cool star field effect.', 'start': 1223.933, 'duration': 2.041}, {'end': 1231.695, 'text': 'And wherever I move my mouse, the star field is moving.', 'start': 1226.614, 'duration': 5.081}, {'end': 1233.436, 'text': 'So they have stars in the foreground.', 'start': 1231.715, 'duration': 1.721}, {'end': 1234.096, 'text': "They're brighter.", 'start': 1233.476, 'duration': 0.62}, {'end': 1236.937, 'text': 'They have some astrological signs.', 'start': 1234.496, 'duration': 2.441}, {'end': 1242.619, 'text': 'and whatnot in the background.', 'start': 1241.198, 'duration': 1.421}, {'end': 1249.962, 'text': 'But the content, I wanna bring your attention to this fact, the content is not parallaxing.', 'start': 1243.639, 'duration': 6.323}, {'end': 1253.464, 'text': 'This menu is the same everywhere I go.', 'start': 1251.203, 'duration': 2.261}, {'end': 1260.767, 'text': 'When I click into one of these elements, the content is just giving me a regular scroll, so.', 'start': 1253.484, 'duration': 7.283}, {'end': 1263.519, 'text': 'The next one is actually my own website.', 'start': 1261.738, 'duration': 1.781}, {'end': 1270.261, 'text': 'I did a root beer tasting article, but I wanted the navigation here to not be a dropdown or a side scroll.', 'start': 1263.539, 'duration': 6.722}, {'end': 1272.802, 'text': 'So I put it all up in the top and then I parallaxed it.', 'start': 1270.301, 'duration': 2.501}, {'end': 1282.966, 'text': "So no matter where you are in the top, you can get to one of these root beers, but it's going to bring more of that navigation into the top.", 'start': 1273.322, 'duration': 9.644}, {'end': 1284.487, 'text': "It's very experimental.", 'start': 1283.006, 'duration': 1.481}, {'end': 1289.53, 'text': "I wouldn't do this with a production level website because it's not really that intuitive.", 'start': 1284.547, 'duration': 4.983}, {'end': 1300.976, 'text': 'But it is an interesting way of using the parallax via the mouse movement effect to show you that there are different navigational items to explore.', 'start': 1289.95, 'duration': 11.026}, {'end': 1302.697, 'text': 'Cool All right.', 'start': 1301.376, 'duration': 1.321}, {'end': 1305.198, 'text': 'The next section, I just have one example.', 'start': 1302.977, 'duration': 2.221}, {'end': 1306.639, 'text': 'And this is just called Thumbnailing.', 'start': 1305.258, 'duration': 1.381}, {'end': 1309.531, 'text': 'I just called it thumbnail-ing.', 'start': 1308.59, 'duration': 0.941}], 'summary': 'Transcript discusses mouse movement parallax and root beer tasting article with experimental parallax navigation.', 'duration': 93.72, 'max_score': 1215.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01215811.jpg'}, {'end': 1381.42, 'src': 'embed', 'start': 1330.227, 'weight': 0, 'content': [{'end': 1333.869, 'text': 'So in these lily examples, the background is sliding to the right.', 'start': 1330.227, 'duration': 3.642}, {'end': 1338.865, 'text': 'Sadie, nothing is happening in terms of the background.', 'start': 1335.643, 'duration': 3.222}, {'end': 1339.586, 'text': 'Let me find another one.', 'start': 1338.885, 'duration': 0.701}, {'end': 1344.189, 'text': 'Okay, these Layla examples, the background is sliding down.', 'start': 1339.686, 'duration': 4.503}, {'end': 1351.313, 'text': "They're just parallaxing, moving a little bit differently than you normally would expect, creating a little bit more of a three-dimensional view.", 'start': 1344.209, 'duration': 7.104}, {'end': 1354.555, 'text': "There's another one here, Ruby.", 'start': 1352.494, 'duration': 2.061}, {'end': 1363.301, 'text': "Ruby is gonna give you a little bit more of that depth of feed because they're actually zooming out when you hover over this background.", 'start': 1355.176, 'duration': 8.125}, {'end': 1372.671, 'text': "Now there's this website, typanus.codrops.com, or codrops.typanus.com.", 'start': 1365.323, 'duration': 7.348}, {'end': 1375.294, 'text': "It's got tons of these really great examples.", 'start': 1373.231, 'duration': 2.063}, {'end': 1381.42, 'text': "I'm really inspired by these people all the time, but this is an article called, I think, Subtle Hover Effects.", 'start': 1375.334, 'duration': 6.086}], 'summary': 'Examples of parallax effects with different background movements for depth and 3d view.', 'duration': 51.193, 'max_score': 1330.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01330227.jpg'}, {'end': 1431.799, 'src': 'embed', 'start': 1401.001, 'weight': 2, 'content': [{'end': 1404.803, 'text': 'The next section I have is called I call follow the rabbit.', 'start': 1401.001, 'duration': 3.802}, {'end': 1412.666, 'text': 'okay?. So in the follow the rabbit parallax event, or in the follow the rabbit parallax category,', 'start': 1404.803, 'duration': 7.863}, {'end': 1417.929, 'text': "you're gonna have something on the screen that is more or less stable.", 'start': 1412.666, 'duration': 5.263}, {'end': 1420.03, 'text': "and it's going to be fixed.", 'start': 1418.889, 'duration': 1.141}, {'end': 1431.799, 'text': 'And as you scroll, things are going to be happening around and to it to create a narrative and hopefully portray the message of the web design.', 'start': 1420.13, 'duration': 11.669}], 'summary': "In the 'follow the rabbit' parallax event, a stable image on the screen will have dynamic elements as you scroll, creating a narrative for web design.", 'duration': 30.798, 'max_score': 1401.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01401001.jpg'}], 'start': 1215.811, 'title': 'Parallax mouse movements', 'summary': 'Discusses mouse movements parallax and its real-life example, showcases parallax mouse movement for different navigational items, and explores parallax and hover effects with emphasis on unique parallax movements and examples from typanus.codrops.com.', 'chapters': [{'end': 1289.53, 'start': 1215.811, 'title': 'Mouse movements parallax', 'summary': "Discusses the concept of mouse movements parallax, featuring a star field effect that moves with mouse movements, with a real-life example of parallaxing a website's navigation for root beer tasting article.", 'duration': 73.719, 'highlights': ['The chapter discusses the concept of Mouse Movements Parallax, featuring a star field effect that moves with mouse movements.', "The transcript includes a real-life example of parallaxing a website's navigation for a root beer tasting article.", 'The content is not parallaxing as the menu remains the same everywhere, and the content gives a regular scroll when clicked into an element.']}, {'end': 1354.555, 'start': 1289.95, 'title': 'Parallax mouse movement for navigational items', 'summary': 'Explores the use of parallax mouse movement to showcase different navigational items, with examples demonstrating unique parallax movements in different directions such as sliding to the right, down, and more.', 'duration': 64.605, 'highlights': ['The chapter explores the use of parallax mouse movement to showcase different navigational items, with examples demonstrating unique parallax movements in different directions such as sliding to the right, down, and more.', 'The examples showcase parallax movement in various directions, including sliding to the right, down, and other unique movements, creating a three-dimensional view.']}, {'end': 1420.03, 'start': 1355.176, 'title': 'Parallax and hover effects', 'summary': "Discusses parallax and hover effects, emphasizing the utilization of examples from typanus.codrops.com and the concept of 'follow the rabbit' parallax event.", 'duration': 64.854, 'highlights': ['The website typanus.codrops.com provides numerous examples of parallax and hover effects, serving as a valuable source of inspiration and learning for web designers.', "The article 'Subtle Hover Effects' on typanus.codrops.com showcases the effective use of parallax in a charming way, recommending it as a must-see resource for web designers.", "The concept of 'follow the rabbit' parallax event involves maintaining a stable and fixed element on the screen, offering a specific approach to implementing parallax effects."]}], 'duration': 204.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01215811.jpg', 'highlights': ['The website typanus.codrops.com provides numerous examples of parallax and hover effects, serving as a valuable source of inspiration and learning for web designers.', "The article 'Subtle Hover Effects' on typanus.codrops.com showcases the effective use of parallax in a charming way, recommending it as a must-see resource for web designers.", "The concept of 'follow the rabbit' parallax event involves maintaining a stable and fixed element on the screen, offering a specific approach to implementing parallax effects.", 'The chapter explores the use of parallax mouse movement to showcase different navigational items, with examples demonstrating unique parallax movements in different directions such as sliding to the right, down, and more.', 'The examples showcase parallax movement in various directions, including sliding to the right, down, and other unique movements, creating a three-dimensional view.', 'The chapter discusses the concept of Mouse Movements Parallax, featuring a star field effect that moves with mouse movements.', "The transcript includes a real-life example of parallaxing a website's navigation for a root beer tasting article.", 'The content is not parallaxing as the menu remains the same everywhere, and the content gives a regular scroll when clicked into an element.']}, {'end': 1701.186, 'segs': [{'end': 1452.374, 'src': 'embed', 'start': 1420.13, 'weight': 3, 'content': [{'end': 1431.799, 'text': 'And as you scroll, things are going to be happening around and to it to create a narrative and hopefully portray the message of the web design.', 'start': 1420.13, 'duration': 11.669}, {'end': 1439.185, 'text': "So in this case I have this Royal British Legion and they're talking about poppy seeds,", 'start': 1432.34, 'duration': 6.845}, {'end': 1449.231, 'text': 'which is a tradition in England to commemorate the fallen soldiers of of various wars,', 'start': 1439.185, 'duration': 10.046}, {'end': 1452.374, 'text': 'and it comes from a really beautiful poem called In Flanders Field.', 'start': 1449.231, 'duration': 3.143}], 'summary': 'Web design project for royal british legion featuring poppy seeds tradition.', 'duration': 32.244, 'max_score': 1420.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01420130.jpg'}, {'end': 1502.996, 'src': 'embed', 'start': 1479.587, 'weight': 4, 'content': [{'end': 1487.61, 'text': "the poppy seed shows up again in the same vertical area, although it is kind of scrolling up and down, but it's showing up in different contexts.", 'start': 1479.587, 'duration': 8.023}, {'end': 1495.533, 'text': "So, right here you're teaching the kids about the poppy seeds and about the veterans and about the sacrifices that they have made,", 'start': 1488.03, 'duration': 7.503}, {'end': 1502.996, 'text': "and it's really cool, interactive way, like the poppy seed is now being illustrated on the chalkboard for kids to understand.", 'start': 1495.533, 'duration': 7.463}], 'summary': 'Poppy seed used to teach kids about veterans, sacrifices in interactive way.', 'duration': 23.409, 'max_score': 1479.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01479587.jpg'}, {'end': 1644.292, 'src': 'embed', 'start': 1554.48, 'weight': 0, 'content': [{'end': 1565.327, 'text': "And it was designed by, I forget the gentleman's name, but he's also a very notable author.", 'start': 1554.48, 'duration': 10.847}, {'end': 1568.867, 'text': 'Frank, Frank Chimero.', 'start': 1567.606, 'duration': 1.261}, {'end': 1572.29, 'text': 'And it was sponsored by Microsoft, I think.', 'start': 1569.588, 'duration': 2.702}, {'end': 1573.631, 'text': 'It was a few years ago.', 'start': 1572.59, 'duration': 1.041}, {'end': 1577.114, 'text': 'But anyway, the idea here, the concept here,', 'start': 1574.031, 'duration': 3.083}, {'end': 1588.102, 'text': "is that this guy in this kind of elevator it's like submarine elevator is going to keep going down the tube and eventually find this lost world of Atlantis.", 'start': 1577.114, 'duration': 10.988}, {'end': 1592.646, 'text': "And it's really fun and it scrolls for like a freaking forever.", 'start': 1588.643, 'duration': 4.003}, {'end': 1597.15, 'text': 'And And the elevator tube is basically fixed the whole time.', 'start': 1593.346, 'duration': 3.804}, {'end': 1599.831, 'text': 'And things are moving around it.', 'start': 1598.251, 'duration': 1.58}, {'end': 1603.473, 'text': "And you're getting this story of how far does it go.", 'start': 1600.352, 'duration': 3.121}, {'end': 1605.174, 'text': "And here's some factoids.", 'start': 1603.593, 'duration': 1.581}, {'end': 1613.857, 'text': "And this little counter here is taking note of how far you've scrolled, or in other words, how far this elevator, this submarine elevator,", 'start': 1605.554, 'duration': 8.303}, {'end': 1615.278, 'text': 'has traveled.', 'start': 1613.857, 'duration': 1.421}, {'end': 1618.619, 'text': "And there's kind of like things that are happening around it.", 'start': 1615.858, 'duration': 2.761}, {'end': 1621.843, 'text': "It's good.", 'start': 1621.323, 'duration': 0.52}, {'end': 1622.543, 'text': "It's good.", 'start': 1622.023, 'duration': 0.52}, {'end': 1626.085, 'text': "There's a Loch Ness monster, giant squid.", 'start': 1623.264, 'duration': 2.821}, {'end': 1632.487, 'text': 'And eventually, where are we? Ah, Atlantis.', 'start': 1626.845, 'duration': 5.642}, {'end': 1633.107, 'text': 'We land.', 'start': 1632.567, 'duration': 0.54}, {'end': 1634.448, 'text': "See? That's fun.", 'start': 1633.548, 'duration': 0.9}, {'end': 1639.13, 'text': 'This is an early example of this technique as well.', 'start': 1635.728, 'duration': 3.402}, {'end': 1642.751, 'text': 'It was pretty innovative at the time it was designed and created.', 'start': 1639.67, 'duration': 3.081}, {'end': 1644.292, 'text': "Here's another innovative one.", 'start': 1643.151, 'duration': 1.141}], 'summary': 'An innovative interactive story sponsored by microsoft, featuring a submarine elevator journey to atlantis, with scrolling and factoids.', 'duration': 89.812, 'max_score': 1554.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01554480.jpg'}], 'start': 1420.13, 'title': 'Interactive web design with engaging narratives', 'summary': 'Explores interactive web designs featuring narratives like a poppy seed story and a submarine journey to atlantis, engaging the audience with elements like scrolling stories, factoids, and interactive features.', 'chapters': [{'end': 1553.76, 'start': 1420.13, 'title': 'Interactive web design with poppy seed narrative', 'summary': "Discusses an interactive web design featuring a poppy seed narrative that portrays the message of the royal british legion's tradition to commemorate fallen soldiers, utilizing various contexts and interactive elements to engage with the audience.", 'duration': 133.63, 'highlights': ["The web design features a poppy seed narrative to commemorate fallen soldiers of various wars, utilizing various contexts and interactive elements to engage with the audience. The poppy seed design in the center of the web design is used in different ways as the user scrolls down, appearing in various contexts such as on a chalkboard to teach kids about the sacrifices of veterans and in a veteran's house, representing a beach day for the veteran family.", 'The interactive web design effectively teaches kids about the poppy seeds, veterans, and their sacrifices in a cool and engaging way. The design creatively illustrates the poppy seed on the chalkboard to educate kids about the significance of poppy seeds and the sacrifices made by veterans, providing an interactive and engaging learning experience for children.']}, {'end': 1644.292, 'start': 1554.48, 'title': 'Submarine elevator to atlantis', 'summary': 'Discusses an innovative website designed by frank chimero and sponsored by microsoft, featuring a submarine elevator journey to the lost world of atlantis, with a scrolling story and interactive elements, including factoids and a distance counter.', 'duration': 89.812, 'highlights': ['The website features an innovative design by Frank Chimero and was sponsored by Microsoft, showcasing a submarine elevator journey to Atlantis with interactive storytelling and scrolling elements.', 'The submarine elevator journey includes interactive elements such as factoids, a distance counter, and encounters with mythical creatures like the Loch Ness monster and giant squid.', 'The website is an early example of innovative web design techniques and was considered groundbreaking at the time of its creation.']}, {'end': 1701.186, 'start': 1647.165, 'title': 'Internet security: ben and the seedy streets', 'summary': "Follows ben, a french internet security expert, as he walks through seedy city streets, encountering various security threats and offering protection, resembling a 'leon the professional' character.", 'duration': 54.021, 'highlights': ["Ben, resembling 'Leon the Professional,' offers protection in seedy city streets, reflecting the theme of internet security.", "The seedy city streets serve as a backdrop to Ben's encounters with security threats, adding a noir-like atmosphere to the chapter.", "The website's dark and controlled by parallax, contributing to the ominous setting of the narrative."]}], 'duration': 281.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01420130.jpg', 'highlights': ['The website features an innovative design by Frank Chimero and was sponsored by Microsoft, showcasing a submarine elevator journey to Atlantis with interactive storytelling and scrolling elements.', 'The submarine elevator journey includes interactive elements such as factoids, a distance counter, and encounters with mythical creatures like the Loch Ness monster and giant squid.', 'The website is an early example of innovative web design techniques and was considered groundbreaking at the time of its creation.', 'The web design features a poppy seed narrative to commemorate fallen soldiers of various wars, utilizing various contexts and interactive elements to engage with the audience.', "The poppy seed design in the center of the web design is used in different ways as the user scrolls down, appearing in various contexts such as on a chalkboard to teach kids about the sacrifices of veterans and in a veteran's house, representing a beach day for the veteran family.", 'The interactive web design effectively teaches kids about the poppy seeds, veterans, and their sacrifices in a cool and engaging way.']}, {'end': 2271.317, 'segs': [{'end': 1739.72, 'src': 'embed', 'start': 1701.266, 'weight': 0, 'content': [{'end': 1704.368, 'text': 'And this, when it first was introduced, was just like a big deal.', 'start': 1701.266, 'duration': 3.102}, {'end': 1708.635, 'text': "Everybody was like, oh, I can't believe So here we are.", 'start': 1704.408, 'duration': 4.227}, {'end': 1710.676, 'text': 'This is the Pencil website.', 'start': 1708.675, 'duration': 2.001}, {'end': 1719.84, 'text': "It's a stylus that was designed by 53, who are the makers of an iPad app, a drawing app.", 'start': 1711.336, 'duration': 8.504}, {'end': 1732.385, 'text': 'So this is like a high-end iPad stylus is what this thing is.', 'start': 1721, 'duration': 11.385}, {'end': 1735.446, 'text': 'Anyway, so they want to sell you one.', 'start': 1733.185, 'duration': 2.261}, {'end': 1739.72, 'text': 'on what pencil is and what it can do for you.', 'start': 1737.159, 'duration': 2.561}], 'summary': 'The pencil website, a high-end ipad stylus, was introduced and received a lot of attention.', 'duration': 38.454, 'max_score': 1701.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01701266.jpg'}, {'end': 1867.018, 'src': 'embed', 'start': 1813.619, 'weight': 1, 'content': [{'end': 1822.425, 'text': "And in this way, they're gonna sell me on each little bit of their technology, which is really, really clever and a great experience for me too.", 'start': 1813.619, 'duration': 8.806}, {'end': 1832.333, 'text': "It's interesting, it's not too heavy handed, things aren't flying around and being obnoxious, but it's like very interactive.", 'start': 1823.026, 'duration': 9.307}, {'end': 1839.463, 'text': 'And what I like most about it, is that I, as the viewer, am controlling the parallax.', 'start': 1832.353, 'duration': 7.11}, {'end': 1842.704, 'text': "It's 100% tied to my mouse movement.", 'start': 1840.323, 'duration': 2.381}, {'end': 1845.445, 'text': "If it's going too fast, I'll stop scrolling.", 'start': 1842.984, 'duration': 2.461}, {'end': 1848.206, 'text': "I'll just slow down and let myself pace myself.", 'start': 1845.485, 'duration': 2.721}, {'end': 1857.57, 'text': 'So a lot of these parallax things, they kind of multiply mouse scroll movements or are triggered by them and are on their own animation pace.', 'start': 1848.826, 'duration': 8.744}, {'end': 1867.018, 'text': 'So this is a really, really elegant example of letting the user control the pace of information, but also giving them that kind of more interactive,', 'start': 1858.17, 'duration': 8.848}], 'summary': 'Interactive technology with user-controlled parallax, 100% tied to mouse movement.', 'duration': 53.399, 'max_score': 1813.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01813619.jpg'}, {'end': 1980.906, 'src': 'embed', 'start': 1956.049, 'weight': 2, 'content': [{'end': 1964.995, 'text': "And the last example I have of the same thing is a New York Times article where they've made, they've done the same technique,", 'start': 1956.049, 'duration': 8.946}, {'end': 1972.76, 'text': "but they've broken it into different layered elements to make a little bit more immersive experience.", 'start': 1964.995, 'duration': 7.765}, {'end': 1975.742, 'text': 'So when I scroll, we have this like cage fighting background.', 'start': 1972.8, 'duration': 2.942}, {'end': 1980.906, 'text': 'When I scroll, the different background elements will break off and start zooming away.', 'start': 1976.182, 'duration': 4.724}], 'summary': 'New york times article uses layered elements for an immersive experience.', 'duration': 24.857, 'max_score': 1956.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01956049.jpg'}, {'end': 2096.15, 'src': 'embed', 'start': 2064.748, 'weight': 4, 'content': [{'end': 2066.69, 'text': "It's a really, really interesting experience.", 'start': 2064.748, 'duration': 1.942}, {'end': 2076.255, 'text': "And I feel like I'm getting closer to these people, understanding their grief or whatever, their mourning, as the scroll happens.", 'start': 2067.51, 'duration': 8.745}, {'end': 2078.797, 'text': "It's so interesting that I can control the story.", 'start': 2076.295, 'duration': 2.502}, {'end': 2081, 'text': "I feel like I'm in control as a viewer.", 'start': 2078.838, 'duration': 2.162}, {'end': 2084.835, 'text': "It's really impactful.", 'start': 2083.274, 'duration': 1.561}, {'end': 2087.199, 'text': 'So great job, New York Times.', 'start': 2084.916, 'duration': 2.283}, {'end': 2096.15, 'text': "The example that I gave you here is just like a little weird, stupid trick, but they're using it to tell a story and they're doing such a great job.", 'start': 2088.159, 'duration': 7.991}], 'summary': 'The viewer feels in control and closer to the story, new york times did a great job with impactful storytelling.', 'duration': 31.402, 'max_score': 2064.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi02064748.jpg'}, {'end': 2144.034, 'src': 'embed', 'start': 2113.1, 'weight': 5, 'content': [{'end': 2114.58, 'text': "Like I'm discovering something.", 'start': 2113.1, 'duration': 1.48}, {'end': 2117.821, 'text': "Like I'm a detective or a peeping Tom or something weird.", 'start': 2114.62, 'duration': 3.201}, {'end': 2122.603, 'text': "And then at the top, I feel like I'm in this really seedy bar, like a cage fight match.", 'start': 2118.382, 'duration': 4.221}, {'end': 2125.404, 'text': "And I'm walking between the fans and stuff.", 'start': 2123.103, 'duration': 2.301}, {'end': 2129.986, 'text': 'And I just have this like really like, immersive experience.', 'start': 2125.424, 'duration': 4.562}, {'end': 2134.769, 'text': 'Anyway, so this is the last example.', 'start': 2131.407, 'duration': 3.362}, {'end': 2138.891, 'text': 'These are the 20 examples of different kinds of uses of parallax.', 'start': 2134.789, 'duration': 4.102}, {'end': 2144.034, 'text': 'You can find a list of all of these examples in the video description below.', 'start': 2139.452, 'duration': 4.582}], 'summary': 'The speaker describes a immersive experience in a seedy bar and presents 20 examples of parallax use.', 'duration': 30.934, 'max_score': 2113.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi02113100.jpg'}, {'end': 2244.249, 'src': 'embed', 'start': 2207.684, 'weight': 6, 'content': [{'end': 2211.207, 'text': "In the next video, we're going to look at how we can build a few of these experiences.", 'start': 2207.684, 'duration': 3.523}, {'end': 2216.592, 'text': "In the meantime, the question of the week is what is the most impressive Parallax website you've ever seen?", 'start': 2211.588, 'duration': 5.004}, {'end': 2221.156, 'text': "I can't wait to see what you all dig up, but until then keep on hacking.", 'start': 2217.312, 'duration': 3.844}, {'end': 2225.365, 'text': 'Hello, welcome to the end of the show.', 'start': 2223.544, 'duration': 1.821}, {'end': 2228.587, 'text': 'I just want to take a second to thank these people here.', 'start': 2225.385, 'duration': 3.202}, {'end': 2233.07, 'text': 'These are the names of the people who support this show via Patreon.', 'start': 2229.247, 'duration': 3.823}, {'end': 2244.249, 'text': 'Not only do the people who are in the patron community bring you dev tips every week for free, but they also enjoy other perks like dev tips, chat,', 'start': 2234.181, 'duration': 10.068}], 'summary': 'The video will cover building experiences, seeking impressive parallax websites, and thanking patreon supporters.', 'duration': 36.565, 'max_score': 2207.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi02207684.jpg'}], 'start': 1701.266, 'title': 'Interactive scroll techniques and parallax impact', 'summary': 'Explores interactive scroll techniques in the pencil website, encompassing parallax and zooming elements for an immersive browsing experience. additionally, it delves into the emotional impact of parallax in storytelling and encourages viewer input for upcoming videos.', 'chapters': [{'end': 2037.449, 'start': 1701.266, 'title': 'Interactive scroll techniques', 'summary': 'Discusses the interactive scroll techniques used in the pencil website, including the use of parallax and zooming elements to provide an immersive and user-controlled browsing experience.', 'duration': 336.183, 'highlights': ['The Pencil website uses interactive scroll techniques such as parallax and zooming elements to showcase the technology inside the stylus, providing an immersive and user-controlled browsing experience. Pencil website, interactive scroll techniques, parallax, zooming elements, immersive browsing experience', 'The use of parallax allows the viewer to control the pace of information by tying movements to mouse scroll actions, creating a visually pleasing and interactive scrolling experience. Parallax, user-controlled pace of information, interactive scrolling experience, mouse scroll actions', 'The zooming elements, demonstrated on the New York Times article, create an immersive experience by breaking background elements into layers and making them move at different paces, providing a visually engaging effect. Zooming elements, New York Times article, immersive experience, visually engaging effect']}, {'end': 2271.317, 'start': 2037.449, 'title': 'Impact of parallax in storytelling', 'summary': 'Discusses the immersive experience of parallax in storytelling, highlighting the emotional impact and control it gives to the viewer, with examples of different uses and a call for viewer input for upcoming videos.', 'duration': 233.868, 'highlights': ['The immersive experience of parallax in storytelling gives the viewer a sense of control and emotional impact, allowing them to feel closer to the characters and their experiences.', 'The speaker appreciates the impactful storytelling by New York Times using parallax, creating an emotional connection and a feeling of control for the viewer.', 'The chapter includes 20 examples of different uses of parallax, with a call for viewer input to prioritize examples for upcoming videos.', "The chapter concludes with a call for viewer input on the most impressive Parallax website they've seen, and a mention of Patreon supporters."]}], 'duration': 570.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/STwoa-9jxi0/pics/STwoa-9jxi01701266.jpg', 'highlights': ['The Pencil website uses interactive scroll techniques such as parallax and zooming elements to showcase the technology inside the stylus, providing an immersive and user-controlled browsing experience.', 'The use of parallax allows the viewer to control the pace of information by tying movements to mouse scroll actions, creating a visually pleasing and interactive scrolling experience.', 'The zooming elements, demonstrated on the New York Times article, create an immersive experience by breaking background elements into layers and making them move at different paces, providing a visually engaging effect.', 'The immersive experience of parallax in storytelling gives the viewer a sense of control and emotional impact, allowing them to feel closer to the characters and their experiences.', 'The speaker appreciates the impactful storytelling by New York Times using parallax, creating an emotional connection and a feeling of control for the viewer.', 'The chapter includes 20 examples of different uses of parallax, with a call for viewer input to prioritize examples for upcoming videos.', "The chapter concludes with a call for viewer input on the most impressive Parallax website they've seen, and a mention of Patreon supporters."]}], 'highlights': ['The chapter presents 20 examples of using parallax for creating engaging features in web design, showcasing its versatility and practical application in digital experiences.', 'The technique of creating depth in web design through foreground, mid-ground, and background images is discussed, exemplified by instances of blurred elements and black overlays, simplifying development complexity and showcasing visual effects.', 'Microsoft showcases a messy desk effect on its web page to represent a creative environment, adding to the haphazard and innovative vibe, creating user engagement (e.g., engineers and designers working in a messy environment).', 'The website typanus.codrops.com provides numerous examples of parallax and hover effects, serving as a valuable source of inspiration and learning for web designers.', 'The website features an innovative design by Frank Chimero and was sponsored by Microsoft, showcasing a submarine elevator journey to Atlantis with interactive storytelling and scrolling elements.', 'The Pencil website uses interactive scroll techniques such as parallax and zooming elements to showcase the technology inside the stylus, providing an immersive and user-controlled browsing experience.']}