Apple TV Card (with JavaScript and CSS)

An Apple TV Card with hover animation and parallax effect.

Demo

Live-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="//unpkg.com/@marcreichel/apple-tv-card@latest/dist/main.css" rel="stylesheet">
<script src="//unpkg.com/@marcreichel/apple-tv-card@latest/dist/main.js" defer></script>

Set up

Please note: This step is only necessary when you used a package manager for installation.

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

• Card title not displayed correctly in Safari

Contributing

Contributions are always welcome!