{"id":701,"date":"2023-03-15T16:17:00","date_gmt":"2023-03-15T13:17:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=701"},"modified":"2023-03-28T23:54:09","modified_gmt":"2023-03-28T20:54:09","slug":"tekstovyj-effekt","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/701\/","title":{"rendered":"Text effect"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"701\" style=\"aspect-ratio: 1394 \/ 701;\" width=\"1394\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-15_11-17-01.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;intro v-center&quot;&gt;\n    &lt;div&gt;\n    &lt;p class=&quot;typer&quot;&gt;cyberpunk 2077&lt;\/p&gt;\n  &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;canvas id=&quot;canvas&quot; width=&quot;2600&quot; height=&quot;900&quot;&gt;&lt;\/canvas&gt; <\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">html {\n  background: #000;\n}\n\nbody {\n  overflow: hidden;\n}\n\ncanvas {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 0;\n}\n\n.intro {\n  font-family: &quot;Orbitron&quot;, sans-serif;\n  margin: 0 auto;\n  position: relative;\n  z-index: 2;\n  display: table;\n  width: 100%;\n}\n\np.typer {\n  display: table;\n  text-align: center;\n  vertical-align: middle;\n  margin: 0 auto;\n  padding: 15% 0;\n  font-size: 3em;\n  line-height: 3em;\n  letter-spacing: 0.5em;\n  text-transform: uppercase;\n}\n\ni {\n  display: inline-block;\n  font-style: normal;\n  padding: 0 0.25em;\n  -webkit-transform: scale(0);\n  -moz-transform: scale(0);\n  -ms-transform: scale(0);\n  -o-transform: scale(0);\n  transform: scale(0);\n  -webkit-transition: all 1s ease;\n  -moz-transition: all 1s ease;\n  transition: all 1s ease;\n}\ni.fly-in-out {\n  color: rgba(255, 255, 255, 0.9);\n  -webkit-animation: fly-in-out 4s infinite ease-in-out;\n  -moz-animation: fly-in-out 4s infinite ease-in-out;\n  animation: fly-in-out 4s infinite ease-in-out;\n}\n\n@-webkit-keyframes fly-in-out {\n  0% {\n    -webkit-transform: scaleY(-3) translate3d(0, -300%, 0);\n  }\n  15%, 45% {\n    color: rgba(255, 255, 255, 0.8);\n    -webkit-transform: scaleZ(1) translate3d(0, 10%, 0);\n  }\n  100% {\n    color: rgba(236, 243, 186, 0.2);\n    \/* Come Closer *\/\n    \/* Fade Up *\/\n    -webkit-transform: scale3d(9);\n  }\n}\n@-moz-keyframes fly-in-out {\n  0% {\n    -moz-transform: scaleY(-3) translate3d(0, -300%, 0);\n  }\n  15%, 45% {\n    color: rgba(255, 255, 255, 0.8);\n    -moz-transform: scaleZ(1) translate3d(0, 10%, 0);\n  }\n  100% {\n    color: rgba(236, 243, 186, 0.2);\n    \/* Come Closer *\/\n    \/* Fade Up *\/\n    -moz-transform: scale3d(9);\n  }\n}\n@keyframes fly-in-out {\n  0% {\n    -webkit-transform: scaleY(-3) translate3d(0, -300%, 0);\n    -moz-transform: scaleY(-3) translate3d(0, -300%, 0);\n    -ms-transform: scaleY(-3) translate3d(0, -300%, 0);\n    -o-transform: scaleY(-3) translate3d(0, -300%, 0);\n    transform: scaleY(-3) translate3d(0, -300%, 0);\n  }\n  15%, 45% {\n    color: rgba(255, 255, 255, 0.8);\n    -webkit-transform: scaleZ(1) translate3d(0, 10%, 0);\n    -moz-transform: scaleZ(1) translate3d(0, 10%, 0);\n    -ms-transform: scaleZ(1) translate3d(0, 10%, 0);\n    -o-transform: scaleZ(1) translate3d(0, 10%, 0);\n    transform: scaleZ(1) translate3d(0, 10%, 0);\n  }\n  100% {\n    color: rgba(236, 243, 186, 0.2);\n    \/* Come Closer *\/\n    \/* Fade Up *\/\n    -webkit-transform: scale3d(9);\n    -moz-transform: scale3d(9);\n    -ms-transform: scale3d(9);\n    -o-transform: scale3d(9);\n    transform: scale3d(9);\n  }\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/\/Text Animation\nvar paragraph = document.getElementsByTagName('p')[0];\n\nfunction textEffect(animationName) {\n  var text = paragraph.innerHTML,\n\t\tchars = text.length,\n\t\tnewText = '',\n\t\tanimation = animationName,\n\t\tchar,\n\t\ti;\n\n\tfor (i = 0; i &lt; chars; i += 1) {\n\t\tnewText += '&lt;i&gt;' + text.charAt(i) + '&lt;\/i&gt;';\n\t}\n\n\tparagraph.innerHTML = newText;\n\n\tvar wrappedChars = document.getElementsByTagName('i'),\n\t\twrappedCharsLen = wrappedChars.length,\n\t\tj = 0;\n\n\tfunction addEffect () {\n\t\tsetTimeout(function () {\n\t\t\twrappedChars[j].className = animation;\n\t\t\tj += 1;\n\t\t\tif (j &lt; wrappedCharsLen) {\n\t\t\t\taddEffect();\n\t\t\t}\n\t\t}, 100)\n\t}\n\n\taddEffect();\n};\n\ntextEffect('fly-in-out');\n\n\/\/Space\nvar canvas = document.getElementById(&quot;canvas&quot;);\nvar ctx = canvas.getContext(&quot;2d&quot;);\n\nvar DeepSpace = function(size, number, speed)\n{\n  this.size = size;\n\tthis.number = number;\n\tthis.speed = speed;\n\tthis.objects = new Array();\n\n\tthis.initialize = function()\n\t{\n\t\tthis.creationImage();\n\t\tthis.drawCircle();\n\t\tthis.animate();\n\t}\n\n\tthis.creationImage = function()\n\t{\n\t\tfor(var i = 0; i &lt; this.number; i++)\n\t\t{\n\t\t\tvar star = {\n\t\t\t\t'x' : Math.random()*2000,\n\t\t\t\t'y' : Math.random()*900,\n\t\t\t\t'radius' : Math.random()*this.size+1,\n\t\t\t}\n\t\t\tthis.objects.push(star);\n\t\t}\n\t}\n\n\tthis.drawCircle = function(x, y, radius)\n\t{\n\t\twith(ctx)\n\t\t{\n\t\t\tbeginPath();\n\t\t\tarc(x, y, radius, 0, 2*Math.PI);\n\t\t\tfillStyle = 'white';\n\t\t\tfill();\n\t\t\tstroke();\n\t\t\tclosePath();\n\t\t}\n\t}\n\n\tthis.animate = function()\n\t{\n\t\tfor(var j in this.objects)\n\t\t{\n\t\t\tvar x = this.objects[j].x--;\n\t\t\tvar y = this.objects[j].y;\n\t\t\tvar radius = this.objects[j].radius;\n      \n      if(x &lt; -2) this.objects[j].x = 2000;\n\n\t\t\tthis.drawCircle(x, y, radius);\n      \n\t\t}\n\t}\n  \n  setInterval(this.animate.bind(this), this.speed);\n}\n\nvar space = new DeepSpace(0.1, 1000, 2);\nspace.initialize();\nvar space = new DeepSpace(.7, 1000, 3);\nspace.initialize();\nvar space = new DeepSpace(1.5, 10, 1);\nspace.initialize();<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[38],"class_list":["post-701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-canvas"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}