https://github.com/marcreichel/apple-tv-card

An Apple TV Card/Widget with hover animation written in JavaScript and CSS.
https://github.com/marcreichel/apple-tv-card

animation apple apple-tv-card appletv card css css3 demo hacktoberfest html javascript parallax parallax-effect tv widget

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/marcreichel/apple-tv-card
• Owner: marcreichel
• License: mit
• Created: 2021-05-15T20:15:14.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T07:31:50.000Z (3 months ago)
• Last Synced: 2024-10-25T03:33:04.224Z (3 months ago)
• Topics: animation, apple, apple-tv-card, appletv, card, css, css3, demo, hacktoberfest, html, javascript, parallax, parallax-effect, tv, widget
• Language: JavaScript
• Homepage: https://marcreichel.github.io/apple-tv-card/
• Size: 20.4 MB
• Stars: 26
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Apple TV Card (with JavaScript and CSS)

![version](https://img.shields.io/npm/v/@marcreichel/apple-tv-card?style=for-the-badge)

![downloads](https://img.shields.io/npm/dt/@marcreichel/apple-tv-card?style=for-the-badge)

[![](https://img.shields.io/jsdelivr/npm/hm/%40marcreichel%2Fapple-tv-card?style=for-the-badge)](https://www.jsdelivr.com/package/npm/@marcreichel/apple-tv-card)

[![CodeFactor](https://img.shields.io/codefactor/grade/github/marcreichel/apple-tv-card?style=for-the-badge

)](https://www.codefactor.io/repository/github/marcreichel/apple-tv-card/overview/main)

![license](https://img.shields.io/npm/l/@marcreichel/apple-tv-card?style=for-the-badge)

An Apple TV Card with hover animation and parallax effect.

## Demo

![Animation](docs/demo.gif)

[Live Demo](https://marcreichel.github.io/apple-tv-card/)

[See It In Action](https://marcreichel.github.io/apple-tv/)

## Installation

### Via a package manager

#### NPM

```shell

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

```

#### yarn

```shell

yarn add @marcreichel/apple-tv-card

```

### Directly via CDN

Insert inside the head of your HTML:

```html

```

## Set up (only necessary for NPM and Yarn)

### Require the JavaScript

```javascript

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

```

### Import the CSS

```css

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

```

## Usage

Add the card to your HTML:

```html



    


        


            

        

        


            

            


            

        

    

    


        Your awesome card

    



```


## Credits

- [@marcreichel](https://www.github.com/marcreichel)

- [All Contributors](https://github.com/marcreichel/apple-tv-card/contributors)

## Known Issues

Any known issues can be found [here](https://github.com/marcreichel/apple-tv-card/issues?q=is%3Aopen+is%3Aissue+label%3Abug).

## Contributing

Contributions are always welcome!