https://github.com/pier-oliviert/iphoneperspective

A CSS/Javascript snippet that lets you present your iOS app in perspective iPhone with dynamic lightning.
https://github.com/pier-oliviert/iphoneperspective

Last synced: about 2 months ago
JSON representation

A CSS/Javascript snippet that lets you present your iOS app in perspective iPhone with dynamic lightning.

• Host: GitHub
• URL: https://github.com/pier-oliviert/iphoneperspective
• Owner: pier-oliviert
• Created: 2011-12-14T14:18:01.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2011-12-15T21:53:04.000Z (about 13 years ago)
• Last Synced: 2023-03-12T10:11:17.547Z (almost 2 years ago)
• Language: JavaScript
• Homepage: http://www.pothibo.com
• Size: 484 KB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.markdown

Awesome Lists containing this project

README

        
# Supported browser: 

Chrome, Safari.

# How to use

1. Copy the content of iphone.html (everything and including div.scene)

2. Add the /stylesheets /images and /javascripts content to your project

3. Profit!

Within div.scene, you have a div with a classname "screen". You can add anything you want in there and it will be rendered within the iPhone. It will also follow the perspective changes.

# Todo

- I would like to add a fallback support for Firefox and IE. I'll probably add it soon.

- Fix the shadow (It's a bit off)

- Any other bug fix that would be required.

# Contribute

I know this snippet isn't perfect. If you make a fix, please submit a pull request, I'll merge it happily.

This project uses quite a few open source project. If you want to work on the sources, you need to be familiar with [Ender](http://ender.no.de/), [CoffeeScript](http://jashkenas.github.com/coffee-script/) and [Compass](http://compass-style.org/)

Ender is built with qwery, bonzo and domready.

If you need any help with setting your development project, you can reach me on Twitter (@pothibo) or fill a bug issue.

# Credits

Thank you to [Tom Giannattasio](http://attasi.com/labs/ipad/) and [Dezine](http://re-dzine.net/demo/iphone4)

I based my work around Tom's iPad and used Dezine's iPhone 4 as a reference. I also used some of his techniques for the speaker and camera lens.

Thank you everyone, you can follow [@pothibo](https://www.twitter.com/pothibo) on Twitter.