Add to the page the following files:
- spantext.js – the main script that makes the sliders and animates text.
- spantext-nouislider.js – a modified noUiSlider that makes the sliders interface pretty (required).
- spantext.css – required CSS
or to install as a plugin in WordPress:
- Upload all the files to the `/wp-content/plugins/spantext` directory, or install the plugin through the WordPress plugins screen.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
Add a slider to the page with the following HTML:
<div class="spantextslider" type="input"id="MySpanText" data-spantextmin="1" data-spantextmax="5.5" data-spantextattrR="longer" data-spantextattrL="shorter" data-spantextspeed="20" data-spantextinit="1" ></div>
Other than class which must be “spantextslider” and type which must be “input”, values are examples only.
- id: (required) : This is the unique identifier of the slider itself. The ID is arbitrary but must be unique within the HTML document. Use something unlikely to be used for another element, such as very specific description of the content of the slider.
- data-spantextmin (optional) : The lowermost value of the slider. Default is 1.
- data-spantextmax: (optional) : This is the maximum upper value of the slider, or in other words, its number of gradations. Default is 10.
- data-spantextspeed: (optional): A number from 1 to 100 indicating how quickly this slider should reveal and conceal its text. 1 is slowest, 100 is nearly instantaneous. Default is 1.
- data-initialsetting: (optional): A number indicating where the slider should be set when the page initially loads (must be equal to or less than “max”). Default is 1.
- data-rightwardattribute: (optional, but you need at least a leftward or a rightward attribute for the slider to do anything) : This is name of the span class that will reveal as the slider moves right, and be hidden as the slider moves left. You can choose any names you like.
- data-leftwardattribute: (optional, but you need at least a leftward or a rightward attribute for the slider to do anything) : This is name of the span class that will reveal as the slider moves left and be hidden as the slider moves right. You can choose any names you like.
In WordPress, the following shortcode will accomplish the same, with attribute names corresponding to the similar ones above:
[spantext-slider id=" " min=" " max=" " speed=" " initialsetting=" " rightwardattribute= " " leftwardattribute=" " ]
To create text that interacts intricately with SpanText sliders requires some skill with HTML, specifically understanding of:
- Span tags: Span tags group inline-elements – elements that appear without a line break, such as continuous text on a line. Learn more at w3schools.com.
Use any plain text or HTML editor, such as those included with operating systems (TextEdit on Mac or Notepad on Windows operating systems) or any of several other free or commercially available text editors: Atom, TextMate, Sublime Text, Notepad++, etc. If applying SpanText to an existing document, copy the existing document into the editor.
To make a segment of text controllable with a SpanText slider, enclose it in a span tag as follows:
<span class="[attribute][gradation]">Text content goes here.</span>
[attribute] is one of the attributes you have defined using leftwardattribute or rightwardattribute in a slider shortcode.
[gradation] is a number equal to or less than the max value you defined in the slider shortcode.
Note that quotation marks must surround the class name, the brackets should not be included (these are for clarity in documentation), and there are no spaces or hyphens.
The segment of text you want enclosed should being immediately following the final ‘>’ symbol. Be sure to use a closing span tag at the end of the text segment.
<span class="longer3">This text will appear when the slider with attribute "longer" gets to gradation 3.</span>
Complex texts with many versions and/or nesting of content are time-consuming and require careful HTML coding. Good text editors such as those listed above provide syntax highlighting which makes it a little easier. Look at the examples on this site and try out the code fiddles to see how it’s done.
If the text is concealing or revealing incorrectly, it is most likely a misplaced or omitted closing span tag.