{"id":584,"date":"2023-03-11T02:28:36","date_gmt":"2023-03-10T23:28:36","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=584"},"modified":"2023-03-28T23:53:58","modified_gmt":"2023-03-28T20:53:58","slug":"effekt-kachayushhegosya-teksta","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/584\/","title":{"rendered":"Swing text effect"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"475\" style=\"aspect-ratio: 934 \/ 475;\" width=\"934\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-11_00-25-02.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=&#039;stage&#039;&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n  &lt;div class=&#039;layer&#039;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/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;}\">@charset &quot;UTF-8&quot;;\n@import url(&quot;\/\/fonts.googleapis.com\/css?family=Pacifico&amp;text=Pure&quot;);\n@import url(&quot;\/\/fonts.googleapis.com\/css?family=Roboto:700&amp;text=css&quot;);\n@import url(&quot;\/\/fonts.googleapis.com\/css?family=Kaushan+Script&amp;text=!&quot;);\nhtml, body {\n  height: 100%;\n}\n\nbody {\n  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);\n  -webkit-font-smoothing: subpixel-antialiased;\n}\n\n.stage {\n  height: 300px;\n  width: 500px;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.layer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  transform-style: preserve-3d;\n  opacity: 0;\n  animation: \u0ca0_\u0ca0 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;\n  animation-fill-mode: forwards;\n  transform: rotateY(40deg) rotateX(33deg) translateZ(0);\n}\n\n.layer:after {\n  font: 150px\/0.65 &quot;Pacifico&quot;, &quot;Kaushan Script&quot;, Futura, &quot;Roboto&quot;, &quot;Trebuchet MS&quot;, Helvetica, sans-serif;\n  content: &quot;Pure\\a     css!&quot;;\n  white-space: pre;\n  text-align: center;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  top: 50px;\n  color: whitesmoke;\n  letter-spacing: -2px;\n  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);\n}\n\n.layer:nth-child(1):after {\n  transform: translateZ(0px);\n}\n\n.layer:nth-child(2):after {\n  transform: translateZ(-2px);\n}\n\n.layer:nth-child(3):after {\n  transform: translateZ(-4px);\n}\n\n.layer:nth-child(4):after {\n  transform: translateZ(-6px);\n}\n\n.layer:nth-child(5):after {\n  transform: translateZ(-8px);\n}\n\n.layer:nth-child(6):after {\n  transform: translateZ(-10px);\n}\n\n.layer:nth-child(7):after {\n  transform: translateZ(-12px);\n}\n\n.layer:nth-child(8):after {\n  transform: translateZ(-14px);\n}\n\n.layer:nth-child(9):after {\n  transform: translateZ(-16px);\n}\n\n.layer:nth-child(10):after {\n  transform: translateZ(-18px);\n}\n\n.layer:nth-child(11):after {\n  transform: translateZ(-20px);\n}\n\n.layer:nth-child(12):after {\n  transform: translateZ(-22px);\n}\n\n.layer:nth-child(13):after {\n  transform: translateZ(-24px);\n}\n\n.layer:nth-child(14):after {\n  transform: translateZ(-26px);\n}\n\n.layer:nth-child(15):after {\n  transform: translateZ(-28px);\n}\n\n.layer:nth-child(16):after {\n  transform: translateZ(-30px);\n}\n\n.layer:nth-child(17):after {\n  transform: translateZ(-32px);\n}\n\n.layer:nth-child(18):after {\n  transform: translateZ(-34px);\n}\n\n.layer:nth-child(19):after {\n  transform: translateZ(-36px);\n}\n\n.layer:nth-child(20):after {\n  transform: translateZ(-38px);\n}\n\n.layer:nth-child(n+10):after {\n  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);\n}\n\n.layer:nth-child(n+11):after {\n  -webkit-text-stroke: 15px dodgerblue;\n  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;\n}\n\n.layer:nth-child(n+12):after {\n  -webkit-text-stroke: 15px #0077ea;\n}\n\n.layer:last-child:after {\n  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);\n}\n\n.layer:first-child:after {\n  color: #fff;\n  text-shadow: none;\n}\n\n@keyframes \u0ca0_\u0ca0 {\n  100% {\n    transform: rotateY(-40deg) rotateX(-43deg);\n  }\n}\n@keyframes o_O {\n  100% {\n    opacity: 1;\n  }\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[16,17,40],"class_list":["post-584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-htmlcss","tag-jquery","tag-text"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/584","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=584"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/585"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}