🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

textflow is a simple yet fully configurable jQuery plugin used to create a text flow view that animates an array of text on an HTML5 canvas element.

text-animation

Documentation

jquery-textflow

A jQuery plugin showing animated texts. Available as [pure jquery plugin] (#jquery) or as [django app] (#django).

Table of contents

  • [1. jQuery Only] (#jquery)
    • [1.1 Example using] (#jquery-example)
  • [2. Django App] (#django)
    • [2.1 Example using] (#django-example)
    • [2.1 Django multilingual support] (#multilingual)
  • [3. Settings] (#settings)
  • [4. Methods] (#methods)
  • [5. Dependencies] (#dependencies)
    • [5.1 Multilingual support (Django only)] (#dependenvćies-multilingual)
  • [6. License] (#license)

1. jQuery Only

1.1 Example using

Add a link to the css file in your <head>:

<head>   ...   <link rel="stylesheet" type="text/css" href="path/to/textflow.min.css"/>   ... </head>

Then, before the closing <body> tag add:

<head>   ...   <link rel="stylesheet" type="text/css" href="path/to/textflow.min.css"/>   ... </head> <body>   ...   <script type="text/javascript" src="path/to/jquery.textflow.min.js"></script> </body>

Now add the <div> tag within the <body> tag where you want to show the texts:

NOTE: The data-texts attribute is optional. You can pass there your texts as a simple comma separated string but it is also possible to pass an array of texts through the settings in your javascript code as shown soon. If you use the data-texts attribute, the texts in the settings were ignored!

<head>   ...   <link rel="stylesheet" type="text/css" href="path/to/textflow.min.css"/>   ... </head> <body>   ...   <div id="textflow" data-texts="your,texts,here"></div>   ...   <script type="text/javascript" src="path/to/jquery.textflow.min.js"></script> </body>

In your javascript file then add the initializing code

$(document).ready(function() {   $(element).textFlow({     texts: ['Your', 'Text', 'Here']   }); });

The plugin is now ready and you should see your texts.


2. Django App

2.1 Example using

Install textflow using pip.

pip install django-textflow

Then open the settings.py file, find the INSTALLED_APPS section and enable the app.

INSTALLED_APPS = (     ...     'textflow' )

Now we have to create the database model. Open a terminal and change to the root directory of your project and create the models

cd path/to/project-root python manage.py migrate

If the models where successfully created, you should see a new entry Textflow on the admin page where you can add FlowObjects. Create a few entries just to proof if the app works correctly later.

If the texts are created we need to pass them to the template. So open your views.py file and go to the view where you want your texts to appear.

Import the FlowObject model and pass the texts to the view by simply call the serialize method.

from django.shortcuts import render from textflow.models import FlowObject ... def your_view(request):   ...   return render(request, 'template.html', {     'texts': FlowObject.serialize(),     ...   })

Then open your template.html file. At the top of the file add the two template tags for static files and the textflow tag.

{% load staticfiles %} {% load textflow %}

Add a link to the css file in your <head>:

<head>   ...   <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/textflow.min.css' %}"/>   ... </head>

Then, before the closing <body> tag add:

<head>   ...   <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/textflow.min.css' %}"/>   ... </head> <body>   ...   <script type="text/javascript" src="{% static 'javascripts/jquery.textflow.min.js' %}"></script> </body>

Now call the textflow tag within the <body> tag where you want to show the texts:

<head>   ...   <link rel="stylesheet" type="text/css" href="{% static 'stylesheets/textflow.min.css' %}"/>   ... </head> <body>   ...   {% textflow texts %}   ...   <script type="text/javascript" src="{% static 'javascripts/jquery.textflow.min.js' %}"></script> </body>

In your javascript file then add the initializing code

NOTE: The texts are passed to the data-texts attribute directly by the template tag. Any texts defined in settings were ignored.

$(document).ready(function() {   $(element).textFlow(); });

You are done and you should see your texts now.


2.2 Multilingual support

You can add multilingual texts by installing the [django-modeltranslation] (https://github.com/deschler/django-modeltranslation) app. This can be done even if you have already created texts.

Install django-modeltranslation:

pip install django-modeltranslation

Enable the app in settings.py:

INSTALLED_APPS = (     ...     'modeltranslation',     'textflow', )

Update your models:

cd path/to/project-root python manage.py migrate

Each FlowObject now should have a text field for each language. If you go to the admin page and open a FlowObject or if you create a new one, you can see that there is no text field anymore. They are all replaced by fields like text_de_de or text_en_gb, depending on the languages you have enabled.

Please refer to the official Django documentation for more information about [translation] (https://docs.djangoproject.com/el/1.10/topics/i18n/translation/#).


3. Settings

Option Type Default Description
width string/int: Any valid css unit 100% Sets the width in relation of the parent node
height string/int: Any valid css unit 200px Sets the height
top string/int: Any valid css unit 0 Sets the top position within the parent node
left string/int: Any valid css unit 0 Sets the left position within the parent node
maxTexts int 15 Sets the maximum amount of texts that are simultaneously shown
marginTop int 25 The space in pixel between the top border and the text
marginBottom int 0 The space in pixel between the bottom border and the text
texts array ['Add', ... 'here'] The texts that are shown, ignored when using data-texts attribute
color string: Any valid css unit #000 The text color
background string: Any valid css unit transparent The background color of the canvas (This is actually not needed because the background of the textflow div can be set in css. However it might happen that this could be useful for some reason so it is there... :)
font string sans-serif The font family of the texts

4. Methods

Methods are called on textflow instances:

// Get the instance var textflow = $('.your-element').textFlow({options...});  // Stop textflow textflow.stopTextFlow();  // Start textflow textflow.startTextFlow();
Method Argument Description
startTextFlow options : None Start textflow if not active
stopTextFlow options : None Stop textflow if active

5. Dependencies

jQuery 1.3

For Django also

Django 1.8

5.1 Multilingual support (Django only)

django-modeltranslation

Refer to the official [documentation] (http://django-modeltranslation.readthedocs.io/en/latest/installation.html) which version is required for your Django and Python combination


6. License

Copyright (c) 2014 Michael Jünger

Licensed under the MIT license.


You May Also Like