mojs 炫酷动画开场demo示例代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：mojs 炫酷动画开场demo示例代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body, html {
  padding: 0;
  margin:  0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: rgba(241, 226, 215, 0.2);
  background: #29363b;
  position: relative;
}

.logo {
  position:     absolute;
  left:         50%;
  top:          50%;
  height:       25px;
  width:        120px;
  z-index:      2;
  margin-left: -60px;
  margin-top:  -32px;
  transform-origin: 50% 0;;
}


.background {
  width:    100%;
  height:   100%;
  position: absolute;
  left:     0;
  top:      0;
  opacity:  0;
}

.black-background { z-index: 1; }
.green-background { z-index: 2; }
.pink-background  { z-index: 3; }
.pink-background__logo {
  position:     absolute;
  left:         50%;
  top:          50%;
  height:       25px;
  width:        120px;
  z-index:      2;
  margin-left: -60px;
  margin-top:  -32px;
  /*outline: 1px solid cyan;*/
}
</style>



</head>

<body  >
  <div id="js-black-bg" class="background black-background"></div>
    <div id="js-green-bg" class="background green-background"></div>
    <div id="js-pink-bg"  class="background pink-background">
      <div id="js-logo" class="pink-background__logo"></div>
    </div>


<!-- ABOUT LINK -->
<style> .what:hover { cursor: pointer; opacity: .75; } .what {display: block;width: 28px;height: 28px;position: fixed;right: 20px;bottom: 70px;background-size: 100% 100%;
z-index: 10;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHBhdGggZD0iTTExLjUsMjIgQzE3LjI5ODk4OTksMjIgMjIsMTcuMjk4OTg5OSAyMiwxMS41IEMyMiw1LjcwMTAxMDEzIDE3LjI5ODk4OTksMSAxMS41LDEgQzUuNzAxMDEwMTMsMSAxLDUuNzAxMDEwMTMgMSwxMS41IEMxLDE3LjI5ODk4OTkgNS43MDEwMTAxMywyMiAxMS41LDIyIFoiIGlkPSJPdmFsIiBzdHJva2U9IiMzQTA1M0EiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0xMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgTDEwLjc4NTE1NjIsMTMuNDYyODkwNiBDMTAuNzgxMjUsMTMuMjQ4MDQ1OCAxMC43NzkyOTY5LDEzLjExNzE4NzcgMTAuNzc5Mjk2OSwxMy4wNzAzMTI1IEMxMC43NzkyOTY5LDEyLjU4NTkzNTEgMTAuODU5Mzc0MiwxMi4xODc1MDE2IDExLjAxOTUzMTIsMTEuODc1IEMxMS4xNzk2ODgzLDExLjU2MjQ5ODQgMTEuNDk5OTk3NiwxMS4yMTA5Mzk1IDExLjk4MDQ2ODgsMTAuODIwMzEyNSBDMTIuNDYwOTM5OSwxMC40Mjk2ODU1IDEyLjc0ODA0NjQsMTAuMTczODI4NyAxMi44NDE3OTY5LDEwLjA1MjczNDQgQzEyLjk4NjMyODgsOS44NjEzMjcxNyAxMy4wNTg1OTM4LDkuNjUwMzkxNzggMTMuMDU4NTkzOCw5LjQxOTkyMTg4IEMxMy4wNTg1OTM4LDkuMDk5NjA3NzcgMTIuOTMwNjY1Myw4LjgyNTE5NjQ2IDEyLjY3NDgwNDcsOC41OTY2Nzk2OSBDMTIuNDE4OTQ0LDguMzY4MTYyOTIgMTIuMDc0MjIwOSw4LjI1MzkwNjI1IDExLjY0MDYyNSw4LjI1MzkwNjI1IEMxMS4yMjI2NTQyLDguMjUzOTA2MjUgMTAuODczMDQ4Myw4LjM3MzA0NTY4IDEwLjU5MTc5NjksOC42MTEzMjgxMiBDMTAuMzEwNTQ1NSw4Ljg0OTYxMDU3IDEwLjExNzE4OCw5LjIxMjg4ODE4IDEwLjAxMTcxODgsOS43MDExNzE4OCBMOC41LDkuNTEzNjcxODggQzguNTQyOTY4OTYsOC44MTQ0NDk2MyA4Ljg0MDgxNzU1LDguMjIwNzA1NTcgOS4zOTM1NTQ2OSw3LjczMjQyMTg4IEM5Ljk0NjI5MTgzLDcuMjQ0MTM4MTggMTAuNjcxODcwNSw3IDExLjU3MDMxMjUsNyBDMTIuNTE1NjI5Nyw3IDEzLjI2NzU3NTMsNy4yNDcwNjc4NCAxMy44MjYxNzE5LDcuNzQxMjEwOTQgQzE0LjM4NDc2ODQsOC4yMzUzNTQwMyAxNC42NjQwNjI1LDguODEwNTQzNTkgMTQuNjY0MDYyNSw5LjQ2Njc5Njg4IEMxNC42NjQwNjI1LDkuODMwMDc5OTQgMTQuNTYxNTI0NSwxMC4xNzM4MjY1IDE0LjM1NjQ0NTMsMTAuNDk4MDQ2OSBDMTQuMTUxMzY2MiwxMC44MjIyNjcyIDEzLjcxMjg5NCwxMS4yNjM2NjkxIDEzLjA0MTAxNTYsMTEuODIyMjY1NiBDMTIuNjkzMzU3NiwxMi4xMTEzMjk2IDEyLjQ3NzUzOTUsMTIuMzQzNzQ5MSAxMi4zOTM1NTQ3LDEyLjUxOTUzMTIgQzEyLjMwOTU2OTksMTIuNjk1MzEzNCAxMi4yNzE0ODQzLDEzLjAwOTc2MzQgMTIuMjc5Mjk2OSwxMy40NjI4OTA2IEwxMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgWiBNMTAuNzg1MTU2MiwxNS42Nzc3MzQ0IEwxMC43ODUxNTYyLDE0LjAzMTI1IEwxMi40MzE2NDA2LDE0LjAzMTI1IEwxMi40MzE2NDA2LDE1LjY3NzczNDQgTDEwLjc4NTE1NjIsMTUuNjc3NzM0NCBaIiBpZD0iPyIgZmlsbD0iIzNBMDUzQSI+PC9wYXRoPiAgICA8L2c+PC9zdmc+);}</style>
<!-- ABOUT LINK -->


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.0.265.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mojs-player.0.43.15.js"></script>
      <script  type="module">
