Hi everyone, here you can see a demo page of my new plugin. The idea is to create the background of the page using some words and Google's web fonts.

Contents:

How to use

Add reference to jQuery library to your page (I'm using this one).
Add reference to wwback.css to <head> section (<link rel="Stylesheet" type="text/css" href="wwback.css" />).
Add reference to wwback.min.js (<script type="text/javascript" src="wwback.min.js"></script>).
Init plugin code, something like: $(document).ready(function() { $.WWBack.DrawBack(); });

Settings description

Setting name	Description	Example
Text	Semicolon separated text that will we the basic for background creation.	Lorem ipsum dolor sit amet;consectetur adipiscing elit;Nulla eget est dolor;eu tristique purus;Donec rhoncus leo eget
Color	Text color	"#F8CC70", "red", "blue", "rgb(100,200,59)"
BackColor	Background color	"#F6E19B", "red", "blue", "rgb(100,200,59)"
BackElementID	To avoid any problem with existing IDs on the page you can update default element id.	"myNewIDHere"
NumberOfVariations	wwback.css has some classes with fonts and other settings described there. If you with to add/remove classes you need to set this variable to new count (ofcourse if you wish to see them).	1,2,3...
ClassNamePrefix	if you don't want to use wwback.css or you have your classes specified already, you can tell the plugin what will be your class name prefix. Just see wwback.css for more details of structure.	"mySuperClassNameHere"
FontSizeRange	An array of font-sizes you want to fill your page with. One note, small sizes work longer.	[20,30,50]
UseProgresiveText	If it is set to false, then random text will be displayed (coool one :)) on the page, otherwise the text will grow depending on next setting direction :)	true/false
ProgresiveTextDirection	Direction can be up or down.	up/down

Updating styles and default settings

Styles

Stylesheet consists of two parts:

Google font styles import

You can see Google web fonts to get more fonts. Every font has "quick use" button.
On this page in third section (Add this code to your website) click on "@import" tab to get link for css.
Next step is to get "font-family" name from next section (Integrate the fonts into your CSS).
Fonts descriptions

".wwBackStyle" is a main class which is applied to all text elements of background.

All other classes are indicating different font families. Names of this classes are created using main class as prefix and number (from 1 to 5).

NOTE: Don't forget to update NumberOfVariations setting when you add/remove font-families.

Check out wwback.css for more details.

Default settings

To update default settings open "wwback.min.js" and update required settings in _defaults.

Download

Download page

See demo.html for more details.

Back to top

Like this article?

20 October 2011

Stylish page background using google fonts.