Create Flexible & Responsive Curving Text - CircleType.js

Create Flexible & Responsive Curving Text - CircleType.js
File Size: 329 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

CircleType.js is a smart and lightweight jQuery plugin JavaScript library that allows you to arrange each letter of your text along a curved path based on Lettering.js.

Feathers:

  • Auto Radius
  • Custom arc and radius
  • Flexible & Responsive radius based on window size
  • Works well with FitText.js plugin.
  • Supports of any font used in your html document
  • No jQuery required.

Basic Usage:

1. Install and import the CircleType.js library into the document.

# Yarn
$ yarn add circletype

# NPM
$ npm install circletype --save
import CircleType from 'circletype';

2. Or directly include the circletype.min.js from the dist folder.

<script src="dist/circletype.min.js"></script>

3. Initialize the library on the target text.

<div id="demo">
  YOUR TEXT
</div>
const myText = CircleType(document.getElementById('demo'))

4. Set the text radius in pixels.

myText.radius(300);

5. Reverse the direction.

myText.dir(-1);

6. Recalculate the height of the element.

myText.refresh();

7. Destroy the library.

myText.destroy();

Changelog:

2018-12-30

2018-05-27

  • Support a custom splitter function

2017-07-25

  • remove silly whitespace

2016-01-13

  • updated the event handling

2014-07-11

  • Fixed letters overlapping if line-height is undefined

2014-07-06

  • adding star button

 


This awesome jQuery plugin is developed by peterhry. For more Advanced Usages, please check the demo page or visit the official website.