{"id":243343,"date":"2014-11-17T01:12:02","date_gmt":"2014-11-16T21:12:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=243343"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=243343","title":{"rendered":"\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 #33<\/span>"},"content":{"rendered":"
\t\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0445\u0430\u0431\u0440\u0430\u0432\u0447\u0430\u043d\u0435. \u0417\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u044f \u0443\u0432\u0438\u0434\u0435\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432\/\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\/\u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0425\u0430\u0431\u0440\u043e\u043c. <\/p>\n

Walkway.js<\/a> \u0438 Vivus.js<\/a><\/h4>\n


\u0412\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u044d\u0442\u043e\u0442 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u044b\u0439 \u043b\u044d\u043d\u0434\u0438\u043d\u0433<\/a> \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0439 \u0430\u043d\u043e\u043d\u0441\u0443 Sony PlayStation 4? \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e SVG \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0438\u0437 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432. \u041e\u043d\u0438 \u0441\u043b\u043e\u0432\u043d\u043e \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u043e\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041e\u0442\u043d\u044b\u043d\u0435 \u044d\u0442\u043e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Walkway \u0438 Vivus. \u041e\u0431\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f path<\/b> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c strokeDashoffset<\/b>. \u0425\u043e\u0442\u044c \u0438 \u0443 Walkway \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0437\u0432\u0435\u0437\u0434 \u043d\u0430 \u0413\u0438\u0442\u0445\u0430\u0431\u0435, \u0437\u0430\u0442\u043e Vivus \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438: Delayed, Async \u0438 OneByOne.<\/p>\n

\/\/Walkway var svg = new Walkway('#test');  svg.draw(function() {   console.log('Animation finished'); });  \/\/Vivus new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback); <\/code><\/pre>\n
  <\/a>
  Interact.js<\/a>
  \u041f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u044f\u043d\u0438-\u0431\u0440\u043e\u0441\u0430\u0439, \u0440\u0435\u0441\u0430\u0439\u0437\u043e\u043c \u0438 \u0436\u0435\u0441\u0442\u0430\u043c\u0438. \u041c\u0435\u0433\u0430 \u043a\u0440\u0443\u0442\u043e \u0435\u0449\u0435 \u0442\u043e, \u0447\u0442\u043e Interact \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0442\u0430\u0441\u043a\u0430\u0442\u044c SVG \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432 SVG \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: Chrome, Firefox, Opera \u0438 Internet Explorer 8+ \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041c\u043e\u0449\u043d\u044b\u0439 API \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c. \u041a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u043c\u0435\u043d\u0443 \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0445 jQuery + jQuery UI. <\/p>\n
var \/\/ x and y to keep the position that's been dragged to     x = 0,     y = 0,     \/\/ vendor prefixes (prefices?)     transformProp = 'transform' in document.body.style?                 'transform': 'webkitTransform' in document.body.style?                     'webkitTransform': 'mozTransform' in document.body.style?                         'mozTransform': 'oTransform' in document.body.style?                             'oTransform': 'msTransform';  \/\/ make an Interactable of the document body element interact(document.body)     \/\/ make a draggable of the Interactable     .draggable({         \/\/ on(drag)move         \/\/ could also have done interact(document.body).draggable(true).ondragmove = function...         onmove: function (event) {             x += event.dx;             y += event.dy;              \/\/ translate the document body by the change in pointer position             document.body.style[transformProp] = 'translate(' + x + 'px, ' + y + 'px)';         }     })     \/\/ you should really add listeners like this if you want to add multiple listeners     .on('dragend', function (event) {         console.log('dragged a distance of ' +              Math.sqrt(event.dx*event.dx + event.dy*event.dy) +              ' pixels to ' + event.pageX + ', ' + event.pageY);     })     \/\/ allow inertia throwing     .inertia({         resistance: 15,         zeroResumeDelta: true     });     \/\/ snap to the corners of the specified grid     .snap({         mode: 'grid',         grid: {             x: 100,             y: 5         },         gridOffset: {             x: 20,             y: 10         },         range: Infinity \/\/ can also use -1 which gets changed to Infinity     });   \/\/ you can also listen to InteractEvents for every Interactable interact.on('dragstart', function (event) {     console.log('starting drag from ' + event.x0 + ', ' + event.y0); }); <\/code><\/pre>\n
Materialize<\/a> \u0438 Material UI<\/a><\/h4>\n
  
  \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u043d\u0435 \u043f\u043e\u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0434\u0432\u0430 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0433\u0434\u0435 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u043a\u0443 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e Google Material Design. Materialize \u0431\u043e\u043b\u0435\u0435 \u0431\u043e\u0433\u0430\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 Material UI \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043d\u0430\u0431\u043e\u0440 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n
