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

Spike Deng
Spike Deng
12,833 Points

I am so curious about how to make this slideshow

check this link.


I found the slide show is pretty cool and stylish. Can anyone explain simply how the masks work? Thanks in advance.

BTW I found so many stunning themes! How many genius working in this area??!!

3 Answers

Alexander Sobieski
Alexander Sobieski
6,555 Points

UX suggestion: That site hurts my eyes and is potentially very confusing. On my 13" Macbook, the links are at the bottom of the page, by due to contrast and color, my eyes keep going to the images -- which keeps making me feel like I have no idea what to do on the site.

Also - why would one want to hide parts of their navigation?

What that theme's designer did well: He/She made good "oh, cool" candy that probably sells the theme, but doesn't serve the end user at all.

</end rant>

That said, if you use an inspector (firefox or chrome), you can see the html and css.

the boxes are a <ul> wil the <li> elements displayed horizontally. Inside the list-item, there is an anchor tag with a background of the stock image. Following that, there are two <span> tags with background images (one is the brown, pointy thing, and the other is the orange rectangle).

I'm assuming that this was done via a jquery plug-in, in order to get the "fancy" motion and bouncing effects... because who would want to code that crap from scratch with javascript...

Though you could manually code it with jquery as well. (though time = money).

Maybe someone recognizes the jquery plug-in, or can speak more to the exact plug-in(s).

Check Out: http://api.jquery.com/

I agree with Alexander, but I also think that the images are a bit too far away from the links that correspond to them. The other pages are alright but the home page is a bit annoying in my view.