Popcorn.js Documentation

Effects

Effects define functions that are executed before the start and end of a track event. For example, a developer can create visual cues that signify when an event is starting or ending, notifying users that something is changing within the page. Effects are not limited to visual cues.

ApplyClass

Purpose

Apply a class by CSS Selector. Selector is relative to plugin target’s id

Options

  • class - Specifies the class to apply to the plugin container, can be seperated by spaces for more then one class

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    var popcorn = Popcorn( "#video" );

    popcorn.footnote({
      start: 2,
      end: 6,
      text: "TOGGLING EVENTS",
      target: "footnote",
      effect: "applyclass",
      applyclass: "test1, test2"
    })
    .footnote({
      start: 20, // seconds
      end: 45, // seconds
      target: "footnotediv",
      text: "Visit webmademovies.org for more details",
      effect: "applyclass",
      applyclass: "applyoverlay: .overlay, hover: parent"
    });

    popcorn.play();

Live demo of applyclass effect