• Share

7 Brilliant Apple like effects for your website using jQuery

Free Website

Apple produces one of the coolest products in the world & there are so many Apple fanboys who are ready to put their money into buying the next apple product even before Steve Jobs shows them what it is. Thats the level of confidence Apple has created which is hard to emulate by any other company. Using an Apple product resonates a stylish, niche look which slowly is turning into a status symbol among many who are ready to pay a premium for using Apple products & the reason for such a fan following is due to the level of effort Apple spends in designing a product as well as quality products. Apple’s website is also a major source of inspiration for many web designers on the web – its sleek, lot of images, less text, feature filled. Lets check out few features available on Apple.com which you can use on your site too using the following tutorials made using jQuery…

#1. MopSlider – Similar to Apple Product Slider

MopSlider is an jQuery plugin which is exactly similar to the product slider on Apple.com.

MopSlider - jQuery Plugin

MopSlider - jQuery Plugin

Resource: Sample | Tutorial


#2. Apple downloads slider effect using jQuery

Create a slider/accordion effect similar to the slider on Apple downloads page using jQuery Accordion plugin.

Auto Slider/Accordion - jQuery plugin

Auto Slider/Accordion - jQuery plugin

Resource: Sample | Tutorial


#3. Sleek apple style content slider using jQuery & PHP

Create a sleek apple style content slider using jQuery, PHP & mopSlider. This script is handy in situations where you have lot many priority items & everything needs to be displayed above the fold.

Content Slider using jQuery & PHP

Content Slider using jQuery & PHP

Resource: Sample | Tutorial


#4. Apple like slideshow using jQuery & CSS

Learn to create an apple like slideshow using jQuery & CSS. This script is amazing & gives a beautiful effect to product/image slideshows.

Apple like Slideshow using jQuery & CSS

Apple like Slideshow using jQuery & CSS

Resource: Sample | Tutorial


#5. Apple OS style Fishe-eye menu using jQuery

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover!

jqdock: Fisheye menu using jQuery

jqdock: Fisheye menu using jQuery

Resource: Sample | Tutorial


#6. Apple.com style search suggestion using jQuery

Create a fancy apple.com-style search suggestion using jQuery/CSS/PHP. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.

Apple.com style search suggestion using jQuery

Apple.com style search suggestion using jQuery

Resource: Sample | Tutorial


#7. Create an Apple iPad like retina effect using jQuery

Apple is known for their design skills & the level of effort which they put into marketing their product. iPhone & iPad revolutionized the way we access internet on a mobile handheld device & both had a common problem in hand was how to display so much on information on such a small screen. Condensing & creating a new version of the web for mobile was the not the right solution, to make the device successful Apple had to have a design which can allow the user to experience the existing web on the mobile while managing to provide the best in class user experience. One of the feature which made it happen was the retina effect which would allow the user to zoom into a view using a magnifying glass. Check out this jQuery tutorial which helps you do the same thing much like apple does…

Apples like retina effect using jQuery

Apples like retina effect using jQuery

Resource: Sample | Tutorial

If you find any other script which emulates any feature from Apple, please submit it or share it in the comments section so that we can add to the list.

Related posts:

  1. Create an Apple like retina effect using jQuery
  2. Sleek apple style content slider using jQuery & PHP
  3. MopSlider – Similar to Apple Product Slider – jQuery Plugin
  4. Apple.com style search suggestion using jQuery
  5. Apple like slideshow using jQuery & CSS

3 Responses to 7 Brilliant Apple like effects for your website using jQuery

  1. Pingback: Tweets that mention 7 Brilliant Apple like effects for your website using jQuery | Ajaxdump -- Topsy.com

  2. Studentenjob says:

    Nice collection. Thanks for sharing :-)

  3. Nikhilesh B. M. says:

    Thanks very much…. you are awesome :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>