API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 18th, 2019
66
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.22 KB | None | 0 0
raw download clone embed print report
  1. for (let i = 0; i < manNumber; i++) {
  2.  
  3. // Definisco quale strada
  4. if (i < (manNumber * leftStreet)) {
  5. street[i] = document.getElementById('path-2');
  6.  
  7. } else {
  8. street[i] = document.getElementById('path-1');
  9. }
  10.  
  11. // genero una velocità per ognuno
  12. _speed[i] = Math.floor((Math.random() * 400) + 1);
  13. _speed[i] = (_speed[i]/1000);
  14.  
  15. let shiftTop = -1.5;
  16.  
  17. // genero una posizione su ognuno
  18. let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;
  19.  
  20. // vario la durata dei gesti
  21. var _duration = Math.floor((Math.random() * 1000) + 500);
  22.  
  23. mansHead.push( new mojs.Shape({
  24. parent: '.omini',
  25. className: 'omino man-head-'+i,
  26. shape: 'circle',
  27. radius: 8,
  28. fill: manColor,
  29. top: manPosition+'%',
  30. left: 0,
  31. x: {0 : 5},
  32. y: 10,
  33. easing: 'linear.none',
  34. duration: _duration,
  35. }).then({
  36. x: {5 : 0},
  37. }));
  38. mansBody.push(new mojs.Shape({
  39. parent: '.man-head-'+i,
  40. className: 'man-body-'+i,
  41. shape: 'line',
  42. fill: 'none',
  43. stroke: manColor,
  44. radius: 10,
  45. strokeWidth: 13,
  46. strokeLinecap: 'round',
  47. angle: {85 : 95},
  48. x: {5 : -2},
  49. y: 30,
  50. easing: 'linear.none',
  51. duration: _duration,
  52. }).then({
  53. angle: {95 : 85},
  54. x: {[-2] : 5},
  55. y: 30,
  56. }));
  57. mansArmL.push(new mojs.Shape({
  58. parent: '.man-body-'+i,
  59. className: 'man-arm-'+i,
  60. shape: 'line',
  61. fill: 'none',
  62. stroke: manColor,
  63. radius: 10,
  64. strokeWidth: 6,
  65. strokeLinecap: 'round',
  66. angle: {45 : -45},
  67. x: -5,
  68. y: {8 : -8},
  69. duration: _duration,
  70. }).then({
  71. angle: {[-45] : 45},
  72. y: {[-8] : 8},
  73. }));
  74. mansArmR.push(new mojs.Shape({
  75. parent: '.man-body-'+i,
  76. className: 'man-arm-'+i,
  77. shape: 'line',
  78. fill: 'none',
  79. stroke: manColor,
  80. radius: 10,
  81. strokeWidth: 6,
  82. strokeLinecap: 'round',
  83. angle: {[-45] : 45},
  84. x: -5,
  85. y: {[-8] : 8},
  86. duration: _duration,
  87. }).then({
  88. angle: {45 : -45},
  89. y: {8 : -8},
  90. }));
  91. mansLegL.push(new mojs.Shape({
  92. parent: '.man-body-'+i,
  93. className: 'man-leg-'+i,
  94. shape: 'line',
  95. fill: 'none',
  96. stroke: manColor,
  97. radius: 12,
  98. strokeWidth: 7,
  99. strokeLinecap: 'round',
  100. angle: {20 : -20},
  101. x: 22,
  102. y: {8 : -8},
  103. duration: _duration,
  104. }).then({
  105. angle: {[-20] : 20},
  106. x: 22,
  107. y: {[-8] : 8},
  108. }));
  109. mansLegR.push(new mojs.Shape({
  110. parent: '.man-body-'+i,
  111. className: 'man-leg-'+i,
  112. shape: 'line',
  113. fill: 'none',
  114. stroke: manColor,
  115. radius: 12,
  116. strokeWidth: 7,
  117. strokeLinecap: 'round',
  118. angle: {[-20] : 20},
  119. x: 22,
  120. y: {[-8] : 8},
  121. duration: _duration,
  122. }).then({
  123. angle: {20 : -20},
  124. x: 22,
  125. y: {8 : -8},
  126. }));
  127. }
  128.  
  129. <section id="top" class="hero home">
  130. <div class="main-wrapper">
  131. <div class="svg-container__content">
  132. <div class="omini">
  133. <svg>
  134. ...
  135. </svg>
  136. </div>
  137. </div>
  138. </div>
  139. </section>
  140.  
  141. <svg>
  142. ...
  143. <path id="path-1" d="M1920 880 890 880 640 605 500 605" style="opacity: 0; stroke: #0000FF; stroke-width: 6; fill: none;"></path>
  144. <path id="path-2" d="M0 880 435 880 510 635 495 635" style="opacity: 0; stroke: #0000FF; stroke-width: 6; fill: none;"></path>
  145. </svg>
  146.  
  147. .main-wrapper {
  148. background: #fff6d2;
  149. position: relative;
  150. }
  151.  
  152. .svg-container__content {
  153. position: absolute;
  154. width:100%;
  155. height:100%;
  156. overflow:hidden
  157. }
  158.  
  159. #mask {
  160. width: 0;
  161. height: 0;
  162. }
  163.  
  164. .omini {
  165. position: absolute;
  166. width: 100%;
  167. height: 100%;
  168. }
  169.  
  170. .svg-container__content svg {
  171. width:100%;
  172. height:100%
  173. }
  174.  
  175. .color-bg {
  176. fill: #fff6d2;
  177. }
  178.  
  179. #tour-eiffel {
  180. position: absolute;
  181. z-index: 1;
  182. }
  183.  
  184. #brandev {
  185. position: absolute;
  186. z-index: 2;
  187. }
  188.  
  189. #duomo {
  190. position: absolute;
  191. z-index: 3;
  192. }
  193.  
  194. #street {
  195. position: absolute;
  196. z-index: 8;
  197. }
  198.  
  199. .group {
  200. overflow: hidden;
  201. }
  202.  
  203. .color-1 { fill: #989a9d; }
  204. .color-2 { fill: #85878a; }
  205. .color-3 { fill: #606060; }
  206. .color-4 { fill: #d9dbdc; }
  207. .color-5 { fill: #f1f1f2; }
  208. .color-6 { fill: #6b6c6f; }
  209. .color-7 { fill: #bdbfc1; }
  210. .color-8 { fill: #ffffff; }
  211. .mic-g, .belgrado-g, .nerve-centre-g, .bicocca-g, .film-space-g { cursor: pointer; }
  212.  
  213. .mic-g:hover > .color-1 { fill: #ff888e; }
  214. .mic-g:hover > .color-2 { fill: #fc656d; }
  215. .mic-g:hover > .color-3 { fill: #f43d47; }
  216. .mic-g:hover > .color-4 { fill: #f7d5d9; }
  217. .mic-g:hover > .color-5 { fill: #f1f1f2; }
  218. .mic-g:hover > .color-6 { fill: #fd4e50; }
  219. .mic-g:hover > .color-7 { fill: #f9b4b8; }
  220. .mic-g:hover > .color-8 { fill: #f7f2f3; }
  221.  
  222. .film-space-g:hover > .color-1 { fill: #ff888e; }
  223. .film-space-g:hover > .color-2 { fill: #fc656d; }
  224. .film-space-g:hover > .color-5 { fill: #f1f1f2; }
  225.  
  226. .nerve-centre-g:hover > .color-1 { fill: #ff888e; }
  227. .nerve-centre-g:hover > .color-2 { fill: #fc656d; }
  228. .nerve-centre-g:hover > .color-3 { fill: #f43d47; }
  229. .nerve-centre-g:hover > .color-5 { fill: #f1f1f2; }
  230. .nerve-centre-g:hover > .color-8{ fill: #f7f2f3; }
  231.  
  232. .bicocca-g:hover > .color-1 { fill: #ff888e; }
  233. .bicocca-g:hover > .color-2 { fill: #fc656d; }
  234. .bicocca-g:hover > .color-3 { fill: #f43d47; }
  235. .bicocca-g:hover > .color-4 { fill: #f7d5d9; }
  236. .bicocca-g:hover > .color-8 { fill: #f7f2f3; }
  237.  
  238. .belgrado-g:hover > .color-1 { fill: #ff888e; }
  239. .belgrado-g:hover > .color-2 { fill: #fc656d; }
  240. .belgrado-g:hover > .color-3 { fill: #f43d47; }
  241. .belgrado-g:hover > .color-4 { fill: #f7d5d9; }
  242.  
  243. .modal-trans {
  244. z-index: 9;
  245. }
  246.  
  247. .modal-close-btn {
  248. z-index: 10;
  249. cursor: pointer;
  250. }
  251. .close-btn {
  252. z-index: 11;
  253. cursor: pointer;
  254. }
  255.  
  256. .modal__inner {
  257. width: 100%;
  258. }
  259.  
  260. .modal__inner, .modal__location, .modal__link {
  261. z-index: 11;
  262. position: absolute;
  263. color: #252525;
  264. }
  265.  
  266. .modal-text-class {
  267. z-index: 11;
  268. }
  269.  
  270. .modal-text-title {
  271. font-family: monospace;
  272. padding: 120px 5% 20px 5%;
  273. }
  274.  
  275. .web-link, .map-place {
  276. z-index: 12;
  277. }
  278.  
  279. .modal-location p {
  280. font-family: monospace;
  281. text-align: center;
  282. }
  283.  
  284. .modal-text-inner {
  285. padding: 0 5% 20px 5%;
  286. width: 70%;
  287. overflow: scroll;
  288. height: 80vh;
  289. margin-bottom: 20px;
  290. max-height: 600px;
  291. }
  292.  
  293. .modal-text-class p {
  294. font-family: monospace;
  295. line-height: 2;
  296. }
  297.  
  298. class Website extends mojs.CustomShape {
  299. getShape() { return '<path d="M27.68,36.32a13.68,13.68,0,0,0,0,27.36H41.36a2.16,2.16,0,1,0,.06-4.32H27.68a9.36,9.36,0,1,1,0-18.72H42.8A9.29,9.29,0,0,1,52.16,50a2.16,2.16,0,1,0,4.32.06s0,0,0-.06A13.7,13.7,0,0,0,42.8,36.32Zm30.8,0a2.16,2.16,0,1,0,.16,4.32H72.32a9.36,9.36,0,1,1,0,18.72H57.2A9.29,9.29,0,0,1,47.84,50a2.16,2.16,0,1,0-4.32-.06s0,0,0,.06A13.7,13.7,0,0,0,57.2,63.68H72.32a13.68,13.68,0,1,0,0-27.36H58.48Z"/>'; }
  300. }
  301.  
  302. class Mapplace extends mojs.CustomShape {
  303. getShape() { return '<path d="M50,6A27,27,0,0,0,23,33a32.11,32.11,0,0,0,2.13,10.72c7.71,15.69,15.4,33.44,23.09,49.16a2,2,0,0,0,3.56,0C59.56,77.2,67,59.35,74.88,43.72A31.94,31.94,0,0,0,77,33,27,27,0,0,0,50,6Zm0,4A23,23,0,0,1,73,33a29.68,29.68,0,0,1-1.87,9.28L50,87.47,28.88,42.28A29.83,29.83,0,0,1,27,33,22.93,22.93,0,0,1,50,10Zm0,8A15,15,0,1,0,65,33,15,15,0,0,0,50,18Zm0,4A11,11,0,1,1,39,33,11,11,0,0,1,50,22Z"/>'; }
  304. }
  305.  
  306.  
  307. mojs.addShape('website', Website);
  308. mojs.addShape('mapplace', Mapplace);
  309.  
  310. const shiftCurve = mojs.easing.path( 'M0,100 C50,100 50,100 50,50 C50,0 50,0 100,0' );
  311. const scaleCurveBase = mojs.easing.path( 'M0,100 C21.3776817,95.8051376 50,77.3262711 50,-700 C50,80.1708527 76.6222458,93.9449005 100,100' );
  312. const scaleCurve = (p) => { return 1 + scaleCurveBase(p); };
  313. const nScaleCurve = (p) => { return 1 - scaleCurveBase(p)/10; };
  314. const noizeEasing = mojs.easing.path('M0,100 L24.2114672,99.7029845 L27.0786839,106.645089 L29.2555809,93.3549108 L32.0340385,103.816964 L35.3459816,94.6015626 L38.3783493,103.092634 L41.0513382,95.9547991 L43.7739944,106.645089 L45.6729927,96.8973214 L50,105.083147 L53.3504448,93.3549108 L57.7360497,103.816964 L60.8616066,95.9547991 L65.0345993,103.092634 L68.6997757,97.5106029 L71.6646194,102.03125 L75.5066986,96.5672433 L78.2949219,102.652344 L81.0313873,96.8973214 L84.0174408,102.328264 L86.0842667,97.7332592 L88.7289352,101.606306 L91.1429977,98.3533763 L94.3822556,101.287388 L97.0809174,98.7254467 L100,100');
  315. const noizeProgress = (p) => { return 10+(5*noizeEasing(p)); };
  316.  
  317. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  318. *
  319. * MODAL CODE
  320. *
  321. */
  322.  
  323. // Parent element
  324. const parent = document.querySelector('.main-wrapper');
  325.  
  326. // Create Element
  327.  
  328. // Inner
  329. const modalInner = document.createElement( 'div' );
  330. modalInner.classList.add( 'modal__inner' );
  331. parent.appendChild( modalInner );
  332.  
  333. // Fill The Element with some html
  334. function fillElement (ele) {
  335. // Inner
  336. modalInner.innerHTML = document.querySelector('#js-modal-template-'+ele).innerHTML;
  337. }
  338.  
  339. const modal = new mojs.Shape({
  340. parent: '.main-wrapper',
  341. shape: 'circle',
  342. className: 'modal-trans',
  343. fill: '#f9d953',
  344. scale: {0 : 20},
  345. opacity: {0 : 1},
  346.  
  347. delay: 500,
  348. duration: 1500,
  349. easing: 'elastic.out',
  350. });
  351.  
  352. const modalCloseBtn = new mojs.Shape({
  353. parent: '.main-wrapper',
  354. shape: 'circle',
  355. className: 'modal-close-btn',
  356. fill: 'white',
  357. radius: 20,
  358. scale: {0 : 1},
  359. opacity: {0 : 1},
  360.  
  361. top: '120px',
  362. left: '90%',
  363. delay: 1000,
  364. duration: 500,
  365. easing: 'elastic.out',
  366. });
  367.  
  368. const closeBtn = new mojs.Shape({
  369. parent: '.main-wrapper',
  370. className: 'close-btn',
  371. shape: 'cross',
  372. angle: 45,
  373. fill: 'none',
  374. radius: {0 : 10},
  375. opacity: {0 : 1},
  376. scale: {0 : 1},
  377. stroke: '#252525',
  378. strokeWidth: 4,
  379.  
  380. top: '120px',
  381. left: '90%',
  382.  
  383. duration: 500,
  384. easing: 'elastic.out',
  385. });
  386.  
  387. const modalText = new mojs.Html({
  388. el: '.modal__inner',
  389. opacity: {0 : 1},
  390. scale: {0 : 1},
  391. duration: 250,
  392. easing: 'cubic.out',
  393. });
  394.  
  395. const webLink = new mojs.Shape({
  396. parent: '.main-wrapper',
  397. shape: 'website',
  398. className: 'web-link',
  399. radius: 30,
  400. scale: {0 : 1},
  401. opacity: {0 : 1},
  402. fill: '#252525',
  403.  
  404. top: '360px',
  405. left: '90%',
  406. easing: 'elastic.out',
  407. });
  408.  
  409. const mapPlace = new mojs.Shape({
  410. parent: '.main-wrapper',
  411. shape: 'mapplace',
  412. className: 'map-place',
  413. radius: 30,
  414. scale: {0 : 1},
  415. opacity: {0 : 1},
  416. fill: '#252525',
  417.  
  418. top: '220px',
  419. left: '90%',
  420. easing: 'elastic.out',
  421. });
  422.  
  423.  
  424. // Create the timeline for the animation of modal
  425. const modalOpenTimeline = new mojs.Timeline({ delay: 0 });
  426. modalOpenTimeline.append(modalCloseBtn, closeBtn, modalText, mapPlace, webLink);
  427.  
  428. $('svg .g').on('click' function (e) {
  429. fillElement('element'); // create html for modal
  430. modal.replay(); // replay modal timeline (the background and modal itself)
  431. modalOpenTimeline.replay(); //replay the opening animation (for the elements inside modal).
  432. });
  433.  
  434. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  435. *
  436. * CLICK BUTTONS
  437. *
  438. */
  439.  
  440. // Cineteca
  441. $('.mic-g').on('click', function (e) {
  442. fillElement('cineteca');
  443. modal.replay();
  444. modalOpenTimeline.replay();
  445. });
  446.  
  447. // Belgrado / Kinoteka
  448. $('.belgrado-g').on('click', function(e) {
  449. fillElement('kinoteka');
  450. modal.replay();
  451. modalOpenTimeline.replay();
  452. });
  453.  
  454. // Nerve Centre
  455. $('.nerve-centre-g').on('click', function(e) {
  456. fillElement('nerve-centre');
  457. modal.replay();
  458. modalOpenTimeline.replay();
  459. });
  460.  
  461. // Bicocca
  462. $('.bicocca-g').on('click', function(e) {
  463. fillElement('bicocca');
  464. modal.replay();
  465. modalOpenTimeline.replay();
  466. });
  467.  
  468. // Film Space
  469. $('.film-space-g').on('click', function(e) {
  470. fillElement('film-space');
  471. modal.replay();
  472. modalOpenTimeline.replay();
  473. });
  474.  
  475. $('.modal-close-btn, .close-btn').on('click', function (e) {
  476. const modalCloseTimeline = new mojs.Timeline();
  477.  
  478. const mapPlaceClose = new mojs.Html({
  479. el: '.map-place',
  480. scale: {1 : 0},
  481. opacity: {1 : 0},
  482. duration: 500,
  483. easing: 'elastic.out',
  484. });
  485. modalCloseTimeline.add(mapPlaceClose);
  486.  
  487. const webLinkClose = new mojs.Html({
  488. el: '.web-link',
  489. scale: {1 : 0},
  490. opacity: {1 : 0},
  491. duration: 500,
  492. easing: 'elastic.out',
  493. });
  494. modalCloseTimeline.add(webLinkClose);
  495.  
  496. const modalCloseCloseBtn = new mojs.Html({
  497. el: '.modal-close-btn',
  498. scale: {1 : 0},
  499. opacity: {1 : 0},
  500. duration: 500,
  501. easing: 'elastic.out',
  502. });
  503. modalCloseTimeline.add(modalCloseCloseBtn);
  504.  
  505. const CloseCloseBtn = new mojs.Html({
  506. el: '.close-btn',
  507. scale: {1 : 0},
  508. opacity: {1 : 0},
  509. duration: 500,
  510. easing: 'elastic.out',
  511. });
  512. modalCloseTimeline.add(CloseCloseBtn);
  513.  
  514. const modalCloseInner = new mojs.Html({
  515. el: '.modal__inner',
  516. scale: {1 : 0},
  517. opacity: {1 : 0},
  518. duration: 500,
  519. easing: 'elastic.out',
  520. });
  521. modalCloseTimeline.add(modalCloseInner);
  522.  
  523. const modalCloseTrans = new mojs.Html({
  524. el: '.modal-trans',
  525. scale: {1 : 0},
  526. opacity: {1 : 0},
  527. duration: 500,
  528. easing: 'elastic.out',
  529. });
  530. modalCloseTimeline.add(modalCloseTrans);
  531.  
  532. modalCloseTimeline.replay();
  533. });
  534.  
  535. // RESIZE SVG TO WINDOW mantaining aspect Ratio
  536.  
  537. function setHeight(a) {
  538. const k = a / 1920;
  539. let h = 1080 * k;
  540. $('.main-wrapper').width(a).height(h);
  541. };
  542.  
  543. var w = $(window).width();
  544. setHeight(w);
  545.  
  546. $(window).resize(function() {
  547. var h = $(window).height();
  548. var w = $(window).width();
  549. setHeight(w);
  550. });
  551.  
  552. const manColor = '#3E3940'; // Color of the people;
  553. const manScale = 0.4; // scale of people
  554. const manNumber = 30; // number people
  555. const leftStreet = 0.4; // my way of split people between the two paths
  556. const walkDuration = 20000; // duration of each animation in ms
  557.  
  558. const manPosition = [];
  559. const mansHead = [];
  560. const mansBody = [];
  561. const mansArmL = [];
  562. const mansArmR = [];
  563. const mansLegL = [];
  564. const mansLegR = [];
  565. const street = [];
  566. const _speed = [];
  567. const mans = [];
  568.  
  569. for (let i = 0; i < manNumber; i++) {
  570.  
  571. if (i < (manNumber * leftStreet)) {
  572. street[i] = document.getElementById('path-2');
  573. } else {
  574. street[i] = document.getElementById('path-1');
  575. }
  576. _speed[i] = Math.floor((Math.random() * 400) + 1);
  577. _speed[i] = (_speed[i]/1000);
  578.  
  579. let shiftTop = -1.5;
  580. let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;
  581. var _duration = Math.floor((Math.random() * 1000) + 500);
  582.  
  583. // Start generating giving a class to each "omino"
  584. mansHead.push( new mojs.Shape({
  585. parent: '.omini',
  586. className: 'omino man-head-'+i,
  587. shape: 'circle',
  588. radius: 8,
  589. fill: manColor,
  590. top: manPosition+'%',
  591. left: 0,
  592. x: {0 : 5},
  593. y: 10,
  594. easing: 'linear.none',
  595. duration: _duration,
  596. }).then({
  597. x: {5 : 0},
  598. }));
  599. mansBody.push(new mojs.Shape({
  600. parent: '.man-head-'+i,
  601. className: 'man-body-'+i,
  602. shape: 'line',
  603. fill: 'none',
  604. stroke: manColor,
  605. radius: 10,
  606. strokeWidth: 13,
  607. strokeLinecap: 'round',
  608. angle: {85 : 95},
  609. x: {5 : -2},
  610. y: 30,
  611. easing: 'linear.none',
  612. duration: _duration,
  613. }).then({
  614. angle: {95 : 85},
  615. x: {[-2] : 5},
  616. y: 30,
  617. }));
  618. mansArmL.push(new mojs.Shape({
  619. parent: '.man-body-'+i,
  620. className: 'man-arm-'+i,
  621. shape: 'line',
  622. fill: 'none',
  623. stroke: manColor,
  624. radius: 10,
  625. strokeWidth: 6,
  626. strokeLinecap: 'round',
  627. angle: {45 : -45},
  628. x: -5,
  629. y: {8 : -8},
  630. duration: _duration,
  631. }).then({
  632. angle: {[-45] : 45},
  633. y: {[-8] : 8},
  634. }));
  635. mansArmR.push(new mojs.Shape({
  636. parent: '.man-body-'+i,
  637. className: 'man-arm-'+i,
  638. shape: 'line',
  639. fill: 'none',
  640. stroke: manColor,
  641. radius: 10,
  642. strokeWidth: 6,
  643. strokeLinecap: 'round',
  644. angle: {[-45] : 45},
  645. x: -5,
  646. y: {[-8] : 8},
  647. duration: _duration,
  648. }).then({
  649. angle: {45 : -45},
  650. y: {8 : -8},
  651. }));
  652. mansLegL.push(new mojs.Shape({
  653. parent: '.man-body-'+i,
  654. className: 'man-leg-'+i,
  655. shape: 'line',
  656. fill: 'none',
  657. stroke: manColor,
  658. radius: 12,
  659. strokeWidth: 7,
  660. strokeLinecap: 'round',
  661. angle: {20 : -20},
  662. x: 22,
  663. y: {8 : -8},
  664. duration: _duration,
  665. }).then({
  666. angle: {[-20] : 20},
  667. x: 22,
  668. y: {[-8] : 8},
  669. }));
  670. mansLegR.push(new mojs.Shape({
  671. parent: '.man-body-'+i,
  672. className: 'man-leg-'+i,
  673. shape: 'line',
  674. fill: 'none',
  675. stroke: manColor,
  676. radius: 12,
  677. strokeWidth: 7,
  678. strokeLinecap: 'round',
  679. angle: {[-20] : 20},
  680. x: 22,
  681. y: {[-8] : 8},
  682. duration: _duration,
  683. }).then({
  684. angle: {20 : -20},
  685. x: 22,
  686. y: {8 : -8},
  687. }));
  688. }
  689.  
  690. w = $('.bicocca-g')[0].getBoundingClientRect().width;
  691. let h = $('.bicocca-g')[0].getBoundingClientRect().height;
  692.  
  693. $(window).resize(function(){
  694. w = $('.bicocca-g')[0].getBoundingClientRect().width;
  695. h = $('.bicocca-g')[0].getBoundingClientRect().height;
  696. });
  697.  
  698. $('.omino').each(function (i, kostante) {
  699.  
  700. var PathLenght = street[i].getTotalLength();
  701.  
  702. let name = '.man-head-'+i;
  703. let object = document.querySelector(name);
  704. let _delay = _speed[i]*5000;
  705.  
  706. mans[i] = new mojs.Timeline();
  707. mans[i].add(mansHead[i], mansBody[i], mansArmL[i], mansArmR[i], mansLegL[i], mansLegR[i]);
  708.  
  709. let shift = Math.floor((Math.random() * walkDuration) + 1);
  710. let direction = Math.random() >= 0.5;
  711. if (direction == false) {
  712. direction = -1;
  713. } else {
  714. direction = 1;
  715. }
  716.  
  717. const movement = new mojs.Tween({
  718. duration: walkDuration,
  719. speed: _speed[i],
  720. repeat: 999999,
  721. direction: direction,
  722. isYoyo: true,
  723. easing: 'linear.none',
  724. backwardEasing: 'linear.none',
  725. onUpdate (ep, p, isForward, isYoyo) {
  726. // normalization
  727. // var v = PathLenght * (p - 1) + PathLenght;
  728. let v = p*PathLenght;
  729.  
  730. w = $('.bicocca-g')[0].getBoundingClientRect().width;
  731. h = $('.bicocca-g')[0].getBoundingClientRect().height;
  732.  
  733. let point = street[i].getPointAtLength(v);
  734.  
  735. let kx = w / 1920;
  736. let ky = h / 1080;
  737. let x = point.x * kx;
  738. let y = point.y * ky;
  739.  
  740. let sx = manScale * (w / 1920);
  741.  
  742. let attr = "matrix("+sx+", 0, 0, "+sx+", "+ x +", "+ y +")";
  743. object.style.transform = attr;
  744. mans[i].play();
  745. },
  746. });
  747.  
  748. if (direction == 1) {
  749. movement.play( shift );
  750. } else {
  751. shift = 20000 + shift;
  752. movement.playBackward( shift );
  753. }
  754.  
  755. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!