PhotoTilt
HTML5 clone of the photo tilt feature/gesture/ux found in Facebook's Paper app
Install / Use
/learn @tregoning/PhotoTiltREADME
Photo Tilt
HTML5 clone of the photo tilt feature/gesture/ux found in Facebook's Paper app.
Basic Usage
PhotoTilt (image url, container node)
var photoTilt = new PhotoTilt({
url: 'photo.jpg',
lowResUrl: 'lowRes.jpg', //optional it will load lowRes 1st if available
maxTilt: 18, //optional, defaults to 20
container: document.body //optional, defaults to body
reverseTilt: false //optional, defaults to false
});
Note: The speed of the tilt can be tweaked by updating the transform transtion speed in the CSS file.
Demo
You can find a working example here (make sure you test this on a device with a triaxial/accelerometer like a phone/tablet).
More
Blog post with extra information here.
TODO
- add option for full screen mode
- implement lockOrientation (only works in FF)
Related Skills
node-connect
353.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
111.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
353.3kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
353.3kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
