apple-tv-card

An Apple TV Card with hover animation and parallax effect


Keywords
apple-tv, css, javascript, widget, card, parallax, parallax-effect, animation, apple, apple-tv-card, appletv, css3, demo, hacktoberfest, html, tv
License
MIT
Install
npm install apple-tv-card@0.8.14

Documentation

Apple TV Card (with JavaScript and CSS)

CodeFactor version downloads license Gitmoji

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!