Skip to content

Commit

Permalink
initial version
Browse files Browse the repository at this point in the history
  • Loading branch information
@thompsonemerson
thompsonemerson committed Jan 7, 2017
1 parent 39a9925 commit edb4b53
Show file tree
Hide file tree
Showing 10 changed files with 609 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-umd"]
}
6 changes: 6 additions & 0 deletions .banner
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*!
* CardMove v<%= pkg.version %>
* https://github.com/thompsonemerson/cardmove
*
* Licensed MIT © Emerson Thompson
*/
157 changes: 157 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,158 @@
# CardMove

[![licence mit](https://img.shields.io/badge/licence-MIT-blue.svg)](http://thompsonemerson.mit-license.org/)
[![Build Status](https://travis-ci.org/thompsonemerson/cardmove.svg?branch=master)](https://travis-ci.org/thompsonemerson/cardmove)
[![GitHub version](https://badge.fury.io/gh/thompsonemerson%2Fcardmove.svg)](https://badge.fury.io/gh/thompsonemerson%2Fcardmove)
[![Bower version](https://badge.fury.io/bo/cardmove.svg)](https://badge.fury.io/bo/cardmove)
[![npm version](https://badge.fury.io/js/cardmove.svg)](http://badge.fury.io/js/cardmove)

> It's a plugin developed with JavaScript, that allows to dynamically animate angle and perspective of card with mouseover.
## Table of Contents

- [Install](#install)
- [Setup](#setup)
- [How to Use](#how-to-use)
- [Examples](#examples)
- [Contributing](#contributing)
- [History](#history)
- [License](#license)

## Install

Get with npm

```bash
$ npm install cardmove --save
```

bower

```bash
$ bower install cardmove --save
```

If you prefer you can just [download a ZIP](https://github.com/thompsonemerson/cardmove/archive/master.zip) file.


## Setup

First, include the script located on the `dist` folder.

```html
<!-- CardMove JS minified -->
<script src="dist/cardmove.min.js"></script>
```

Now need to prepare our(s) card(s) and show to the CardMove.
```html
<!-- Item -->
<div class="card-item">
<div class="card-content">
<!-- Content of your item here -->
</div>
</div>

<!-- Starting the CardMove -->
<script>
new CardMove('.card-item');
</script>
```

Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process. <br>
Now says it is not easy?! ;)


## How to Use

| Property | Type | Default | Description |
| :------------ | :-----: | :-------:| :----------------------------------------------- |
| angle | number | 30 | Regulates the angle of the animation card. |
| perspective | number | 300 | Regulates the perspective of the animation card. |
| horizontal | boolean | true | Enables or disables horizontal animation. |
| vertical | boolean | true | Enables or disables vertical animation. |
| speed | number | 500 | Sets an animation speed in milliseconds. |

```html
<!-- HTML Element -->
<div
class="card-item"
data-card-angle="[value]"
data-card-perspective="[value]"
data-card-horizontal="[value]"
data-card-vertical="[value]"
data-card-speed="[value]">

<div class="card-content">
...
```

```html
<!-- JavaScript -->
<script>
new CardMove('.card-item', {
angle: '[value]',
perspective: '[value]',
horizontal: '[value]',
vertical: '[value]',
speed: '[value]'
});
</script>

<!-- Thus it is applied universally -->
```

## Examples

> Images by [lorempixel](http://lorempixel.com).
![GIFs <3](demo.gif)

### Item 1

> Default
```html
<div class="card-item">
<div class="card-content">
...
```

### Item 2

> Angle value `100`
```html
<div class="card-item" data-card-angle="100">
<div class="card-content">
...
```

### Item 3

> Horizontal value `false`
```html
<div class="card-item" data-card-horizontal="false">
<div class="card-content">
...
```

## Contributing

Help improve these docs. Open an [issue](https://github.com/thompsonemerson/cardmove/issues/new) or submit a pull request.

1. Navigate to the main page of the repository
1. [Fork it!](https://github.com/thompsonemerson/cardmove#fork-destination-box)
1. Create your feature branch: `git checkout -b my-new-feature`
1. Commit your changes: `git commit -m 'Add some feature'`
1. Push to the branch: `git push origin my-new-feature`
1. Submit a pull request =D

## History

See [Releases](https://github.com/thompsonemerson/cardmove/releases) for detailed changelog.

## License

[MIT License](http://thompsonemerson.mit-license.org/) © Emerson Thompson
41 changes: 41 additions & 0 deletions demo/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/* Reset
/ ============================== */
html,
body {
font-family: "Lato", sans-serif;
background: #FFFFFF;
}
pre,
pre.prettyprint {
border: 0 !important;
border-left: .3rem solid #2196F3 !important;
color: #655d5d;
}
.code-content .com {
color: rgba(44, 62, 80, 0.4);
}

.container {
max-width: 800px;
}


/* Main
/ ============================== */
.main .block {
margin: 80px 0;
}
.main .block .title {
margin-bottom: 15px;
line-height: 1;
font-weight: 400;
}
.main .block p {
margin-bottom: 10px;
line-height: 1;
}

.main .text-center {
display: block;
text-align: center;
}
172 changes: 172 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CardMove | Animation Card CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="It's a plugin developed with JavaScript, that allows to dynamically animate angle and perspective of card with mouseover.">

<meta property="og:url" content="http://thompsonemerson.github.io/cardmove/">
<meta property="og:type" content="website" />
<meta property="og:locale" content="en">
<meta property="og:title" content="CardMove | Animation Card CSS">
<meta property="og:description" content="It's a plugin developed with JavaScript, that allows to dynamically animate angle and perspective of card with mouseover.">

<meta property="article:published_time" content="2017-01-01T01:00:00Z">
<meta property="article:author" content="Emerson Thompson">
<meta property="article:section" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="CardMove | Animation Card CSS">
<meta name="twitter:url" content="http://thompsonemerson.github.io/cardmove">
<meta name="twitter:site" content="http://thompsonemerson.github.io/cardmove">
<meta name="twitter:creator" content="Emerson Thompson">
<meta name="twitter:title" content="CardMove | Animation Card CSS">
<meta name="twitter:description" content="It's a plugin developed with JavaScript, that allows to dynamically animate angle and perspective of card with mouseover.">

<link href='https://fonts.googleapis.com/css?family=Lato:700,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="wrapper">
<section class="container main">
<div class="block">
<h5 class="title">Examples</h5>
<small>Images by http://lorempixel.com</small><br><br>
<div class="row">
<div class="column">
<div class="item">
<div class="card-item">
<div class="card-content">
<img src="http://lorempixel.com/220/250/" alt="">
</div>
</div>
</div>
<small class="text-center">Item 1</small>
</div>
<div class="column">
<div class="item">
<div class="card-item" data-card-angle="100">
<div class="card-content">
<img src="http://lorempixel.com/220/250/" alt="">
</div>
</div>
</div>
<small class="text-center">Item 2</small>
</div>
<div class="column">
<div class="item">
<div class="card-item" data-card-horizontal="false">
<div class="card-content">
<img src="http://lorempixel.com/220/250/" alt="">
</div>
</div>
</div>
<small class="text-center">Item 3</small>
</div>
</div>
<pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com">&lt;!-- Item 1 | Default --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-item"</span><span class="pln"></span><span class="tag">&gt;</span>
<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content"</span><span class="pln"></span><span class="tag">&gt;</span>
...

<span class="com">&lt;!-- Image 2 | Angle value "100" --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-item"</span><span class="pln"> </span><span class="atn">data-card-angle</span><span class="pun">=</span><span class="atv">"100"</span><span class="tag">&gt;</span>
<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content"</span><span class="pln"></span><span class="tag">&gt;</span>
...

<span class="com">&lt;!-- Image 3 | Horizontal value "false" --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-item"</span><span class="pln"> </span><span class="atn">data-card-horizontal</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span>
<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content"</span><span class="pln"></span><span class="tag">&gt;</span>
...</code></pre>
</div>

<div class="block">
<h5 class="title">How to use</h5>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>angle</td>
<td>number</td>
<td>30</td>
<td>Regulates the angle of the animation card.</td>
</tr>
<tr>
<td>perspective</td>
<td>number</td>
<td>300</td>
<td>Regulates the perspective of the animation card.</td>
</tr>
<tr>
<td>horizontal</td>
<td>boolean</td>
<td>true</td>
<td>Enables or disables horizontal animation.</td>
</tr>
<tr>
<td>vertical</td>
<td>boolean</td>
<td>true</td>
<td>Enables or disables vertical animation</td>
</tr>
<tr>
<td>speed</td>
<td>number</td>
<td>500</td>
<td>Sets an animation speed in milliseconds</td>
</tr>
</tbody>
</table>

<div class="row">
<div class="column">
<pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com">&lt;!-- HTML Element --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span>
<span class="atn">class</span><span class="pun">=</span><span class="atv">"card-item"</span><span class="pln"> </span>
<span class="atn">data-card-angle</span><span class="pun">=</span><span class="atv">"[value]"</span>
<span class="atn">data-card-perspective</span><span class="pun">=</span><span class="atv">"[value]"</span>
<span class="atn">data-card-horizontal</span><span class="pun">=</span><span class="atv">"[value]"</span>
<span class="atn">data-card-vertical</span><span class="pun">=</span><span class="atv">"[value]"</span>
<span class="atn">data-card-speed</span><span class="pun">=</span><span class="atv">"[value]"</span><span class="tag">&gt;</span>

<span class="tag">&lt;div <span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content"</span>&gt;
...</span></code></pre>
</div>
<div class="column">
<pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com">&lt;!-- JavaScript --&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"></span><span class="tag">&gt;</span><span class="pln"></span>
<span class="atn">new </span><span class="tag">CardMove(<span class="atv">'.card-item'</span>, {
angle: <span class="atv">'[value]'</span>,
perspective: <span class="atv">'[value]'</span>,
horizontal: <span class="atv">'[value]'</span>,
vertical: <span class="atv">'[value]'</span>,
speed: <span class="atv">'[value]'</span>
});</span>
<span class="tag">&lt;/script&gt;</span>

</code></pre>
</div>
</div>
</div>
</section>
</main>

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="../dist/cardmove.js"></script>
<script>
new CardMove('.card-item');
</script>
</body>
</html>
Loading

0 comments on commit edb4b53

Please sign in to comment.