alt="Design Inspiration: 30 Unique JavaScript Website" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/12/morgule-500x375_c.jpg" />
JavaScript can be used to spice up any website by making it dynamic, let’s face it looking at a plain HTML webpage is just boring. You can use JavaScript in many different ways to meet the needs of your website but a couple common uses include, creating mouse over affects, interactive menus, and validate user input.
1. Monofactor
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-1.jpg" alt="JavaScript Samples" width="750" />
Monofactor is a website that uses a hand full of JavaScript scripts to create a dynamic yet professional appearance. The developers used enough JavaScript to make the page dynamic butto much that it is overpowering.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.monofactor.com/">Take a look at Monofactor
2. Netdreams
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-2.jpg" alt="JavaScript Samples" width="750" />
Netdreams uses JavaScript to expand sections of the page without reloading it. It gives the page a cooleffect slowing it down by having to refresh on every click.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.netdreams.co.uk/index.php/what-we-do/web-services/">Drop by Netdreams and take a look
3. Creasenso
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-3.jpg" alt="JavaScript Samples" width="750" />
Creasenso uses JavaScript in their navigation to expand the information in the pictures. This gives the website anice feel along with a professional look for the industry.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.creasenso.fr/freelances/motion/">View Creasenso site now
4. Apple
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-4.jpg" alt="JavaScript Samples" width="750" />
Apple uses JavaScript all over their site to provide it with a truly dynamic website. It is very apparent that Apple spent some serious time designing this site.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.apple.com/mac/">Stop by Apple and check out the sites beauty
5. Navigiant
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-5.jpg" alt="JavaScript Samples" width="750" />
Navigiant uses JavaScript to create an effective multi-layer navigation menu that really makes the site stand out. They also have a nice gallery in the bottom left corner that provides the user additional information without cluttering the page.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.navigantconsulting.com/">Take a look at Navigiants’ website
6. Search Inside Video
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-6.jpg" alt="JavaScript Samples" width="750" />
Search Inside Video has a movie stile navigation menu that is powered by JavaScript and scrolls to the proper section of the site based on the menu choice. It uses a single page design so it never needs to be reloaded.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://searchinsidevideo.com/">Check out Search Inside Video’s website
7. Eric Johansson
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-7.jpg" alt="JavaScript Samples" width="750" />
This is one of the most unique website I have come across so far. The web developer used a scroll bar at the bottom of the page that drags a guy on a scooter across the page. Once you get to one of the menu sections you can drag down the menu and make a selection.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.ericj.se/">Stop on by Eric Johansson’s website now
8. Dragon Interactive
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-8.jpg" alt="JavaScript Samples" width="750" />
Dragon Interactive uses JavaScript to make the buttons on the site look like they were created with Flash. When you scroll over one of the button it gradually changes color to go from the grey to a dark blue as shown in the picture above. Overall I really like this design because it is very interactive and professional at the same time, this combination is sometimes difficult to achieve.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://dragoninteractive.com/">Take a look at Dragon Interactive
9. JMar’s Blog
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-9.jpg" alt="JavaScript Samples" width="750" />
JMar’s Blog uses JavaScript to create a mouse over effect that changes the color of the button and displays a detailed description in the right hand section of the page. This website is a little different but I like how it looks and how the webmaster used JavaScript to make it different.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://blog.jeremymartin.name/"> Take a look at JMar’s Blog
10. Coda
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-10.jpg" alt="JavaScript Samples" width="750" />
Coda is a one-page website developer that used JavaScript on their page to make it appealing and functional. When you click on one of the links it scrolls the gallery section to a new page instead of reloading the entire page. This helps to keep users on the page, reduce the load on the server, and looks great.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.panic.com/coda/">View Coda’s site
11. Aviary
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-11.jpg" alt="JavaScript Samples" width="750" />
Aviary is an impressive looking website that pushes the envelope on design and functionality. They included a JavaScript navigation bar that has images in the sub-category section; this is not seen often and gives the site a unique feel.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.aviary.com/">Check out Aviary’s site now
12. Podcast Tuneup
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-12.jpg" alt="JavaScript Samples" width="750" />
Podcast Tuneup uses JavaScript to create a nice tabbed section under the gallery. This gives the site a nice feeland still provides all the information to the view without cluttering the site.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.podcast-tuneup.com/">Stop by Podcast Tunup today
13. We Were Sofa
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-13.jpg" alt="JavaScript Samples" width="750" />
We Were Sofa is a professional looking functional website that uses JavaScript to refresh the bottom section of the page based on your selection from the navigation menu. This gives the site a single page feel but does not leave all the information visible like most single page sties do.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.madebysofa.com/">View We Were Sofa’s site now
14. Alex Buga’s Livingroom
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-14.jpg" alt="JavaScript Samples" width="750" />
Alex Buga’s Livingroom uses a well-mixed verity of JavaScript scripts to make this site truly unique. This site allows you to drag open the navigation bar at the top or scroll over the glass shelf’s to watch them open.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.alexbuga.com/v9/#welcome">Take a look at Alex Buga’s Livingroom
15. Kobe
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-15.jpg" alt="JavaScript Samples" width="750" />
Kobe uses a mixture of JavaScript and Flash to give their site a unique feel. When you click on the menu items, JavaScript is used to slide the requested information into the display area.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.arcinspirations.com/kobe/">Stop on by Kobe’s site
16. Engage Interactive
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-16.jpg" alt="JavaScript Samples" width="750" />
Engage Interactive uses JavaScript to create a menu the collapses on itself when another option is chosen. They also made the site display like a gallery would when you switch pages. The combination of these two features make Engage Interactive really stand out.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.engageinteractive.co.uk/">View Engage Interactive’s web site
17. Helldesign
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-17.jpg" alt="JavaScript Samples" width="750" />
Helldesign uses JavaScript to create their truly unique menu that changes the display in the top section based on the selection. You do not see many menus or designs like this so I had to include it in this list.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://helldesign.net/">Take a look at Helldesign’s site
18. Greenanysite
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-18.jpg" alt="JavaScript Samples" width="750" />
Greenanysite uses JavaScript to spice up an already unique design. The added a couple cool mouse over boxes that provide additional information and a fold at the top right of the page. Overall this site really stands out from most other sites because of the unique design and the couple extra features the web developer added.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.greenanysite.com/">Check out Greenanysite today
19. Vitamin J
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-19.jpg" alt="JavaScript Samples" width="750" />
Vitamin J uses a mixture of Flash and JavaScript to make their site stand out. Flash is used in the top navigation area and interacts with your mouse movement. JavaScript is used to display the selected information in the bottom section of the site.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.vitamin-j.de/">View Vitamin J’s site
20. Authentic Style
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-20.jpg" alt="JavaScript Samples" width="750" />
Authentic Style is another single page website that uses JavaScript to run the navigation controls. The web developer did a great job at making the site look different and still be functional at the same time.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.authenticstyle.co.uk/">Stop by Authentic Style’s website today
21. Jeda Records
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-21.jpg" alt="JavaScript Samples" width="750" />
Jeda Records is another site that uses JavaScript to create their site using a single page, and they do it very well. When you click on an item from the navigation menu the pages scrolls to the desired location, without need for the site to refresh. This along with the color scheme and background gives the site a nice feel.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.jedarecords.it/">Visit Jeda Records’ Site
22. Team Viget
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-22.jpg" alt="JavaScript Samples" width="750" />
Team Viget uses JavaScript to allow the pages on their website to turn, like on a wheel, when you go from page to page. This gives the site a unique feel because this type of navigation is not seen often at all. The navigation is a little choppy but overall I think they did a great job making their site stand out.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.teamviget.com/">Take a Look at Team Viget’s Site
23. Nofrks
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-23.jpg" alt="JavaScript Samples" width="750" />
Nofrks is another site that uses JavaScript to create a single page design, but they do it a little differentlythan others have. Instead of just scrolling up or down to the desired content, Nofrks scrolls horizontally and diagonally to the content.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.nofrks.com/">Stop by Nofrks’ SiteToday
24. Webleed Design
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-24.jpg" alt="JavaScript Samples" width="750" />
Webleed Design also went with a single page design created by JavaScript but they did a little extra to make it stand out. When you are scrolling to the content there are graphics that look like they are moving. This gives the site a truly unique feel and I have neverseen anything like it.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.webleeddesign.com/">Take a look at Webleed Design
25. More LLC
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-25.jpg" alt="JavaScript Samples" width="750" />
More LLC is an example of a site built with JavaScript that was not properly thought out. They used a single page design but more than one set of information is displayed on the page at one time. I don’t think they took resolution into consideration. I added them to this list to give you an example of a not so great website using JavaScript differently.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.morellc.com/">View More LLC’s Site
26. Volll
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-26.jpg" alt="JavaScript Samples" width="750" />
Volll used JavaScript in their design to make create a single page site that functions properly and looks great. When you use the navigation menu the site scrolls to the desiged content. Once at the desired section of the page if you click a link there it will load only the new content and display it in the designated section. Overall I think this site looks great.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.volll.com/">Stop by Volll Human Communication’s Site
27. Mozilla
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-27.jpg" alt="JavaScript Samples" width="750" />
Ok here is a site that pretty much everyone has been to at one point or another. Mozilla uses JavaScript all over this site to make it functional, easy on the eyes, and professional. I would not expect anything else from this great company.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.mozilla.org/en-US/firefox/fx/">Take a look at Mozilla’s Site
28. Firestone Live
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-28.jpg" alt="JavaScript Samples" width="750" />
Firestone Live uses a mixture of Flash and JavaScript to make a very interactive website. The content and graphics on this site is great but like with many Flash website the load time can be slow sometimes. Despite having a slow load time I think this site stands out ina good way.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://firestonelive.net/">View Firestone Live’s Site Today
29. Small Stone Recording
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-29.jpg" alt="JavaScript Samples" width="750" />
Small Stone Recording’s uses JavaScript to create a unique navigation menu in the forum of an amplifier. When you click on a link only the content is refreshed/loaded not the navigation menu keeping laod times down. Overall I think they did a great job making this site stand out and it could not have been done without
JavaScript.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.smallstone.com/home.php">Visit Small Stone Recording’s Site
30. Dibusoft
class="border" src="http://www.webhostingsecretrevealed.net/images/2012/0323-30.jpg" alt="JavaScript Samples" width="750" />
Dibusoft uses JavaScript to help with the navigation menu and also the gallery that is blended in with the site. The gallery is different than most I have seen because it blends in with the site very well. When you click the arrows next to the city shown in the picture above it changes the picture and the text to the left of it. This is just one ofthe features that make the site stand out and look great.
class="meteor-icon" style="font-size:130% !important;">
class="icon-link" style="color:inherit !important;">
href="http://www.dibusoft.com/">Stop by Dibusoft’s Site
Page 25 – Web Hosting Secret Revealed
