drewwilson / atvimg Goto Github PK

CSS 13.85% JavaScript 86.15%

atvimg's Introduction

atvImg

atvImg = 'AppleTV Image'

This lightweight (2kb) plug-in will automatically turn your layered Apple TV PNGs into 3D parallax icons, the same way the new Apple TV treats app icons. You can have any number of AppleTV Images on your web page.

No dependencies, this plugin is just plain ol' vanilla javascript. Works on all major browsers. It even supports touch and mobile.

A live example of this plug-in can bee seen here: http://kloc.pm

Here is a video explaining how it works: http://d.pr/v/18YXv

Here is a video showing off the touch/mobile support: http://d.pr/v/1k2Ju

Here is how to setup the HTML for a single atvImg:

<div class="atvImg">
   <img src="/images/flattened-icon.jpg">
   
   <div class="atvImg-layer" data-img="/images/back.png"></div>
   <div class="atvImg-layer" data-img="/images/front.png"></div>
</div>

You can have any number of '.atvImg-layer' elements. So add as many as your icon needs. Be sure to use 2x (retina) scale PNGs. The plug-in will downscale for 1x screens. Using 2x scale PNGs is recommended so the icon will appear crisp on 2x screens.

Layer images should be 2x the size you want to display the icon as. The plug-in will adapt the atvImg to be whatever size it's parent element is. So if you set your '.atvImg' element to be 320px X 190px, that is how big the icon will appear. If you set it to be 640px X 380px, that is how big it will appear. Just be sure to use the correct aspect ratio for AppleTV icons.

The <img> element in the example above is a fallback in case javascript is not allowed to run. It will be removed when the plug-in is running. Put a flattened version (no layers) of you icon in there.

Then call the function in you <script> tag or JS file like this:

atvImg();

Just be sure you add that line after you've loaded the DOM. So put it below all your page's HTML just before the closing </body> tag or in a document.ready() function.

This atvImg plug-in is dual licensed under the MIT and GPL licenses:

I used http://designmodo.com/apple-tv-effect as reference and inspiration when creating this plug-in.

atvimg's People

Contributors

Stargazers

Watchers

Forkers

mpociot carabina ibenka mesilov afthill wyvernzora manish05 sufianhassan imcoding bbbrrriiiaaannn iwaffles anantharajuc elonmir dim25 pmx19 onexuan jgthms truevalentine karimabdul gubagu pandaduc worldofopendev git2358 lizka chrisemoulton umarmughal ashish0038 jonket konstantinrost umade alfhub yerffejytnac brandturner ericchan1025 david84 gillesdemey puzman skvorzof tzzo alejandropenafiel mcanthony andreishapa kaziko achailleux mgranados ayalamac krunalgeek kevinrodbe kzeni rockmandew thebestbits mukuljainx digideskio nagarajumusini beingsane spedrii nickchen14 mkipg beingsagir jayvi vivianhuai amilajack martymaldo85 benderwan darlanmendonca matthew-dean prabhanshuattri themukul javid-izadfar thakerhardiks hhy5277 khalilbenihoud loogart mrbubbaz rexfordkelly-on-js hktianyi selimchiki buiduccuong30051989 reactual meta-dreamer jotaandrade denslabokruh albsugy precogsecurity injms litson-95 kojimaru0207 moonspeaking adioslabs swearin pdbq21 akatrukhin dahaoge daaab chu121su12 homj bjoern-sellnau thasophearak harsh2201 alopexid

atvimg's Issues

no image displaying

     <div class="atvImg-layer" data-img="images/back.png"></div>
     <div class="atvImg-layer" data-img="images/front.png"></div>
  </div>

used same images as give in demo site

Responsive

Is it possible to make it responsive, i wish to wrap it in bootstrap's col-xx-xx grid system. I can only get it to display if i set a fixed width.

Add accelerometer support

Maybe by using device accelerometer this could be more intuitive to use on mobile. Something like is implemented at http://www.inserthtml.com/demo/accelerometer/index-2.php would be great!

Feature Request - Options

Can we get some options on this to adjust things like the zoom level, sensitivity, shine etc on this at all please?

Thanks.

AngularJS support

Hi,
amazing plugin!
I was just wondering if somebody knows how can configure it to work with angularjs.
Any suggestion?

How to use this as a component in ReactJS?

image problem atv with carousel

I think there was a problem atv with carousel
the img into item active class show correctly the images
but in item class not show the image

http://imgur.com/a/kTkjF

Install with bower

It would be great if you can make it installable via bower.

Allow text as a layer

Would be nice to allow the user to add a layer with text. Or is this already possible? Because it seems to empty the layer if I add text in a div with the class "atvImg-layer"

Image not showing

I see that the scripts remove the first child, but then it does not append it.
On your demo, you have added width and height inside the styles. This does not allow support for variable image sizes.

Safari

First of all: This script is great!!! I love how easy & light it is!!!

In Chrome & IE the effect is great (i haven`t tested Firefox yet). But in Safari it seems that only the shining effect but not the 3D Animation works... Anything i do wrong?

Cheers,
Max

cannot get it running

First of all i apologize for my stupid question. 😄
im not familiar with javascript but i want to test your cool plugin.

i created the following html page, but i dont get the plugin running at all.

<html>
<body>
<div class="atvImg">
   <img src="/images/Mario-Mushroom.png">
   <div class="atvImg-layer" data-img="/images/Mario-Mushroom.png"></div>
</div>
<script type="javascript" src="atvImg.js"></script>
<script>atvImg();</script>
</body>
</html>

The paths are correct but i only see the flattened image 😞

THX so much

Images not showing up

Hi,

Great library, I am having a issue the js is working but the newly created div has a height of 0px and no images are showing up. I have checked the image paths, Images have been downloaded from the sample website you created.

Here is the code:

    <link href="css/atvImg.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">

<script src="atvImg.js"></script>

Disable & Destroy

It is possible to disable atvImg on mobile devices?

Don't work with Firefox

Nice effect with Chrome, but totally broken under firefox when visiting your demo

Add project desc

Right now the description is blank:

A great project like this should always have a description. I would recommend something like:

Turn your layered Apple TV PNGs into 3D parallax icons with JS

firefox

When

Touch behavior does not allow for swiping/scrolling

I have a series of these atvImg graphics in a scrollable container (similar to how an Apple TV would). It works perfectly on desktop, but the problem is when the user wants to scroll the page/container on a touch device and they start their swipe on one of the atvImg graphics (which then prevents the default scrolling behavior). I personally commented out e.preventDefault(); in the touchmove event listener as a quick fix.

I had two ideas come to mind:

This could be added as an option when initiating atvImg(); so people can enable/disable e.preventDefault(); for touch devices depending on their interface needs.
Add swipe detection so swipes allow the user to scroll normally while non-swipes will prevent the page/container from scrolling.

I'm not sure if you'd want to go with one idea over the other (or both) so I'm not submitting this as a pull request at this time.

Touchscreen computers support

Hi,

I am using a computer which has got both a touchscreen and a trackpad / can be connected to a mouse and thus has touch support although I mostly use a mouse, thus the plugin does not show any hover effects as long as the touchScreen is on. I forked the project and enabled both event handling functions at a time, it seems to work fine on both touch and pointer interfaces.

Thanks !