Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Artful Wisdom
PLUS
Artful Wisdom
Courses Plus Student 6,506 Points

What kinda of layout is this and which treehouse video can teach me how to create it?

I would like to make my website like this.( http://thoughtbot.com/ )I like how it transition to different color blocks like that and the way the menu bar come down with you throughout the site. I wanted to learn this for a while now I just never knew the name of the type of layout, if anyone happen to know which treehouse video will team me this it will be much appreciated. I feel like it foundation or bootstrap and I'm actually about to go into both of those but i'm also hoping that it is one of those

5 Answers

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi,

This type of website is a One-Page Parallax Scrolling site. There is no Treehouse course that I know of that teaches this exact style. However, if you follow the HTML and CSS courses then it will put you in a good position to start creating with this style.

A tip from me. Don't try and create the framework for Parallax yourself. You can find some great open source pre-made frameworks for Parallax such as Cool Kitten a personal favourite of mine.

Hope this helps and good luck.

Keep up the good work

Connor Hamilton
Connor Hamilton
5,023 Points

Is that Parallax?

That could be made with just HTML/CSS, theres no animation or movements involving Javscript/Jquery when transitioning from one block of content to another like: http://www.aleeforoughi.com/

Maybe my understanding of Parallax is wrong.

James Ingmire
James Ingmire
11,901 Points

What a great website experience, would love a course on how some websites use the triggers in order to create different effects at different stages of scrolling the site etc.

Would be good actually if like the treehouse show a website was submitted once a month to treehouse and they explained how it works but breaking it down and summarizing as a whole, not going in depth of how to code it but how it works in general, would help to open up the mind set on how to create these effects putting the code learnt in previous tracks to use pushing the creativity.

Thanks for the links both John and Connor, interesting and quite a trend these types of sites this year i've noticed.

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi James Ingmire,

There is a massive trend for these One Page scrolling sites recently. It's useful knowledge to know.

Connor Hamilton
Connor Hamilton
5,023 Points

Its far out of my knowledge but thats why i have started to learn Javascript and Jquery, parallax seems to be a big thing in development at the moment.

James Ingmire
James Ingmire
11,901 Points

Yea, I do like the parallax feel however that is coming from a web designer; not too sure how other non tech public viewers feel. I think it is important not to over do it and make sure the viewer does not get too lost in it all and receives the information needed, however I suppose being a web designers home site you want to show of.

Connor Hamilton
Connor Hamilton
5,023 Points

Oh totally, if you design for yourself do what you want but when you come to working for a client or in a team you throw that out of the window and do what is required.

Artful Wisdom
PLUS
Artful Wisdom
Courses Plus Student 6,506 Points

so these One-Page Parallax Scrolling site require HTML/CSS and Javascript...just want to make sure i understand before i go on my little adventure to learn it lol