450 lines language implementation<\/a><\/h4>\n
  \u0412\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0442\u0440\u0435\u043d\u0434\u043e\u0432\u0443\u044e \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434? \u041a\u0440\u043e\u0448\u0435\u0447\u043d\u0430\u044f \u0437\u043c\u0435\u0439\u043a\u0430 \u043d\u0430 JavaScript (30 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430)<\/a>, \u041a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 Excel \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JavaScript (30 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430)<\/a> (\u0438 \u0434\u0430\u0436\u0435 5 \u0441\u0442\u0440\u043e\u043a \u043e\u0442 \u0414\u044d\u0432\u0438\u0434\u0430 \u0411\u043b\u0435\u0439\u043d\u0430<\/a>), Tetris <\/a>, \u0410\u0440\u043a\u0430\u043d\u043e\u0438\u0434<\/a>, \u0413\u043e\u043d\u043e\u0447\u043a\u0430<\/a>, \u041f\u0438\u0430\u043d\u0438\u043d\u043e<\/a>, Roguelike\/RPG<\/a>, \u0421\u043e\u043a\u043e\u0431\u0430\u043d<\/a>, \u0425\u0430\u043d\u043e\u0439\u0441\u043a\u0430\u044f \u0431\u0430\u0448\u043d\u044f<\/a>, \u041a\u0440\u0435\u0441\u0442\u0438\u043a\u0438 \u043d\u043e\u043b\u0438\u043a\u0438<\/a>, \u041f\u044f\u0442\u043d\u0430\u0448\u043a\u0438<\/a>, \u0421\u0430\u043f\u0435\u0440 (1<\/a> \u0438 2<\/a>), \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0438\u043f\u0435\u0442\u043a\u0430 \u043d\u0430 JS, 399 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 (\u043d\u0435 \u0441\u0442\u0440\u043e\u043a)<\/a>, \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043b\u0430\u0431\u0438\u0440\u0438\u043d\u0442\u043e\u0432 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u043c \u042d\u0439\u043b\u0435\u0440\u0430<\/a>, \u0418\u0433\u0440\u0430 \u0432 30 \u043a\u043e\u043c\u0430\u043d\u0434 \u0410\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440\u0430<\/a>, Minecraft \u043d\u0430 C# (19 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430)<\/a>, \u0420\u0438\u0441\u043e\u0432\u0430\u043b\u043a\u0430 \u043f\u043e\u0434 Windows \u043d\u0430 C++ (30+ \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430)<\/a> \u0438 \u043c\u043e\u044f \u043b\u044e\u0431\u0438\u043c\u0430\u044f \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u044c \u0418\u0433\u0440\u0430 \u0432 0 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS<\/a>. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0432\u043e\u0435\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430 450 \u0441\u0442\u0440\u043e\u043a \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u044d\u0442\u043e\u0439 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0435 \u0432 \u044d\u0442\u043e\u0439 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0435<\/s>. <\/p>\n
Particles.js<\/a><\/h4>\n
  <\/a>
  \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u00ab\u0436\u0438\u0432\u044b\u0445 \u0447\u0430\u0441\u0442\u0438\u0446\u00bb. \u0418\u043c\u0435\u0435\u0442 \u0446\u0435\u043b\u044b\u0439 \u0440\u044f\u0434 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u043c \u0441\u043e\u0442\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0444\u043e\u043d\u0430. <\/p>\n
particlesJS('particles-js', {   particles: {     color: '#fff',     shape: 'circle', \/\/ "circle", "edge" or "triangle"     opacity: 1,     size: 4,     size_random: true,     nb: 150,     line_linked: {       enable_auto: true,       distance: 100,       color: '#fff',       opacity: 1,       width: 1,       condensed_mode: {         enable: false,         rotateX: 600,         rotateY: 600       }     },     anim: {       enable: true,       speed: 1     }   },   interactivity: {     enable: true,     mouse: {       distance: 250     },     detect_on: 'canvas', \/\/ "canvas" or "window"     mode: 'grab',     line_linked: {       opacity: .5     },     events: {       onclick: {         enable: true,         mode: 'push', \/\/ "push" or "remove" (particles)         nb: 4       }     }   },   \/* Retina Display Support *\/   retina_detect: true }); <\/code><\/pre>\n
Firefox Developer Edition<\/a><\/h4>\n
  <\/a><\/p>\n
\u0417\u0430\u043f\u0430\u0434\u043d\u044b\u0435 \u043c\u044b\u0441\u043b\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u043b\u043e \u0431\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435:<\/h4>\n
  <\/p>\n