Popcorn.js Documentation


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.



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


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


 1 var popcorn = Popcorn( "#video" );
 3     popcorn.footnote({
 4       start: 2,
 5       end: 6,
 6       text: "TOGGLING EVENTS",
 7       target: "footnote",
 8       effect: "applyclass",
 9       applyclass: "test1, test2"
10     })
11     .footnote({
12       start: 20, // seconds
13       end: 45, // seconds
14       target: "footnotediv",
15       text: "Visit webmademovies.org for more details",
16       effect: "applyclass",
17       applyclass: "applyoverlay: .overlay, hover: parent"
18     });
20     popcorn.play();

Live demo of applyclass effect