The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Interactive Whiteboard

The original Whiteboard demo is named “interactive-whiteboard.html”and located inside the “examples/Premium” folder included with the plugin’s original download source.

QUICK TIP

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Whiteboard, first add the “revolutions-addons” folder into your production site:

Next, add the Whiteboard script, placed below all other scripts on the page.

<!– WHITE BOARD ADD ON –>
<script type=”text/javascript” src=”revolution-addons/whiteboard/js/revolution.addon.whiteboard.min.js”></script>

Next, add the Whiteboard default settings to your slider’s main settings script.

slider.rsWhiteBoard();

The last line of the example script below officially initializes the Whiteboard Add-On.

The Whiteboard Add-On allows for custom settings for two possible modes: “movehand” and “writehand”, each represented by a png image, located inside the “revolution-addons/whiteboard/assets/images” folder.

These png images can be changed to whatever you like.  Just make sure to adjust the “width” and “height” values in the script below if the images are changed.

src
    The hand graphic’s url
    width
      The hand graphic’s width in pixels
      height
      • right
      • left
      Use “right” for normal view. And “left” to flip the graphic horizontally
      transformX
        A margin-left for the graphic
        transformY
          A margin-top for the graphic
          jittering -> distance
            The vertical movement strength of the graphic as it writes/draws, 0-100 (%)
            jittering -> distance_horizontal
              The horizontal movement strength of the graphic as it writes/draws,
              0-100 (%)
              jittering -> repeat
                The timing fluctuation between write/draw jitter movements (in milliseconds)
                jittering -> offset
                  Additional pixels on top of the “distance” percentage above
                  jittering -> offset_horizontal
                    Additional pixels on top of the “distance_horizontal” percentage above
                    rotation -> angle
                      Rotates the hand graphic at an angle as it writes to better mimic realistic writing/drawing motion
                      rotation -> repeat
                        The timing fluctuation between write/draw rotation movements (in milliseconds)

                        var slider = jQuery(‘#rev_slider_1’).show().revolution({
                         
                            /* **************************** */
                            /* REGULAR SLIDER SETTINGS HERE */
                            /* **************************** */
                         
                            /* WHITEBOARD DEFAULT SETTINGS */
                            whiteboard: {
                                movehand: {
                                    src: ‘revolution-addons/assets/images/hand_point_right.png’,
                                    width: 400,
                                    height: 1000,
                                    handtype: ‘right’,
                                    transform: {
                                        transformX: 50,
                                        transformY: 50
                                    },
                                    jittering: {
                                        distance: ’80’,
                                        distance_horizontal: ‘100’,
                                        repeat: ‘5’,
                                        offset: ’10’,
                                        offset_horizontal: ‘0’
                                    },
                                    rotation: {
                                        angle: ’10’,
                                        repeat: ‘3’
                                    }
                                },
                                writehand: {
                                    src: ‘revolution-addons/assets/images/write_right_angle.png’,
                                    width: 572,
                                    height: 691,
                                    handtype: ‘right’,
                                    transform: {
                                        transformX: 50,
                                        transformY: 50
                                    },
                                    jittering: {
                                        distance: ’80’,
                                        distance_horizontal: ‘100’,
                                        repeat: ‘5’,
                                        offset: ’10’,
                                        offset_horizontal: ‘0’
                                    },
                                    rotation:{
                                        angle: ’10’,
                                        repeat: ‘3’
                                    }
                                }
                            },
                        });
                         
                        // Instantiate the Whiteboard AddOn
                        slider.rsWhiteBoard();

                        Finally, add one of the Whiteboard presets below for your Layer’s “data-frames” and “data-whiteboard” attributes.

                        <!– BASIC WHITEBOARD HAND-WRITE EXAMPLE –>
                        <div class=”tp-caption tp-resizeme Sports-DisplayFat”
                         
                             data-x=”100″
                             data-y=”100″
                             data-frames='[{“delay”: 0, “split”: “chars”, “splitdelay”: 0.1, “speed”: 300, “frame”: “0”,
                                            “from”: “opacity:0”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                           {“delay”: “wait”, “speed”: 300, “frame”: “999”,
                                            “to”: “opacity: 0”, “ease”: “Power3.easeInOut”}]’
                         
                             data-whiteboard='{“hand_function”: “write”, “jitter_offset_horizontal”: “0”}’ 
                         
                        >Caption Text</div>

                        Whiteboard Presets

                        Write Quick

                        data-frames='[{“delay”:0, “split”: “chars”, “splitdelay”: 0.05, “speed”: 100, “frame”: “0”,
                                       “from”: “opacity: 0;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “write”, “jitter_distance”: “100”, “jitter_repeat”: “15”, “jitter_offset”: “0”,
                                          “jitter_offset_horizontal”: “0”, “hand_angle”: “15”, “hand_angle_repeat”: “10”}’

                        Write Normal

                        data-frames='[{“delay”: 0, “split”: “chars”, “splitdelay”: 0.1, “speed”: 300, “frame”: “0”,
                                       “from”: “opacity: 0;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “write”, “jitter_distance”: “100”, “jitter_repeat”: “12”,
                                          “jitter_offset”: “0”, “jitter_offset_horizontal”: “0”, “hand_angle_repeat”: “10”}’

                        Write Slow

                        data-frames='[{“delay”: 0, “split”: “chars”, “splitdelay”: 0.2, “speed”: 500, “frame”: “0”,
                                       “from”: “opacity: 0;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “write”, “jitter_distance”: “100”, “jitter_repeat”: “10”, “jitter_offset”: “0”,
                                          “jitter_offset_horizontal”: “0”, “hand_angle”: “20”, “hand_angle_repeat”: “5”}’

                        Draw from Left

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “x: [100%];”, “mask”: “x: [-100%]; y:0; s: inherit; e: inherit;”,
                                       “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”,
                                       “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “draw”, “jitter_repeat”: “15”, “jitter_distance”: “100”,
                                          “jitter_offset”: “0”, “hand_angle”: “15”, “hand_angle_repeat”: “10”}’

                        Draw from Right

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “x: [-100%];”, “mask”: “x: [100%]; y:0; s: inherit; e: inherit;”,
                                       “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”,
                                       “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “draw”, “jitter_repeat”: “15”,
                                          “jitter_distance”: “100”, “jitter_offset”: “0”,
                                          “hand_angle”: “15”, “hand_angle_repeat”: “10”, “hand_direction”: “right_to_left”}’

                        Draw from Top

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “y: [100%];”, “mask”: “x: 0; y: [-100%]; s: inherit; e: inherit;”,
                                       “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”,
                                       “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “draw”, “jitter_repeat”: “15”,
                                          “jitter_distance”: “100”, “jitter_offset”: “0”,
                                          “hand_angle”: “15”, “hand_angle_repeat”: “10”, “hand_direction”: “top_to_bottom”}’

                        Draw from Bottom

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “y: [-100%];”, “mask”: “x: 0; y: [100%]; s: inherit; e: inherit;”,
                                       “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”,
                                       “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “draw”, “jitter_repeat”: “15”,
                                          “jitter_distance”: “100”, “jitter_offset”: “0”,
                                          “hand_angle”: “15”, “hand_angle_repeat”: “10”, “hand_direction”: “bottom_to_top”}’

                        Move from Right

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “x: right;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “move”, “hand_full_rotation”: “284”,
                                          “hand_x_offset”: “0”, “hand_y_offset”: “0”}

                        Move from Left

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “x: left;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “move”, “hand_full_rotation”: “59”,
                                          “hand_x_offset”: “0”, “hand_y_offset”: “0”}’

                        Move from Top

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “y: top;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “move”, “hand_full_rotation”: “176”,
                                          “hand_x_offset”: “0”, “hand_y_offset”: “0”}’

                        Move from Bottom

                        data-frames='[{“delay”: 0, “speed”: 500, “frame”: “0”,
                                       “from”: “y: bottom;”, “to”: “o:1;”, “ease”: “Power3.easeInOut”},
                                      {“delay”: “wait”, “speed”: 300, “frame”: “999”, “to”: “opacity: 0;”, “ease”: “Power3.easeInOut”}]’
                         
                        data-whiteboard='{“hand_function”: “move”, “hand_full_rotation”: “0”,
                                          “hand_x_offset”: “0”, “hand_y_offset”: “0”}’

                        Popular Solutions