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" &.........完整代码请登录后点击上方下载按钮下载查看