https://github.com/pqina/flip

⏳ The online version of the classic flip clock
https://github.com/pqina/flip

countdown counter flip flip-animation flipclock

Last synced: 3 months ago
JSON representation

⏳ The online version of the classic flip clock

• Host: GitHub
• URL: https://github.com/pqina/flip
• Owner: pqina
• License: mit
• Created: 2020-03-06T07:48:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-17T15:53:37.000Z (12 months ago)
• Last Synced: 2024-04-14T05:58:53.972Z (7 months ago)
• Topics: countdown, counter, flip, flip-animation, flipclock
• Language: JavaScript
• Homepage: https://pqina.nl/flip/
• Size: 828 KB
• Stars: 838
• Watchers: 16
• Forks: 85
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flip Countdown

Flip is an advanced and beautiful flip counter plugin. Easy to use and highly flexible, you can set up a custom counter on your website in minutes. Display visitor counts, countdown to a special date or celebrate progress. Whatever you’re planning, the options are endless.

![](./flip.gif)

[Learn more about Flip](https://pqina.nl/flip/) / [Learn more about Tick the engine that powers Flip](https://github.com/pqina/tick/)

---

[](https://www.buymeacoffee.com/rikschennink/)

[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Dev updates on Twitter](https://twitter.com/rikschennink/)

---

## Quick Start

If you just want to get on your way, copy the `example` directory and use it as a starting point.

This example will automatically initialize Flip counters on the website and can be used with the [presets on the demo site](https://pqina.nl/flip/#presets).

Or you can use one of the javascript framework codesandboxes below:

- [React](https://codesandbox.io/s/react-flip-demo-txoux)

- [Vue](https://codesandbox.io/s/vue-flip-demo-xhtfk)

## Setup

For the code snippets below we'll assume it's the `flip.min.css` and `flip.min.js` version and the folder we are uploading to is named `flip`.

Copy the following HTML snippet in the `` of your web page.

```html

```

Then copy the following snippet and place it just before the closing `` tag.

```html

```

Make sure the paths in the above code snippets match the location of the CSS and JS files.

You can now copy past the [presets](https://pqina.nl/flip/#presets) to your website and everything should function correctly.

You can also load the files from a CDN like unpkg using the links below:

```html

```

```html

```

### Install from NPM

```

npm i @pqina/flip --save

```

```js

import Tick from '@pqina/flip';

console.log(Tick);

// logs {supported: true, options: {…}, helper: {…}, data: {…}, DOM: {…}, …}

```

## Docs

Information on how to customize Tick and use the Tick API can be found on the [product website](https://pqina.nl/tick/).

## Accessibility

For better compatibility with screenreaders, we need to hide the flip view using `aria-hidden`, this prevents the contents from being read out load. We can then use an `aria-label` attribute to provide a formatted label instead.

```html



  

    

    


        

    

  



function setupFlip(tick) {

    Tick.helper.interval(function() {

        tick.value++;

        // Set `aria-label` attribute which screenreaders will read instead of HTML content

        tick.root.setAttribute('aria-label', tick.value);

    }, 1000);

}

```

## License

MIT License, Enjoy!