marcreichel / apple-tv-card

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

Apple TV Card (with JavaScript and CSS)

An Apple TV Card with hover animation and parallax effect.

Demo

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

• @marcreichel
• All Contributors

Known Issues

Any known issues can be found here.

Contributing

Contributions are always welcome!