In this session we discuss how to have parallax sections in Thesis 2.1 and assembling groups of parallax boxes.
We also introduce the new course, Professional Thesis 2.1 Skin Development, that is currently being taught which includes how to use these boxes in different skins.
Video Transcript
How to Have Parallax Sections in Thesis 2.1
Member: I’ve seen a few sites that have taken this approach and I really like it as a way of being able to get a lot of content on the home page, preserve navigation that you want and keep it clean and open.
Rick: Uhuh.
Member: It’s really nice because as you notice going through there the pictures will change.
Rick: Yeap.
Member: About 5 boxes there, the pictures change
Rick: Yeah.
Member: the size of the box will change
Rick: Yeah.
Member: But just in the beginnings I’ve been trying to find plugins and other things that would work with Thesis that do this but I think part of it is I don’t know the taxonomy, what it’s called.
Rick: These are called parallax boxes.
Member: Okay.
Rick: And you know, in this class I’m teaching we just taught how to do this so.. Whoops I’m not on the right page.
Member: Look at you.
Rick: So that’s what this is here right, this thing is a parallax box.
Member: Gotcha.
Rick: You know I’m tempted to turn this into a box quickly and make it available on my site.
Member: Nice.
Rick: I mean you can you know, essentially what you’re doing here is you would be assembling you know, groups of these boxes so the box itself you know, you put the image you want in and call to action and information and that kind of stuff. I mean this incarnation of the parallax box is just a call to action rather than say what that site we were just looking at was which is a.. I mean they’ve got parallax behind content but it’s.. where did it go? I got so many things opened now. Oh there it is, they’ve got a parallax behind content. Now it is… yeah well, I knock one of these out I mean I’ve already coded it, I just did isolate it into a specific box.
Member: I think it really helps up the gain in the design of sites, it’s so modern.
Rick: Yeap.
Member: There’s a lot of (03:04) that are doing it so it’s been one of those trendy-ish things, the question is, “Will it last?” but…
Rick: Well.. I mean this kind of stuff is always going to move around, right? The class that I’m teaching is for people to build skins, right and this is the demonstration skin I created for them and it’s the skin we’re building and so it’s got all kinds of you know, funky stuff as part of it and by the time we’re done with this class I assume that there will be developers that have skins with these features available probably you know, beginning part of February.
Member: Stop just where you are. The other part there is the building of the icons or favicons I don’t know what the right term is to use there like…
Rick: These are icons and these are Font Awesome icons and so it’s a character it’s not an image which allows you to use them then in lots of different contexts. Their homework assignment this week actually is to build this little icon box to include in the site. Agility and Carta are going to have this soon. I’ve already written the code that includes the Font Awesome in it and I’m working on ways that it can be incorporated into Agility and Carta so those skins will both have that.
Member: Good. You know (05:03) earlier who uses Pearsonified I’m using it right now but I’ve used Agility before and I don’t have any particular loyalty to one or the other so if it’s gotta go back to Agility…
Rick: Well, Pearsonified is a pretty sophisticated skin and it does have some icons available to it, it just doesn’t have the you know, he likes his stuff to be minimal so he’s given you access to a minimal number of icons but…
Member: Understood.
Rick: Anyway so the answer to your question is I’ll knock out a box here this weekend that will let you do this in any Thesis skin and…
Member: You notice there how they control the box size just to have a little bit of a difference like every other one is full screen box and then the other one is partial, full width I should say pardon me.
Rick: Yeah, well they’re all full width it’s just that some of them are transparent with an image behind them.
Member: Okay.
Rick: And some of them aren’t, right? This little page width element you see here, that actually exists in each section, each of these sections is…
Member: I’m worried how those pictures move with it and the pictures don’t really move with it, they just look like they move with it.
Rick: Well, the pictures actually do move with it. It uses a javascript that calculates because as soon as you hit here that picture is gone now, it has moved out of the frame and now the next picture is going to move into the frame.
Member: Gotcha.
Rick: And in this case, these images are fixed in position, the images themselves don’t move when you scroll pass them. In this case, the image moves as you scroll pass it as well so and it’s hard to see it in this case but the image moves at a different rate than the content in it does.
Member: Gotcha.
Rick: In any case those are options that could be set for the box, you either have it fixed or have it moving so.
Member: Thanks.
Rick: I’ll do my best to get that done this weekend. You’ll find it let’s see where’s BYOBWebsite now I’ve already lost me. When it’s live you will find it here under What’s New. Everything that’s new you know, just comes here in a list so I published a couple of new boxes here over the Christmas break and updated some boxes over the Christmas break. Anyway, you’ll see them showing up here and these will link you off to the box page then.