Apple TV Card (with JavaScript and CSS)

An Apple TV Card with hover animation and parallax effect.

Demo

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>