AnimEng - Different Technique

by Ben Clayton

HTML

<div class="group-wrapper scene-a s0 full">
    <video id="hv-a0" class="vjs-tech" preload="auto" poster="http://flowcms-bc.infxsolutions.com/dyn/_pictures/test-folder/benc/test-video/video-cover.png">
        <source src="https://ia802302.us.archive.org/27/items/Pbtestfilemp4videotestmp4/video_test_512kb.mp4">
            <p class="vjs-no-js">To view this video please enable JavaScript</p>
    </video>
    <div class="vidtxt">A0</div>
    <script>
        $(document).ready(function() {
            var obj = new stateAnimateVideo();
            obj.initvideo(".scene-a.s0", "#hv-a0");
            console.log(obj);
        });
    </script>
</div>
<div class="group-wrapper scene-a s1 full">
    <video id="hv-a1" class="vjs-tech" preload="auto" poster="http://flowcms-bc.infxsolutions.com/dyn/_pictures/test-folder/benc/test-video/video-cover.png">
        <source src="https://ia802302.us.archive.org/27/items/Pbtestfilemp4videotestmp4/video_test_512kb.mp4" type="video/mp4">
            <p class="vjs-no-js">To view this video please enable JavaScript</p>
    </video>
    <div class="vidtxt">A1</div>
    <script>
        $(document).ready(function() {
            var obj = new stateAnimateVideo();
            obj.initvideo(".scene-a.s1", "#hv-a1");
        });
    </script>
</div>
<!-- <div class="group-wrapper scene-a s0 full">A0
    <script>
        $(document).ready(function() {
            (new stateAnimate()).init(".scene-a.s0")
        });
    </script>
</div>
<div class="group-wrapper scene-a s1 full">A1
    <script>
        $(document).ready(function() {
            (new stateAnimate()).init(".scene-a.s1")
        });
    </script>
</div>
<div class="group-wrapper scene-a s2 full">A2
    <script>
        $(document).ready(function() {
            (new stateAnimate()).init(".scene-a.s2")
        });
    </script>
</div>
<div class="group-wrapper scene-a s3 full">A3
    <script>
        $(document).ready(function() {
            (new...

CSS

.group-wrapper {
    border:1px solid red;
    position:fixed;
    display:none;
    padding-top:30px;
    font-size:40px;
    left:10px;
    right:10px;
    top:10px;
    bottom:10px;
}
.group-wrapper.full {
    display:none;
}
.group-wrapper.top {
    bottom:80%;
    display:none;
}
.group-wrapper.bottom {
    top:20%;
    bottom:10px;
    display:none;
}
.scene-b, .scene-c {
    text-align:center
}
.vjs-tech {
    position:absolute;
    top:10px;
    left:10px;
    width:93%;
}
.vidtxt {
    position:absolute;
    left:45%;
    z-index:10;
    color:red;
}

JavaScript

function stateAnimate(el) {
    var _self = this;
    _self.el = el; // selector for element
    _self.$nextEl = null; // stays null for single item to display, else jquery ref to next if carouselling
    _self.timeout = 3000; // carousell change delay, set to 0 to make it inactive
    _self.showCallback = null;
    _self.hideCallback = null;

    //console.log(_self.$el,_self.$nextel); list item and it's next if carousel
    _self.showing = false;
    _self.init = function (el) {
        _self.el = el || _self.el;
        _self.group = "." + (_self.el.split('.'))[1];
        if (!$(_self.el).hasClass('s')) { // if not a single item
            if ($(_self.el).next(_self.group).length) { // if next item found
                _self.$nextEl = $(_self.el + ":not(.s)").next(_self.group);
            } else { // else is the first before it
                _self.$nextEl = $(_self.el).siblings(_self.group + ":not(.s)").first();
            }
        }
        //listen for 'show' event on element
        $(_self.el).on("show", function () {
            _self.show();
        });
        //listen for 'hide' event on element
        $(_self.el).on("hide", function () {
            if (_self.tid) clearTimeout(_self.tid); // clear any pending next timers
            _self.hide();
        });
        console.log(_self.el, _self.$nextEl);
    }

    _self.show = function () {
        console.log("show triggered on ", $(_self.el).attr('class'));
        if (_self.showCallback) _self.showCallback();

        _self.showing = true;
        $(_self.el).stop().fadeIn().addClass('showing current');
        if (_self.$nextEl && _self.timeout) _self.tid = setTimeout(_self.next, _self.timeout);
    };

    _self.next = function () {
        console.log("next ", _self.nextel);
        if (_self.showing) { // only do next if this item is showing.
            $(_self.el).removeClass('current');
            _self.$nextEl.trigger("show");
            _self.hide();
        }
    }

   ...