Flowly-JS

Demo is here

Setup

Add Flowly.js to your project with npm install --save https://github.com/hyde2able/Flowly-js or yarn add https://github.com/hyde2able/Flowly-js.

Now, you can require or import the library, depending on your favorite workflow.

const Flowly = require('flowly-js')
// or
import Flowly from 'flowly-js'

Of course you can also simply copy over the compiled file from the dist folder and include it like any other 3rd party script. Make sure to run npm install in the Flowly folder to compile the project. Or download the precompiled files from the release section.

<script src="dist/flowly.js"></script>
<!-- or if you prefer minified -->
<script src="dist/flowly.min.js"></script>

Usage

var flowly = new Flowly('#container', {
  padding: { top: 10, bottom: 10 },
  duration: 3000
});

// Add Text
flowly.addText({
  body: 'message',
  size: 50,
  duration: 1500,
  color: '#333333',
  shadow: '#000000'
})

// Add Image
flowly.addImage({
  url: './images/fish.png',
  width: size + 'px',
  height: (size * 100 / 205 ) + 'px',
  duration: duration
})

Behaviours

Options

var options = {
  text: {
    weight: 'bold',
    size  : 56,
    color : '#000',
    shadow: '#fff',
    className: 'flowly-text',
    whiteSpace: 'nowrap' || 'pre',
    zIndex: 2147483647,
    fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif'
  },
  image: {
    height: '200px',
    width : 'auto',
    className: 'flowly-image',
  },
  padding: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  disable: false,
  duration: 2000,
  easing: 'linear',
  direction: 'right',
}

var flowly = new Flowly('#container', options)

Add Text Options

var options = {
  body: 'text message',
  color: '#000000'
  shadow: '#ffffff',
  size: 50,
  weight: 'bold',
  fontFamily: 'monospace',
  className: 'classname',
};

flowly.addText(options)

Add Image Options

var options = {
  src: './images/hoge.png',
  width: '200px',
  height: '300px',
  className: 'classname',
};

flowly.addImage(options)

Build

As a prerequisite, you will need gulp installed: npm install -g gulp

npm install
npm run build

gulp will watch the source directory for changes and automatically build the dist files, serving some demo files with live reload.

Authors

@pokohide

License

Licensed under MIT. Enjoy.