Popcorn Fade In

by TheFiddler

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnote" class="note-hide"></div>

CSS

.note-hide {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 
}
.note-fadein {
    opacity: 1;
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
    -o-transition: opacity 2s;
    -ms-transition: opacity 2s;
    transition: opacity 2s;
}

JavaScript

// create popcorn instance
var popcorn = Popcorn( "#video" ),
    flag = true;

// add some footnote events!
popcorn.footnote({
    start: 1,
    end: 6,
    text: "<div>TOGGLING EVENTS</div>",
    target: "footnote",
    effect: "applyclass",
    applyclass: "note-fadein"
});

// play popcorn
popcorn.volume( 0 );
popcorn.play();