Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/geberele/imac_scroll

THE AMAZING iMAC SCROLL EFFECT
https://github.com/geberele/imac_scroll

Last synced: 9 days ago
JSON representation

THE AMAZING iMAC SCROLL EFFECT

Host: GitHub
URL: https://github.com/geberele/imac_scroll
Owner: geberele
Created: 2015-08-10T22:01:02.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2015-12-19T16:53:55.000Z (almost 9 years ago)
Last Synced: 2024-08-02T15:34:22.649Z (3 months ago)
Language: JavaScript
Size: 1.93 MB
Stars: 4
Watchers: 0
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# THE AMAZING iMAC SCROLL EFFECT

This script reproduces a similar effect used by Apple in the iMac page of its website.
The images used for the demo are from Apple's website.

## Version 1.0

[click here](http://dev.gabrielemanna.com/imac-scroll/index_v1.html) to view the demo of the version 1.

## How it is made
The image is an high resolution image, it is possible to zoom in and zoom out without loosing definition and keeping all the details of the original image.
To be able to maintain that high quality it has been used an HTML5 Canvas element created by 8 images that work in a similar way as in a puzzle where different pieces form the final one.
The Canvas has size 6500x4612px and each single unit is 1625x2306px.
After that the javascript functions replace the normal scroll events of the page with the zoom effect on the image.

## Version 2.0

[click here](http://dev.gabrielemanna.com/imac-scroll/index_v2.html) to view the demo of the version 2.