Skip to main content

A simple Django app to animate texts.

Project description


Textflow is a simple Django app to animate texts. Texts slide randomly from the right to the left or reverse after the
page is loaded.

1. Open the file, find the INSTALLED_APPS section and enable the app.


2. Now create the database model.

python migrate

3. Start the development server and visit
to create a few FlowObjects (you'll need the Admin app enabled).

4. pen your file and import the FlowObject model.

from textflow.models import FlowObject

5. Go to the view and pass the texts to the view by simply call the serialize method.

def your_view(request):
return render(request, 'template.html', {
'texts': FlowObject.serialize(),

6. Then open your template.html file and add the the following two lines at the top.

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

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

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

8. Then, before the closing <body> tag add:

<script type="text/javascript" src="{% static 'javascripts/jquery.textflow.min.js' %}"></script>

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

{% textflow texts %}

10. In your javascript file then add the initializing code

$(document).ready(function() {

11. Start your server and visit and you should see the texts

12. You can add multilingual texts by installing the django-modeltranslation app.
Please refer to the official Django documentation for more information about translation.

Also refer to the official documentation of django-modeltranslation

pip install django-modeltranslation

13. Enable the app in


14. Update your models:

python migrate

15. 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

16. Methods

Methods are called on textflow instances:

16.1 Get the instance

var textflow = $('.your-element').textFlow({options...});

16.2 Stop textflow


16.3 Start textflow


Method | Argument | Description
------ | -------- | -----------
startTextFlow | options : None | Start textflow if not active
stopTextFlow | options : None | Stop textflow if active

17. Dependencies

jQuery 1.3
Django 1.8

**For multilingual support (Django only)**

18. License

Copyright (c) 2014 Michael Jünger

Licensed under the MIT license.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-textflow-0.1.3.tar.gz (9.9 kB view hashes)

Uploaded source

Built Distributions

django_textflow-0.1.3-py3-none-any.whl (11.4 kB view hashes)

Uploaded py3

django_textflow-0.1.3-py2-none-any.whl (11.4 kB view hashes)

Uploaded py2

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page