Templates Review vFlip - Animated responsive vCard

Themes Download Site Templates Virtual Business Card vFlip - Animated responsive vCard

Download | Live View

PLEASE NOTE : If you are noticing the card disappearing as it flips, click “remove frame” to fix the issue. This is not a problem with the template!

You won’t find any other virtual business card like this

vFlip takes “virtual” to a new level. Open the preview in any good modern browser (Chrome, FireFox, Safari) and you’ll see what a virtual business card should really look like. Watch it flip as you change the page, observe it “peek” as you hover over the navigation elements.

This template is at the cutting edge of web technology, using CSS3 effects and 3D animations, HTML5 markup and media queries to detect screen size / pixel density.

Responsive – mobile support

vFlip will change its design for smaller screens. Resize your browser window to see it in action! This simpler version ensures you won’t get any unwanted funkiness with mobile devices.

Optimised for retina displays

vFlip calls upon a whole host of techniques to get it looking great on devices with a high pixel density screen (e.g. iPhone 4, iPad 3). Sites designed without this in mind can look pixelated or blurry (see above). vFlip avoids this in many ways:

• Icon fonts
• CSS effects for text and elements instead of raster images
• High res background patterns with media queries
• Doubling the resolution of inline images

Icon font heaven

Icon fonts are the way to go. They are faster, crisper and more efficient. vFlip comes with a pre-built icon font for you to use. It includes extra icons so you can choose what you want to have in the menu.

Take a look at the icon sheet to see what icons are included. With a little bit of research, it isn’t too tricky to change this font set using the IcoMoon app.

Very compatible

In short, vFlip works with all modern browsers (including IE7 !). It functions absolutely fine with JavaScript disabled and becomes a single page site. Details for each browser:

• Chrome – 3D Animations, 2D Animations, Looks great
• FireFox – 3D Animations (but flat, without perspective), 2D Animations, Looks great
• Safari – 3D Animations, 2D Animations, Looks great
• Opera – 2D Animations, Looks great
• IE9 , IE8 – Looks great, no animations.
• IE7 – No animations. Looks basic, icons missing. Still functions properly.

Got to love a features list!

• Clean, commented valid HTML5
• Unique 3D CSS3 animation
• Elegant design
• Responsive for mobiles
• Image gallery with youtube and vimeo support
• 3 preset versions to choose from (6 different card faces overall)
• Optimised for retina screens
• Customisable icons
• 5 different backgrounds (with high res versions)
• Working AJAX contact form (even works with JS disabled!)
• Includes SASS /SCSS stylesheet for you SASS lovers out there!

Preview Credits

• Illustrations: Harry Tennant – http://harrytennant.blogspot.com
• Photos: Amy Walker – http://www.amywalkerphoto.co.uk

All above are personal friends and have given me permission to use their work, none of which comes with the template.

Template Credits

• jQuery – The ever popular javascript library which all the below files rely upon.
• jQuery UI Widget Factory – Carousel uses this.
• Modernizr – Used to style site differently depending on browser as well as aiding with media queries in JS.
• jQuery Carousel – Carousel script used in the portfolio section.
• PrettyPhoto – Lightbox script used in portfolio section.
• jQuery hashchange event – Used to allow for linking to the different faces using hashtags.
• IcoMoon – Fantastic app for generating icon fonts, with it’s own set of icons, some of which are used in this template.
• Iconic – Some icons included in the icon font.
• Entypo – Some icons included in the icon font.
• Subtle Patterns – Used for backgrounds.
• Picons Social – Social icons included in the icon font.
• Oswald Font – Used for headers.
• PHP Mailer – Used for contact form PHP stuffs.

Looking for something funkier?

Then check out BigFat, a template focused on portfolios.

Updates

v1-3 ~ 03/09/2012 Fixed FireFox flickering bug, updated “stylesheets/style.css” (and corresponding scss file). 3D effect in FF now has no “perspective”, so looks flatter.

v1-2 ~ 26/07/2012 Fixed the next/previous function with the gallery. Updated “js/card.js”