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
slxmclxtds
37,677 PointsAdvanced Web Design/Development
I'm here to ask a questions on how I can make my website even better.
I have seen many website who play transitions or animations based on how far you will scroll down.
Like the text and images fade in. Number start to count up and then stop at specific number. Add just a simple Text Slider, which change text, but not it's location and add different in and out transitions. Having a custom slider on the right, like in the example.
Example of what I am talking about: http://jkreativ.jegtheme.com/architecture/
My question are:
What are they called? Do they have a specific name, title or general word(s) that you could describe them.
What do they use? CSS3, HTML5, Javascript, 3rd Party Plugins or all of them.
Where I cloud learn them? I am aware like Css-tricks.com, but is there a specific website that gives you video lessons about them, like teamtreehouse has specific track for each area or job. So I could understand even more and create them on my own. Also can teamtreehouse offer similar lesson from them to be created?
These are my questions for now.
4 Answers
Kevin Korte
28,149 PointsTypically, these types of things are called plug-ins. How they are built 100% depends on what the plugin is doing. Many times they do involve HTML, CSS, and JS.
Lots of web blogs usually feature plugins. I like CSS-Tricks a lot. Let me share some other blogs I'm addicted to that you'll find useful.
http://www.webdesignerdepot.com/
Usually plug-ins are pretty easy to install, and the quality ones will have documentation to show you what needs to be done, and what can be configured.
Hope that helps!
slxmclxtds
37,677 PointsLets say I would like to create my own plugin. Plugin needs HTML, CSS, Javascript, so I need to know these languages. So would you say that Front-End Developers usually makes these plugins. When applying for job is that expected from a Front-End Developer? I know that it can vary, but what are your thoughts on that.
When using other user created plugins, does it mean my pages loads a lot slower. If I would create my own and that plugins serves just one purpose rather than many, so It means that my pages load faster, right?
When I'm really interesting specifically in those plugins that play once when scrolling down the page, like in the previous example, that I first posted. What keywords should I use to find them?
Kevin Korte
28,149 PointsI would say that yes, typically a "front end developer" would be the one might be more inclined to create a plugin. But, that's not to say that somebody who considers them self a back end developer couldn't or wouldn't make a plugin either. I feel this line between front end and back end is becoming more blurred.
Typically, most plugins have just started from somebody having an issue they needed solved, solved it, and than decided to abstract their solution into a nice little package for others to use. Which also means you don't have to use plugins, you can solve everything a plugin does for yourself.
As far as page speed; not necessary. Your own custom solution may end up being a lot slower than a plugin. You can easily do more damage your web speeds. The good news about plugins is that they are almost always (and should be) open source, meaning that there are multiple people working on the code that is the plugin making it faster, leaner, or more legacy proof. That generally is a good thing. Depending on your skill set, a plugin may be a better solution than doing it your self. As an example, this slider plugin is only 3kb. That's pretty darn tiny.
As far as that website goes, some key words to search for a plugin that has that feature might be "parallax" and "scrolling"
Here are some very popular plugins that can do that kind of stuff.
http://janpaepke.github.io/ScrollMagic/
http://pixelcog.com/parallax.js/
http://prinzhorn.github.io/skrollr/
http://markdalgleish.com/projects/stellar.js/demos/
And here is a list of 35 plugins
miikis
44,957 PointsHey Imre,
Plug-ins have their place, but most of them are pretty simple to create on your own and/or customize once you have a basic comprehension of JavaScript, and HTML/CSS of course. In fact, using the jQuery framework, there are few things you cannot do with a relatively few lines of code.
You also have the option of mastering CSS Animations. The functionality of these is growing constantly. The downside would be that the newer options typically lack full-browser support. jQuery would not have this limitation.
In summary, everything in your OP is doable using JavaScript, and even easier to do using a combination of CSS Animations and jQuery, especially jQuery.
slxmclxtds
37,677 PointsThanks guys for your help.
I really appreciate it. :)