drewwilson / atvimg Goto Github PK

View Code? Open in Web Editor NEW

1.4K 1.4K 111.0 594 KB

CSS 13.85% JavaScript 86.15%

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

AngularJS support

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

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.

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

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!

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

Disable & Destroy

It is possible to disable atvImg on mobile devices?

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>

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.

Install with bower

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

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 !

     <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

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.