Skip to content

An Apple TV Card/Widget with hover animation written in JavaScript and CSS.

License

Notifications You must be signed in to change notification settings

marcreichel/apple-tv-card

Repository files navigation

Apple TV Card (with JavaScript and CSS)

version downloads CodeFactor license

An Apple TV Card with hover animation and parallax effect.

Demo

Animation

Live Demo

See It In Action

Installation

Via a package manager

NPM

npm install @marcreichel/apple-tv-card --save

yarn

yarn add @marcreichel/apple-tv-card

Directly via CDN

Insert inside the head of your HTML:

<link href="//cdn.jsdelivr.net/npm/@marcreichel/apple-tv-card@latest/dist/main.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/@marcreichel/apple-tv-card@latest/dist/main.js" defer></script>

Set up (only necessary for NPM and Yarn)

Require the JavaScript

require('@marcreichel/apple-tv-card');

Import the CSS

@import "~@marcreichel/apple-tv-card/dist/main.css";

Usage

Add the card to your HTML:

<div class="apple-tv-card-container" style="width:300px;">
    <div class="apple-tv-card">
        <div class="content" style="background-image:url(...);">
            <!-- Any non-parallax content -->
        </div>
        <div class="parallax-content">
            <!-- Example -->
            <div style="width:5em;height:5em;border:1em dashed white;"></div>
            <!-- End: Example -->
        </div>
    </div>
    <div class="apple-tv-card-title">
        Your awesome card
    </div>
</div>

Credits

Known Issues

Any known issues can be found here.

Contributing

Contributions are always welcome!