// readable source code is here: https://github.com/legomushroom/shape-demo1

/******/ (function(modules) { // webpackBootstrap
/******/        // The module cache
/******/        var installedModules = {};

/******/        // The require function
/******/        function __webpack_require__(moduleId) {

/******/                // Check if module is in cache
/******/                if(installedModules[moduleId])
/******/                        return installedModules[moduleId].exports;

/******/                // Create a new module (and put it into the cache)
/******/                var module = installedModules[moduleId] = {
/******/                        exports: {},
/******/                        id: moduleId,
/******/                        loaded: false
/******/                };

/******/                // Execute the module function
/******/                modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/                // Flag the module as loaded
/******/                module.loaded = true;

/******/                // Return the exports of the module
/******/                return module.exports;
/******/        }


/******/        // expose the modules object (__webpack_modules__)
/******/        __webpack_require__.m = modules;

/******/        // expose the module cache
/******/        __webpack_require__.c = installedModules;

/******/        // __webpack_public_path__
/******/        __webpack_require__.p = "build/";

/******/        // Load entry module and return exports
/******/        return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

        module.exports = __webpack_require__(1);


/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

        'use strict';

        exports.__esModule = true;

        var _classCallCheck2 = __webpack_require__(2);

        var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

        var _possibleConstructorReturn2 = __webpack_require__(3);

        var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

        var _inherits2 = __webpack_require__(68);

        var _inherits3 = _interopRequireDefault(_inherits2);

        var _classlistPolyfill = __webpack_require__(76);

        var _classlistPolyfill2 = _interopRequireDefault(_classlistPolyfill);

        var _module = __webpack_require__(78);

        var _module2 = _interopRequireDefault(_module);

        var _triangleLines = __webpack_require__(79);

        var _triangleLines2 = _interopRequireDefault(_triangleLines);

        var _triangles = __webpack_require__(81);

        var _triangles2 = _interopRequireDefault(_triangles);

        var _greenScene = __webpack_require__(88);

        var _greenScene2 = _interopRequireDefault(_greenScene);

        var _circle = __webpack_require__(89);

        var _circle2 = _interopRequireDefault(_circle);

        var _logo = __webpack_require__(90);

        var _logo2 = _interopRequireDefault(_logo);

        function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

        // require('css/blocks/mojs-player.postcss.css');
        // let CLASSES = require('css/blocks/mojs-player.postcss.css.json');

        // import MojsPlayer     from 'mojs-player'

        var Demo = function (_Module) {
          (0, _inherits3.default)(Demo, _Module);

          function Demo() {
            (0, _classCallCheck3.default)(this, Demo);
            return (0, _possibleConstructorReturn3.default)(this, _Module.apply(this, arguments));
          }

          /*
            Method for initial module's render.
            @private
          */

          Demo.prototype._render = function _render() {
            var mainTimeline = new mojs.Timeline({
              speed: 1.72,
              precision: 0.01
            }).add(new _triangles2.default()).add(new _greenScene2.default({ delay: 2700 })).add(new _circle2.default({ delay: 4000 })).add(new _logo2.default({ delay: 5900 }));
            // .play();

            mojs.pool = mojs.pool || {};
            mojs.pool.shapeDemo1 = mainTimeline;
            // ( new MojsPlayer({ add: mainTimeline }) )
            // .el.style[ 'z-index' ] = 10;
          };

          return Demo;
        }(_module2.default);

        new Demo();

        // if ( (typeof define === "function") && define.amd ) {
        //   define(function () { return MojsPlayer; });
        // }
        // if ( (typeof module === "object") && (typeof module.exports === "object") ) {
        //   module.exports = MojsPlayer;
        // }

        // let _global = ( typeof global !== 'undefined' ) ? global : window;
        // _global.MojsPlayer = MojsPlayer;

        exports.default = Demo;

/***/ },
/* 2 */
/***/ function(module, exports) {

        "use strict";

        exports.__esModule = true;

        exports.default = function (instance, Constructor) {
          if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
          }
        };

/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {

        "use strict";

        exports.__esModule = true;

        var _typeof2 = __webpack_require__(4);

        var _typeof3 = _interopRequireDefault(_typeof2);

        function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

        exports.default = function (self, call) {
          if (!self) {
            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
          }

          return call && ((typeof call === "undefined" ? "undefined" : (0, _typeof3.default)(call)) === "object" || typeof call === "function") ? call : self;
        };

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

        "use strict";

        exports.__esModule = true;

        var _iterator = __webpack_require__(5);

        var _iterator2 = _interopRequireDefault(_iterator);

        var _symbol = __webpack_require__(55);

        var _symbol2 = _interopRequireDefault(_symbol);

        var _typeof = typeof _symbol2.default === "function" && typeof _iterator2.default === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default ? "symbol" : typeof obj; };

        function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

        exports.default = typeof _symbol2.default === "function" && _typeof(_iterator2.default) === "symbol" ? function (obj) {
          return typeof obj === "undefined" ? "undefined" : _typeof(obj);
        } : function (obj) {
          return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof(obj);
        };

/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {

        module.exports = { "default": __webpack_require__(6), __esModule: true };

/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {

        __webpack_require__(7);
        __webpack_require__(51);
        module.exports = __webpack_require__(48)('iterator');

/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {

        'use strict';
        var $at  = __webpack_require__(8)(true);

        // 21.1.3.27 String.prototype[@@iterator]()
        __webpack_require__(11)(String, 'String', function(iterated){
          this._t = String(iterated); // target
          this._i = 0;                // next index
        // 21.1.5.2.1 %StringIteratorPrototype%.next()
        }, function(){
          var O     = this._t
            , index = this._i
            , point;
          if(index >= O.length)return {value: undefined, done: true};
          point = $at(O, index);
          this._i += point.length;
          return {value: point, done: false};
        });

/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {

        var toInteger = __webpack_require__(9)
          , defined   = __webpack_require__(10);
        // true  -> String#at
        // false -> String#codePointAt
        module.exports = function(TO_STRING){
          return function(that, pos){
            var s = String(defined(that))
              , i = toInteger(pos)
              , l = s.length
              , a, b;
            if(i < 0 || i >= l)return TO_STRING ? '' : undefined;
            a = s.charCodeAt(i);
            return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff
              ? TO_STRING ? s.charAt(i) : a
              : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;
          };
        };

/***/ },
/* 9 */
/***/ function(module, exports) {

        // 7.1.4 ToInteger
        var ceil  = Math.ceil
          , floor = Math.floor;
        module.exports = function(it){
          return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
        };

/***/ },
/* 10 */
/***/ function(module, exports) {

        // 7.2.1 RequireObjectCoercible(argument)
        module.exports = function(it){
          if(it == undefined)throw TypeError("Can't call method on  " + it);
          return it;
        };

/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {

        'use strict';
        var LIBRARY        = __webpack_require__(12)
          , $export        = __webpack_require__(13)
          , redefine       = __webpack_require__(28)
          , hide           = __webpack_require__(18)
          , has            = __webpack_require__(29)
          , Iterators      = __webpack_require__(30)
          , $iterCreate    = __webpack_require__(31)
          , setToStringTag = __webpack_require__(47)
          , getPrototypeOf = __webpack_require__(49)
          , ITERATOR       = __webpack_require__(48)('iterator')
          , BUGGY          = !([].keys && 'next' in [].keys()) // Safari has buggy iterators w/o `next`
          , FF_ITERATOR    = '@@iterator'
          , KEYS           = 'keys'
          , VALUES         = 'values';

        var returnThis = function(){ return this; };

        module.exports = function(Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED){
          $iterCreate(Constructor, NAME, next);
          var getMethod = function(kind){
            if(!BUGGY && kind in proto)return proto[kind];
            switch(kind){
              case KEYS: return function keys(){ return new Constructor(this, kind); };
              case VALUES: return function values(){ return new Constructor(this, kind); };
            } return function entries(){ return new Constructor(this, kind); };
          };
          var TAG        = NAME + ' Iterator'
            , DEF_VALUES = DEFAULT == VALUES
            , VALUES_BUG = false
            , proto      = Base.prototype
            , $native    = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT]
            , $default   = $native || getMethod(DEFAULT)
            , $entries   = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined
            , $anyNative = NAME == 'Array' ? proto.entries || $native : $native
            , methods, key, IteratorPrototype;
          // Fix native
          if($anyNative){
            IteratorPrototype = getPrototypeOf($anyNative.call(new Base));
            if(IteratorPrototype !== Object.prototype){
              // Set @@toStringTag to native iterators
              setToStringTag(IteratorPrototype, TAG, true);
              // fix for some old engines
              if(!LIBRARY && !has(IteratorPrototype, ITERATOR))hide(IteratorPrototype, ITERATOR, returnThis);
            }
          }
          // fix Array#{values, @@iterator}.name in V8 / FF
          if(DEF_VALUES && $native && $native.name !== VALUES){
            VALUES_BUG = true;
            $default = function values(){ return $native.call(this); };
          }
          // Define iterator
          if((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])){
            hide(proto, ITERATOR, $default);
          }
          // Plug for library
          Iterators[NAME] = $default;
          Iterators[TAG]  = returnThis;
          if(DEFAULT){
            methods = {
              values:  DEF_VALUES ? $default : getMethod(VALUES),
              keys:    IS_SET     ? $default : getMethod(KEYS),
              entries: $entries
            };
            if(FORCED)for(key in methods){
              if(!(key in proto))redefine(proto, key, methods[key]);
            } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);
          }
          return methods;
        };

/***/ },
/* 12 */
/***/ function(module, exports) {

        module.exports = true;

/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {

        var global    = __webpack_require__(14)
          , core      = __webpack_require__(15)
          , ctx       = __webpack_require__(16)
          , hide      = __webpack_require__(18)
          , PROTOTYPE = 'prototype';

        var $export = function(type, name, source){
          var IS_FORCED = type & $export.F
            , IS_GLOBAL = type & $export.G
            , IS_STATIC = type & $export.S
            , IS_PROTO  = type & $export.P
            , IS_BIND   = type & $export.B
            , IS_WRAP   = type & $export.W
            , exports   = IS_GLOBAL ? core : core[name] || (core[name] = {})
            , expProto  = exports[PROTOTYPE]
            , target    = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]
            , key, own, out;
          if(IS_GLOBAL)source = name;
          for(key in source){
            // contains in native
            own = !IS_FORCED && target && target[key] !== undefined;
            if(own && key in exports)continue;
            // export native or passed
            out = own ? target[key] : source[key];
            // prevent global pollution for namespaces
            exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
            // bind timers to global for call from export context
            : IS_BIND && own ? ctx(out, global)
            // wrap global constructors for prevent change them in library
          .........完整代码请登录后点击上方下载按钮下载查看