{"id":1136,"date":"2023-04-02T08:36:09","date_gmt":"2023-04-02T05:36:09","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1136"},"modified":"2023-04-02T08:36:11","modified_gmt":"2023-04-02T05:36:11","slug":"animated-page-404","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/1136\/","title":{"rendered":"Animated page 404"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"807\" style=\"aspect-ratio: 1250 \/ 807;\" width=\"1250\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-02_07-29-26.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;page&quot;&gt;\n    &lt;header&gt;\n      &lt;nav&gt;&lt;\/nav&gt;\n      &lt;div class=&quot;search&quot;&gt;&lt;svg&gt;&lt;use xlink:href=&quot;#ico-search&quot;&gt;&lt;\/use&gt;&lt;\/svg&gt;&lt;\/div&gt;\n    &lt;\/header&gt;\n    &lt;div class=&quot;content&quot;&gt;\n      &lt;h1&gt;404&lt;\/h1&gt;\n      &lt;h2&gt;Page not found&lt;\/h2&gt;\n      &lt;p&gt;I tried to catch some fog, but i mist&lt;\/p&gt;\n      &lt;a&gt;back to home&lt;\/a&gt;\n    &lt;\/div&gt;\n      &lt;img src=&quot;http:\/\/www.supah.it\/dribbble\/008\/008.jpg&quot; \/&gt;\n  &lt;\/div&gt;\n  \n  &lt;!-- Logo --&gt;\n  &lt;svg  xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; xmlns:xlink=&quot;http:\/\/www.w3.org\/1999\/xlink&quot; style=&quot;display:none;&quot;&gt;\n    &lt;symbol id=&quot;logo-dailyui&quot; viewbox=&quot;0 0 61 14&quot;&gt;\n  &lt;g&gt;\n      &lt;g&gt;\n          &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; fill=&quot;#525C7C&quot; d=&quot;M29.117,0.98h-1.846l-2.407,11.551h6.045l0.334-1.62h-4.198              L29.117,0.98z M40.132,0.98l-3.365,5.285l-1.2-5.285h-1.885l1.854,7.182l-0.926,4.369h1.854l0.889-4.337l4.853-7.214H40.132z               M8.529,2.125C7.771,1.362,6.688,0.98,5.282,0.98H2.407L0,12.531h3.124c1.339,0,2.505-0.286,3.497-0.861              c0.992-0.573,1.748-1.392,2.267-2.457c0.52-1.063,0.779-2.309,0.779-3.737C9.667,4.006,9.288,2.889,8.529,2.125z M7.201,8.351              c-0.366,0.821-0.892,1.46-1.577,1.913c-0.686,0.452-1.488,0.679-2.407,0.679H2.166L3.934,2.56h1.137              c0.873,0,1.537,0.254,1.994,0.762S7.751,4.57,7.751,5.539C7.751,6.592,7.567,7.53,7.201,8.351z M20.128,12.531h1.831L24.382,0.98              H22.55L20.128,12.531z M15.314,0.964l-6.1,11.567h1.979l1.627-3.208H16.6l0.319,3.208h1.823L17.448,0.964H15.314z M13.632,7.68              l1.339-2.655c0.452-0.885,0.821-1.693,1.106-2.425c0,0.274,0.015,0.642,0.043,1.102c0.029,0.461,0.147,1.787,0.354,3.979H13.632z               M44.33,0l-2.662,14h16.67L61,0H44.33z M52.584,8.584c-0.265,1.279-0.755,2.229-1.473,2.849c-0.719,0.62-1.67,0.931-2.854,0.931              c-1.025,0-1.816-0.254-2.376-0.762c-0.561-0.508-0.839-1.236-0.839-2.19c0-0.397,0.047-0.805,0.141-1.222l1.367-6.473h1.679              l-1.359,6.501c-0.1,0.422-0.149,0.801-0.149,1.136c0,0.488,0.141,0.867,0.422,1.139c0.28,0.271,0.707,0.405,1.277,0.405              c0.685,0,1.229-0.192,1.63-0.577c0.401-0.386,0.694-1.013,0.879-1.88l1.408-6.724h1.68L52.584,8.584z M56.034,12.221h-1.665              l2.203-10.504h1.664L56.034,12.221z&quot;\/&gt;\n      &lt;\/g&gt;\n  &lt;\/g&gt;\n    &lt;\/symbol&gt;\n    &lt;symbol id=&quot;ico-search&quot;&gt;\n      &lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; fill=&quot;#4F5269&quot; d=&quot;M14.769,14.769c-0.342,0.342-0.896,0.342-1.237,0l-3.756-3.756      c-2.399,1.793-5.801,1.623-7.981-0.557c-2.392-2.392-2.392-6.271,0-8.663s6.271-2.392,8.662,0c2.18,2.181,2.35,5.583,0.557,7.981      l3.756,3.756C15.11,13.873,15.11,14.427,14.769,14.769z M9.219,3.032c-1.709-1.709-4.479-1.709-6.188,0      c-1.708,1.708-1.708,4.479,0,6.188c1.709,1.708,4.479,1.708,6.188,0C10.927,7.51,10.927,4.74,9.219,3.032z&quot;\/&gt;\n    &lt;\/symbol&gt;\n  &lt;\/svg&gt;\n\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;&gt;&lt;\/script&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;}\">\/*--------------------\nBody\n--------------------*\/\nhtml,\nbody {\n  height: 100%;\n  background: linear-gradient(0, #202239, #8595AC);\n}\n\n::selection {\n  background: #CDD4DE;\n}\n\n\/*--------------------\nPage\n--------------------*\/\n.page {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 800px;\n  height: 600px;\n  z-index: 1;\n  font-family: Roboto, sans-serif;\n  background: #0D0C1E;\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n\/*--------------------\nHeader\n--------------------*\/\nheader {\n  padding: 30px;\n}\nheader .logo {\n  margin: 0 auto;\n  text-align: center;\n  margin-bottom: -17px;\n}\nheader .logo svg {\n  width: 61px;\n  height: 14px;\n}\nheader nav {\n  cursor: pointer;\n  width: 18px;\n  height: 18px;\n  position: relative;\n  float: left;\n}\nheader nav::before {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background: #565c73;\n  border-radius: 2px;\n  box-shadow: 0 5px 0 #565c73, 0 10px 0 #565c73;\n}\nheader .search {\n  float: right;\n  cursor: pointer;\n}\nheader .search svg {\n  width: 16px;\n  height: 16px;\n}\n\n\/*--------------------\nContent\n--------------------*\/\n.content {\n  text-align: center;\n  padding-top: 118px;\n  color: #CDD4DE;\n}\n.content h1 {\n  font-weight: 900;\n  font-size: 165px;\n  line-height: 1;\n  margin-bottom: -10px;\n  opacity: 0.6;\n}\n.content h2 {\n  font-weight: 700;\n  font-size: 34px;\n  margin-bottom: 6px;\n  opacity: 0.9;\n}\n.content p {\n  font-weight: 300;\n  font-size: 14px;\n  opacity: 0.7;\n  margin-bottom: 140px;\n}\n.content a {\n  display: inline-block;\n  font-weight: 300;\n  font-size: 12px;\n  text-transform: uppercase;\n  border: 1px solid #CDD4DE;\n  padding: 8px 14px;\n  border-radius: 4px;\n  opacity: 0.4;\n  cursor: pointer;\n}\n\n\/*--------------------\nImage\n--------------------*\/\nimg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  z-index: -1;\n  transform: scale(1.1);\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;}\">var lFollowX = 0,\n    lFollowY = 0,\n    x = 0,\n    y = 0,\n    friction = 1 \/ 30;\n\nfunction animate() {\n  x += (lFollowX - x) * friction;\n  y += (lFollowY - y) * friction;\n  \n  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';\n\n  $('img').css({\n    '-webit-transform': translate,\n    '-moz-transform': translate,\n    'transform': translate\n  });\n\n  window.requestAnimationFrame(animate);\n}\n\n$(window).on('mousemove click', function(e) {\n\n  var lMouseX = Math.max(-100, Math.min(100, $(window).width() \/ 2 - e.clientX));\n  var lMouseY = Math.max(-100, Math.min(100, $(window).height() \/ 2 - e.clientY));\n  lFollowX = (20 * lMouseX) \/ 100; \/\/ 100 : 12 = lMouxeX : lFollow\n  lFollowY = (10 * lMouseY) \/ 100;\n\n});\n\nanimate();<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1138,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[17,63],"class_list":["post-1136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect","tag-jquery","tag-page404"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1136","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=1136"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1136\/revisions"}],"predecessor-version":[{"id":1139,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1136\/revisions\/1139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1138"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}