Parallax on the Web (Part 1) - Parallax Examples

today we're looking at one of the most requested topics in the comments below today we're looking at internet cat memes just kidding today we're looking at parallax ah this will be a multi-part series this week we're looking at just what parallax is and what are some more of the useful and effective examples of it next week we'll talk about how do we can build these things using real-life code examples now the hard thing about making your video about parallax is really just getting clear on what parallax is or in other words what implementation of parallax do we want to focus on let me show you what I mean the phenomena of parallax is a result of having a perspective in 3d space when movement is introduced to the observational experience if I take my camera here and line up these toys I stole for my kids I'm creating a perspective you can see that the objects in the background appears smaller and the one in the Midtown larger and the one in the foreground the largest at the moment this is not parallax this is perspective when I pan the camera you can see that the toys appear to move in space at different paces the one in the background slower than the ones closer to us now this is parallax objects moving in space at different paces relative to us the viewer the reason this effect is so popular is because it's very true to life by an ocular beings like us experience this all the time we use it to understand the world around us the tell if a car is coming close or away from us to catch a frisbee and to tell if our crush is leaning in for the kiss astronomers use these parallax principles to measure the distance between galaxies it's a real thing and we as real things connect with it because it is so but here's the rub these digital surfaces are not real there are simulated experiences we faked it and there are a few ways to do that there are a number of creative ways to use the principle of parallax to create an interesting feature on your webpage I have 20 examples that we're going to go through right now and I've broken them into eight sections the first one I call fixed background scrolling body the first example in this category a fixed background scrolling body is okay Studios de and I mean just as I described before we have a few elements in the foreground and maybe even take the liberty of blurring these elements here so they look like they're definitely in the foreground and as we scroll the page this main hero image stays exactly still it's just a fixed position and the rest of the the body will scroll by the next section will cover that that fixed position hero image and then when it when it is done scrolling by it will reveal another separate different image but fixed in the same way and this time we're using the same type of technique having elements in the foreground that are blurred to make it make it seem like a really deep image and in this way of having foreground mid-ground and background images right background is this what I called what are these things called two cans now that's a flamingo did you know that flamingos are not pink naturally that's what they eat anyway there's a flamingo in the background in the mid-ground would be this this text block here and the logo and the foreground would be this pencil if they really wanted to accentuate this effect they would have this pencil scrolling at a different pace but that's just one nuance and by not doing it actually made it a lot easier for them in terms of development complexity another example here is cut your studios they have again these big background here nice photography and they're scrolling their website right on top of the background images and these ones are actually using a carousel so you can switch through the images here I'm not sure what oh this is just a theme I did I thought this is actually a photographer website but okay so DC this screen that they put on top of the images there's like a black screen on it so every other row or start every other column of pixels here has has black overlay on top of it now the reason they do that is that they can use lower resolution images and multiply the size of the images without it looking too pixelated or gross because you're it's an effect that will allow you to use these these larger images because when you're blowing up images full screen you kind of want to be cognizant of people who have lower resolution screens right and or even not just lower resolution screens but also slower internet speeds and this will give them hopefully a better browsing experience they don't have to wait as long for the page to load which could be a problem with these fullscreen backgrounds so this screen here adds an artistic effect but also there's a technical reason for doing that so this this is the section these two examples are what I call fixed background scrolling body ok the next section is something I call slow elements and this is when basically you have elements scrolling at different paces in this case we have this background it looks fixed but it is actually moving and where the mid-ground is this photograph here of this gentleman with a gold medal and the the foreground would be this paragraph of text now I wouldn't say this is a winning design and it's funny because when I was looking at examples of parallax this page for Jason Kenny OB came up a lot I don't even know why it's not even anyway I want to critique the design but it's like extremely hard to read this right here and like everything's like really chunky and I don't know I wasn't - anyway let's see what else do we have in the slow elements category unfold I like how they're using not just like photos that land in a specific place so so if we go back to Jason Kenny a lot of this doesn't look good until you're at a very specific spot maybe right here is what the designer when they were designing and static was thinking I want this three on the left above the paragraph the paragraph to lay on top of the of the photograph here and they're just like like experimenting with ideas now that I think about it the reason maybe it showed up on a lot of search results is because it's older this looks like an older implementation it's not as elegant so what the next example is done here in unfold no they're using the same technological technique in creating these slow elements and people things moving at different paces but they're not at any one time making text illegible but they are creating interest in making like this line this simple line interact with the text is not like that big huge photo and even this navigational section up here when the time comes for it to be on a black background it will adapt it will turn into a black background dark background navigation now it'll be red Oh scrolling up oh cool I didn't realize I wasn't scrolled at the top clever all right next one uh this one is still in the slow elements category and it's the new Apple MacBook promotion page right there new golden MacBook this 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 this is an interesting effect it I won't like dive too much into it but they're controlling a video by how much you scroll so it's really interesting really unique and complex but this see that shadow that lands and kind of moves into place see how it's not touching the REC book and it'll move into place in the end get more opaque as the MacBook closes in on it at that shadow is a large image even though the what's happening right above it is a video it's super cool there did a really great job on that but what I wanted to show about this these slow elements are things like how the MacBook when it's being revealed it's parallaxing down like the the image is moving down from its container but it's very subtle they use subtlety to enhance the experience of the viewer but at the same time not bring so much attention attention to the effect that it takes away from the message and this this will be a really great experience for the user in the end help them to understand what the message is and what action they should be taking on the website it's so easy to get carried away with these effects to make really bad decisions you see how this text is cinching up as it Scrolls down but also like it's not too much like this this image of the of the laptop right here I don't think is parallaxing at all these next images I don't think are parallaxing at all I mean just refresh the page and I'll show you another effect that I want to point out it's in another section in this kind of all of these examples called landing elements the idea here is that your page is scrolling by normally but as you hit a certain point things will like fall into place or appear and land at a specific area that that's already laid out for them but when they do their scrolling at the normal speed of the page the effect is that they've come from somewhere else when you're scrolling and landed exactly where they should be let me show you what I mean when I scroll down at the MacBook effect which again it's just brilliant but right here at the bottom look under this paragraph did you see those numbers appear it was really subtle they just kind of scoot in from the from the right and refresh and do that again pay attention to the bottom right here I'm scrolling see those numbers they all kind of parallax in and different speeds the the larger numbers come in faster than the labels the the little letters down at the bottom makes a really really great effect it brings attention to the statistics that they're trying to point out they want to show that this MacBook is light that it's thin and that it has a great display so that I think they use a really great way let's look at the next website in this section of landing elements this is called streamline their selling icons let me refresh the page and you'll see like it's a little bits compared to the subtlety of the Apple website that we just looked at this is look a lot more aggressive so let me refresh this and watch jointly everything is just like jumping in all at once like I think the whole page just assembled itself the illustrations the icons down below the headlines these buttons popped in but as I scrolled in scroll down you're going to see more and more of this stuff just like bouncing and all over the place now I personally think this is a little bit much I think they're a little bit heavy-handed on it but you have to admit it does create a little bit of interest and keep the user scrolling down if you think about like what the goal is as a as an interaction designer so as a web designer is to organize the information and display it in a way that helps people to interact with it and create and perform actions that you want them to write but an interaction designer will have a few other a few other goals for example create interest and and punctuate different information points for example here in each section you're like loading in I think we're done okay even these big boxes are animated in let me read the reloads page again and you'll see like like even though it is like really kind of corny you're gonna be like oh a headline just jumped in like let me look at it and stuff so and it also might keep you scrolling to see like what else is going to jump in and I don't know I have mixed feelings about just say that this phone's jumped all the way across the screen amazing now this one is done using a library actually there's library for all these jumping this I forgot what it's called it's called wow Jas is that right duh gee yes yeah this guy Wow touch everything you could possibly think of ah goodness okay so wowed ijs is the library that they're using here by the way all right the next example and the last example in the landing category is microsoft has done a really good exam job here of not being as subtle as the Apple one but of course not being as obtuse or aggressive as the is the line icons a website so as I scroll down now this this webpage is from Microsoft but it's more of like a like a PR kind of thing they're talking about their actual teams and they're kind of selling themselves as a personality so watch what happens when I scroll down I'm getting to like a more of an article situation here and things at the bottom start like looks like a messy desks like this team that they're showing it or this kind of like Department and their company is called the garage this is like where they experiment on things they have a bunch of engineers and designers working together in a really messy environment to to innovate new creative things so they want to make it feel really really um you know kind of haphazard in and creative and and just like like mad science right and so when they scroll down and refresh that you scroll down these things kind of just like looks like a table that just got thrown you know like some capacitors on and some motherboards on right here and which is nice I think a nice effect I like to also do you see how these um these controls for the slide show came in and refresh that they just kind of about jump in after you get to a certain point and that's nice as well because remember you can use these these this idea of landing elements to create interest to things that the user should interact with so if these controls here we're there the whole time and I had to mouse over them for them to like respond for example give me this animation of yes please click me it would be less noticeable right but if I scroll down to this carousel and I see the controls come in I noticed them because we're kind of like a t-rex right we notice movement and were like oh okay that I guess I want to click on that I just saw it move I'm hungry yeah okay let's continue on next we're going to look at a new category called multiple directions and the first website in that quatre category is called main quarterly comm slash Thoreau and if I come down here to a few different of these articles I'm going to click on this bottom one called exploring nature finding ourselves okay so we have like a full screen experience the 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 right but when we get down here we have this this bisected view to full screen images and one's a video and watch this there's there my screen locks my scroll kind of locks I'm scroll up here and then like that it feels like it stops scrolling and then then the the element start scrolling in different directions and this is controlled by my mouse right it's like it's a wild and disorienting and weird but also interesting and then they land and can continue to scroll up together so so do I like it I don't think I like it I think it's weird and disorienting it doesn't tell me a good story but also like it definitely keeps me scrolling like I'm gonna find the end of this scroll because like I gotta know why I'm looking at this weird stuff that like is scrolling in different directions it's a very interesting design in terms of unusualness I don't like it's a very unique design I don't know that it's a pleasing design I'm not filled with delight when I'm scrolling I'm very agitated but at the same time it's an effective design because it keeps me scrolling so their goal is to just have Travis scroll all the way down their page or at least to the bottom of this parallaxing section and I did it I did do it because I wanted to see it now I have more of the fixed background scrolling elements which is the first section this this this main quarterly com /throe is full of this stuff look at that big big background video I like it very interesting website alright the next one that has multiple Direction elements is really cool this one is called called carousel dot drop box calm and carousel is a product that Dropbox has created and it's really cool so it's all about photos and using photos to like be organized and create moments and stuff whatever but so check out this big hero photograph right here the rest of the website will scroll away and this this element is moving in a different direction than the rest of the website and it's landing on a specific place in the example area here so they've created like an iPhone layout and then they have like a layout that would you would find inside of their application and as I scroll down the layout inside of the application gets manipulated a few different times but that one image is always there right it's getting moved and shrank and skewed and rotated and there we go keep on scrolling you know it's in a different spot and then it moves back and then it gets scrolled away so that is an example of multiple Direction elements things just get are flying around depending on where you're at in the scroll in the scroll journey there we are okay so the next one is called Mouse movements these are these are things that are happening depending on where you're placing your mouse this one is an example of J parallax which is a jQuery plugin so depending on where I have my mouse your the parallax is happening but we have the same elements of quickly moving foregrounds moderately moving mid grounds and slowly moving backgrounds see that Sun is barely moving but this foreground of these trees and whatever is moving very quickly they have tons of really interesting examples a Beatles rock band to use this which is cool or if it's still up oh okay either my browser is just really slow right now or this website is like jank because it was back in oh nine yeah there's like the stylesheet missing this is a cool this is a really cool website when it came out I remember that when that game came out anyway the next one of this what is it called mouse movements parallax is this one that so they created a cool star field effect and wherever I move my mouse the star field is is is moving so they have stars in the foreground they're brighter they have some like would look like astronomy not astronomy astrological signs and and whatnot in the background and but the content on bring your attention to this fact the content is not parallaxing this menu is the same everywhere I go when I click into one of these elements the content is just giving me a regular scroll so the next one is actually my own website I did a root beer tasting article but I wanted the navigation here to not be a drop down or a side scroll so I put it all up in the top and then I'd parallax did so no matter where you are in the top you can get to one of these root beers but it's gonna you know you you bring more of that navigation into the top it's very experimental I wouldn't do this with like a like a production level website because it's not really that intuitive 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 cool all right the next section I just have one example and this is just called thumbnailing I was called a thumbnailing but the idea is that it's similar to the mouse movement but it's basically when you put your mouse over a region it's no longer it's not falling you're following your mouse like those other parallax mouse movements examples were it's more like it activates this section this thumbnail in these cases and we're going to have some parallax movement happening so in these lily examples the background is sliding to the to the right Sadie nothing is happening in terms of the background we find another one okay these Leila examples the background is sliding down to just parallaxing moving a little bit differently than you normally would expect creating a little bit more of a 3-dimensional view the there's another one here Ruby Ruby is going to give you a little bit more of that depth of feed because they're actually zooming out when you in when you hover over this over this background all right now there's this website type an SEO drops com is a KO drop type and Escom it's got tons of these really great examples I'm really inspired by these people all the time but this is an article called I think subtle hover effects and they use parallax and really good in a charming way charming really good way and you should definitely check it out but that's the only example I have for the thumbnailing events because because they have so many examples on this page right likes the other zooming out right here and they teach you how to do all of these examples to really cool the next section I have is called I call follow the rabbit okay so in the follow the rabbit parallax event or in the in the follow of the rabbit parallax category you're going to have something on the screen that is more or less stable and it's going to be fixed and as you scroll things are going to be happening around and to it to create a narrative and helpfully hopefully portray the message of the web design so in this case I have this Royal British Legion and they're talking about poppy seeds which is a tradition in England to commemorate the fallen soldiers of various Wars and it comes from a really beautiful poem called in Flanders field I don't can't remember too much about it it's a beautiful thing and it's a great cause but we have here this this poppy seed design in the in the center and as you scroll down the poppy seed shows up in different ways in kind of the same area right so that it'll kind of fade out and disappear here when you're initially scrolling but as you get to the next section 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 so right here you're teaching the kids about the the poppy seeds and about the veterans and about the sacrifices that they have made and it's really cool interactive way like the poppy seed is now being Illustrated on the chalkboard for kids to understand now as we continue to scroll down we see that the poppy seed shows up in a in a veteran's house or maybe in this case it's the mother of a veteran here's another of multi direction scrolling if you have this mouse in a in a sewer sewer pipeline as you scroll down it's cute Triceratops and again the poppy seed shows up at the bottom kind of representing a beach day for the the veteran family just adorable these kids jump up from noir and the castle kind of builds itself right here it's beautiful I really enjoy it okay let's continue on we're still looking at follow the rabbit this one is called lost world affairs / Atlantis and and it was designed by forget the gentleman's name but he is also a very notable author and Frank Frank Camaro and it was sponsored by Microsoft I think it was a few years ago but anyway the idea here the concept here is that this this guy in this kind of elevator that's like submarine elevator is going to keep going down the tube and eventually find this lost world of Atlantis and it's really fun and it scrolls for like freakin forever and and the elevator tube is basically fixed the whole time and things are moving around it and you're getting this story of you know how far does it go and here's some factoids and this little counter here is taking taking note of how far you've scrolled or in other words how far this elevator the sub submarine elevator has traveled and there's kind of like things that are happening around it it's good it's good there's a Loch Ness monster giant squid and eventually where are we ah Atlantis we land see that's fun this is an early example of you of this technique as well that is pretty innovative at the time it was it was designed and created here's another innovative one this is a this is for a security like an Internet security website and this guy named Ben is kind of like a li on the professional character and he's French and he's walking down this street it's a really seedy kind of like nor kind of thing like here's somebody in this situation somebody got mugged and Ben's like washing walking by it is like yeah this stuff happens but but not to you because I got your back I'm the bodyguard you know it's pretty funny she's walking through like a vise kind of wow that's weird it's really it's really dark website actually this train is controlled by parallax anyway so a lot of things happen to Ben as he walks through these see CD city streets and what have you I have one more for follow the rabbit and this win it when it first was introduced which is like a big deal everybody was like ah I can't believe this so here we are this is the pencil website it's a it's a mouse or not some Mouse it's a stylus that was designed by 53 who are the makers of an iPad app a drawing app so this is a like a high what is it called like a high-end iPad stylus is what this thing is anyway so they want to sell you one on what pencil is and what it can do for you and they're kind of showing you examples of how it works and what it'll enable you to do unlock your creativity and all that junk but in the bottom they want to show you what went into making it why is this pencil so expensive and why do we consider it a high-end piece of technology now at the bottom here we're going to see this pencil show up it'll scroll into view and then the suddenly the the pencil itself will lock right and things will start coming out of it and work it's going to have like an exploded view of the technology inside so first of all the eraser tip now the Bluetooth technology bit here's the body now we're going to talk about the nib we have the power source the sensors the the tip and it's all exploded but it's it's using parallax for things moving in a different pace to allow this explosion to happen and me as the viewer I'm like witnessing I'm controlling the explosion so it's very explorative I'm going to I'm going to scroll down and be like oh the eraser tip on all pause and read it all Bluetooth smart pause and read and so forth and in this way they're going to sell me on each little bit of their of their technology which is really really clever and a great experience for me to it's very it's interesting it's not too heavy-handed things aren't flying around and being obnoxious but but it's like very interactive and what I like most about it is that I as the viewer am controlling the parallax it's it's 100% tied to my mouse movement if it's going too fast all stops rolling I'll just slow down and let myself pace myself so a lot of these parallax things that kind of multiply mouse scroll movements or are triggered by them in our their own animation pace 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 more visual of the serial pleasurable kind of scrolling experience so that is the last of the examples of what I call follow the rabbit and the last two examples are what I call zooming elements this one is on my own website sorry if I'm doing my own examples it's weird but like I was just thinking of what I know of things that do this stuff and of course I know my own so I'm just showing you anyway anyway so this is called zooming zooming elements this is an article I did on my website just talking about my own personal workflow tools the different applications or websites or services or like even like podcasts and blogs that I visit so when when you scroll down this little bunny is imaged here it will just kind of like start zooming and expanding it's tied to the scroll and it'll just keep going infinitely large and I call that so it so it's not like moving at a different pace like the element itself is not moving but the but the content of the of this box accont the the image that's in this container is moving at a different pace and a different direction it's actually coming towards you and out it's um the zoom is is anchored to center bottom so his feet are not going to change as much as his ears are because they're further away from the center in the bottom so you zooming out the last example I have of the same thing as a New York Times article where they've made they've done the same technique but they've broken it into different layered elements to make a little bit more immersive experience so when I scroll we have this like Cagefighting background when I scroll the different background elements will break off and start zooming away and it makes me feel like I'm looking at this cage fight and I'm walking into the crowd and I'm walking between the different spectators and I'm getting closer to this cage fight see how they kind of like come towards me and and go go past me and they blur a little bit dilip ler no I guess they don't maybe I don't know but um I really like that I really like that I really like that effect and they do it a few times as you scroll down let's find another one to do they have this like a comic book motif so here here we have this gentleman you can see them through the window and as you scroll the the part of the illustration that contains the character is zooming as I scroll in but not the frame of the window so again it makes me feel like like remember how I define parallax's being a situation that is observable in 3d space based on the up based on the perspective of the viewer this really feels like I am the viewer and walking towards the the the picture right like I'm walking towards this guy I'm creeping up and looking through a window at him and he's noticing me as he turns around so literally interesting experience and I feel like I'm getting closer to these people understanding their grief or whatever their mourning as the as the scroll happens it's so interesting that I can control the story I feel like I'm in control as of yore it's really impactful so a great great job in New York Times my name is the version that 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 like it it's it's like an emotionally impactful it's like right here I feel like I want to go and comfort these people right here I feel like I'm I'm peeking in on this guy I'm learning about his secret or his his like you know like something like I'm discovering something like I'm a detective or a peeping tom or something weird and then at the top I feel like I'm in this really seedy bar like a cage fight match and I'm walking between the fans and stuff and I just have this like really like immersive experience anyway so this is the last example these betwenn tee examples of different kinds of uses of parallax you can find a list of all these examples in the d'Ovidio description below and i'm going to take one or two of these examples for the video next week I'm going to build them out in front of you and help you understand how they achieve these effects and so that you can do this kind of stuff with your own work but at the same time if you really liked one of these effects more than anything else and you really want it and you comment fast because I'm working on this as you are viewing this leave a comment and you know if it's like an overwhelming request for any particular one of these examples I'll try to make a video about it okay but I have in mind one or two already that I want to make for next week I just kind of make them I haven't done it yet but if you guys can intercept my work and say we actually want you to work on this one Travis I'll try to accommodate okay so leave your comments in the in the doodle below and also be sure to check out all these links and then and then here is the outro I'm not fun thank you so much for watching in the next video we're going to look at how we can build a few of these experiences in the meantime the question of the week is what is the most impressive parallax website you've ever seen I can't wait to see what you all dig up but until then keep on hacking hello welcome to the end of the show I just want to take a second to thank these people here these are the names of the people who support the show via patreon 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 extra videos and even a patron a private patron podcast to learn more about what we're doing over there there's a link in the description below or just visit patreon.com/scishow dev tips I would love to have you join us but if you're still unsure here's something somebody said recently about their membership in the community thanks again

Channel: DevTips

Views: 411,383

Rating: 4.9342165 out of 5

Keywords: HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, friendly internet, programming, programming help, html, css, javascript, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, parallax

Id: STwoa-9jxi0

Length: 37min 54sec (2274 seconds)

Published: Mon Mar 30 2015