{"tag":"web components","articles":{"blog\/society\/ocz-just-some-googly-eyes":{"key":"blog\/society\/ocz-just-some-googly-eyes","type":"article","published":true,"meta":{"createdAt":"2019-10-16T17:27:18+02:00","publishedAt":"2019-10-16T20:23:00+02:00","group":null,"links":[{"icon":"globe-europe","colour":"primary","url":"https:\/\/ocz.avris.it\/","displayUrl":"Demo"},{"icon":"brands gitlab","colour":"secondary","url":"https:\/\/gitlab.com\/Avris\/Ocz","displayUrl":null},{"icon":"globe-europe","colour":"secondary","url":"https:\/\/www.npmjs.com\/package\/avris-ocz","displayUrl":null}],"category":"blog","subcategory":"society","slug":"ocz-just-some-googly-eyes"},"content":{"en":{"slug":"ocz-just-some-googly-eyes","title":"Ocz \u2013 Just some googly eyes.","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-ocz_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022320\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHhUlEQVRIiX2Xy69lRRXGf+tRtfc595776tsXmoZu3gqoHYhGEmJoSRCIQYPGB5oQHehA48A\/wbkzB0bjWEfGCRKj0QgkkCgaH4AtEexuHg1p+nHvPfd19q5aDvbpxqixsl\/Jrtr11ffVWuvbcuzGuyJKRQiiVoiKuVNLIQhUBFfDVEnuzGYH1FohAiIQQEQQhiYiiAgQXGkRMT\/r1TtREQEVwdwxEZpmhEcIEUGpBQkQoJSCMHxYVQegolArSZV+PgEi835c7S8CIKjKe5PLlWchakHUiHhvnCEkNbQW\/MoAQQkqEaAhiA6TEYKqA0JfKoagCCGKqc7ZGBaCDO\/mx\/xiuBuzWYcIRAwLFFF0PtZUcTOSKh6iUMuc4IERIpAQVA03xUQwUdwUiUqtlVrL8AH3YfW1ompXpVIRolaCYHllhcsXLwEVQhCHqAVVgQAzJZmR\/AogAVSgztkSENG5DIaimBnZEuOmgejZ3dujcadJTvZErZVSevpSQBj2S60AHLlmg4PtKVAH0iJQzXNQiukgcTbFRRMRHRIGUtGrm1RQs4FaS6goKoaKs9AssDpa5tJ0Ew0lStB4Qj1DFEKEvu8GhgRuPHaMt0+fRSSQAFNBCCAhEnPJlGSKa8r0wTxi7EqsgOrAjhqmRnYnW0IxRBJNTtx0eJGd3SkHXcc1124w29tlurWNiZBdqVG57xP38+rLp1jKDUEMkQWoDqKogggkU7IbHpqQNJcLoQaYKKqGiuLmuBrZMy5CMidJImnD2toyn\/nK51hbXeG3P\/0Fr585izWLJB+iabK8yH0P3M9LTz\/HSjsCChExgFFBBcwE04E1d8HJDdI7tcZcXwBF1FBzRAw3RzXhZvMzcfKRj\/H4N7\/AKy\/8jSe\/9xMShduPXEfUyvbOFM\/Gl7\/zbV742VNcv7TErHTU6Ikog3Q6j6407KGcFFNwaReoXUFqHfJQAGKIOGqJZI6qkcxpU2bszle\/8Vkeeuwk00vbPPWDJ8k6YnXccsut17Gz+S6bu\/s88K0vkVSoZ97g\/Uc2mO7tst\/PKLWn1A60ktwwE9yV5EJKhst4CZn1UCoBwx5BEUmoGOKJrE6bEuOUePyJB3nosZMA\/OXZF0k0TBYnLI4bti\/ucfzDH+ITj96Htw3Pf\/dHbKwvo9GxuRX0faLEACikohqk7LgLKSmeBZfRBHIPBSQUQhEUxEETpk4yJ6fEiRM38anPf\/xqSdh6Z8qhaw5z9PgGx++6gRvuuZmF9SUigtd\/+QwLo0ypi7RNT24qSKVGR9\/PiNqhBqqBuZEbx5PgTJahL0TIACaG6DIc14TiyDwBPvH1R65mZoCHv\/Yg\/9kigjef+QOz8+9y+MZDHGxmup3LLGmHWEUsqLWj9gcIPWqCuZJyxpsG18mEVBjqDIqHkjCyODmMrEZGuefEMY4eXfsvAP\/eaim8+qvfs\/3Kq7QLSrs85vAd19NvLrB1TlCZIXQgmSgJkTpEWHIsZ6wZ4ZOVCaUAc4YMwcNpxWhRWoymCvd+9Nb\/C2Z6fpOXf\/4cswvnGTWAQre3y+6FDpcZ4+WG2pUh9xioJGQul7pjuUWbEX7t2oi+D2qBGoqGohgphITRhtIU4fab1\/8nkL2tXf7+7Iu8+cdTZOkYtXUoHRWig3pg0Ch5pERSTGIuU0JNsZTR3CCpgTzCP7DRsLvfMTsozPpKKZVSKxKCRMWKYCKsr46vgtiZ7nHmlTc5\/efXePOlf9JEx9gLkQpOJWslNMACZkOtlBQkD9wEM0FTQnILySBnyA14iz+6+hY7+5XptGNrpzLtg+0D2J3BfgezXig9\/PD7P2ZvZ4\/L726xc3GLXAqJQqLSamVkPQspWGors3GFSZBCaG2wGVI61APLhtWg6wxjQndgaJvYvDSmo0VO3rUeS21if3+wSm6ZEKfihCQKTtVMXyFEQR0RxXXI2kONM7IJjcJChkmGwwvBkdXCxrqxsCCcPXeZ6d4eJXesXHeUp3\/9O06fO2CprWxsTDjogudf3kEWV9ZCU0bUsJTwpkXU8NzgKWOpQdXITYt5InnGLQ12U4y777yN1p29nZ5DSyPOnnqN5WSstspKC4cWldUFSNqTrGdloef2E2Mun5ty\/twWkxG49By+90F2\/\/ob\/I5Pf5FmcYm+QrswwVODqiPmJE+IGMJQdyQEKRVKQWqgpTI+so4DaS3ouh42enqBA1MOXNhJSk5GmyrVKvtNpbMV1t4Hl6evkUZC4z39pV0W73wILxjT3T2wxGx7G5EdQAcvFIMBH7wQczAVqZW6vw+1cOHtM0gJJAKrhcTgjccpM0nOxJ3lJjFOgmthnGG63\/GRDy7xxiWlXuxZGsHk8lvc9vDd+KUz\/2DWdahnaql4M4L3\/iEQwFNCVZEIogYaAwCtFen7qwa\/dge4GJffOUubW1yE5cUlDi2t4FHZ3d1idWnCn045b58Z8c7mPqcv7DPKQaMzPtm\/gazfckfUUuhnM2p3QFqYICGU2T6amqEc1B7PLcDguQGtgSJIXPHQgxfXCISKieAquIBSyWaoBn3fIRQ2Js5ya1zcG2xu43DvcfgXoycudg\/N7GgAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-ocz_small.png\u0022 alt=\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022320\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFair warning: this library is pretty useless. And only moderately fun... \ud83e\udd37\u200d\u003C\/p\u003E\n\u003Cp\u003EBut it seemed like a cool way to learn a bit about web components, so here it is: a component that creates googly eyes that follow your mouse.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-ocz_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022900\u0022 height=\u0022600\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAYAAACSuF9OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAHhUlEQVRIiX2Xy69lRRXGf+tRtfc595776tsXmoZu3gqoHYhGEmJoSRCIQYPGB5oQHehA48A\/wbkzB0bjWEfGCRKj0QgkkCgaH4AtEexuHg1p+nHvPfd19q5aDvbpxqixsl\/Jrtr11ffVWuvbcuzGuyJKRQiiVoiKuVNLIQhUBFfDVEnuzGYH1FohAiIQQEQQhiYiiAgQXGkRMT\/r1TtREQEVwdwxEZpmhEcIEUGpBQkQoJSCMHxYVQegolArSZV+PgEi835c7S8CIKjKe5PLlWchakHUiHhvnCEkNbQW\/MoAQQkqEaAhiA6TEYKqA0JfKoagCCGKqc7ZGBaCDO\/mx\/xiuBuzWYcIRAwLFFF0PtZUcTOSKh6iUMuc4IERIpAQVA03xUQwUdwUiUqtlVrL8AH3YfW1ompXpVIRolaCYHllhcsXLwEVQhCHqAVVgQAzJZmR\/AogAVSgztkSENG5DIaimBnZEuOmgejZ3dujcadJTvZErZVSevpSQBj2S60AHLlmg4PtKVAH0iJQzXNQiukgcTbFRRMRHRIGUtGrm1RQs4FaS6goKoaKs9AssDpa5tJ0Ew0lStB4Qj1DFEKEvu8GhgRuPHaMt0+fRSSQAFNBCCAhEnPJlGSKa8r0wTxi7EqsgOrAjhqmRnYnW0IxRBJNTtx0eJGd3SkHXcc1124w29tlurWNiZBdqVG57xP38+rLp1jKDUEMkQWoDqKogggkU7IbHpqQNJcLoQaYKKqGiuLmuBrZMy5CMidJImnD2toyn\/nK51hbXeG3P\/0Fr585izWLJB+iabK8yH0P3M9LTz\/HSjsCChExgFFBBcwE04E1d8HJDdI7tcZcXwBF1FBzRAw3RzXhZvMzcfKRj\/H4N7\/AKy\/8jSe\/9xMShduPXEfUyvbOFM\/Gl7\/zbV742VNcv7TErHTU6Ikog3Q6j6407KGcFFNwaReoXUFqHfJQAGKIOGqJZI6qkcxpU2bszle\/8Vkeeuwk00vbPPWDJ8k6YnXccsut17Gz+S6bu\/s88K0vkVSoZ97g\/Uc2mO7tst\/PKLWn1A60ktwwE9yV5EJKhst4CZn1UCoBwx5BEUmoGOKJrE6bEuOUePyJB3nosZMA\/OXZF0k0TBYnLI4bti\/ucfzDH+ITj96Htw3Pf\/dHbKwvo9GxuRX0faLEACikohqk7LgLKSmeBZfRBHIPBSQUQhEUxEETpk4yJ6fEiRM38anPf\/xqSdh6Z8qhaw5z9PgGx++6gRvuuZmF9SUigtd\/+QwLo0ypi7RNT24qSKVGR9\/PiNqhBqqBuZEbx5PgTJahL0TIACaG6DIc14TiyDwBPvH1R65mZoCHv\/Yg\/9kigjef+QOz8+9y+MZDHGxmup3LLGmHWEUsqLWj9gcIPWqCuZJyxpsG18mEVBjqDIqHkjCyODmMrEZGuefEMY4eXfsvAP\/eaim8+qvfs\/3Kq7QLSrs85vAd19NvLrB1TlCZIXQgmSgJkTpEWHIsZ6wZ4ZOVCaUAc4YMwcNpxWhRWoymCvd+9Nb\/C2Z6fpOXf\/4cswvnGTWAQre3y+6FDpcZ4+WG2pUh9xioJGQul7pjuUWbEX7t2oi+D2qBGoqGohgphITRhtIU4fab1\/8nkL2tXf7+7Iu8+cdTZOkYtXUoHRWig3pg0Ch5pERSTGIuU0JNsZTR3CCpgTzCP7DRsLvfMTsozPpKKZVSKxKCRMWKYCKsr46vgtiZ7nHmlTc5\/efXePOlf9JEx9gLkQpOJWslNMACZkOtlBQkD9wEM0FTQnILySBnyA14iz+6+hY7+5XptGNrpzLtg+0D2J3BfgezXig9\/PD7P2ZvZ4\/L726xc3GLXAqJQqLSamVkPQspWGors3GFSZBCaG2wGVI61APLhtWg6wxjQndgaJvYvDSmo0VO3rUeS21if3+wSm6ZEKfihCQKTtVMXyFEQR0RxXXI2kONM7IJjcJChkmGwwvBkdXCxrqxsCCcPXeZ6d4eJXesXHeUp3\/9O06fO2CprWxsTDjogudf3kEWV9ZCU0bUsJTwpkXU8NzgKWOpQdXITYt5InnGLQ12U4y777yN1p29nZ5DSyPOnnqN5WSstspKC4cWldUFSNqTrGdloef2E2Mun5ty\/twWkxG49By+90F2\/\/ob\/I5Pf5FmcYm+QrswwVODqiPmJE+IGMJQdyQEKRVKQWqgpTI+so4DaS3ouh42enqBA1MOXNhJSk5GmyrVKvtNpbMV1t4Hl6evkUZC4z39pV0W73wILxjT3T2wxGx7G5EdQAcvFIMBH7wQczAVqZW6vw+1cOHtM0gJJAKrhcTgjccpM0nOxJ3lJjFOgmthnGG63\/GRDy7xxiWlXuxZGsHk8lvc9vDd+KUz\/2DWdahnaql4M4L3\/iEQwFNCVZEIogYaAwCtFen7qwa\/dge4GJffOUubW1yE5cUlDi2t4FHZ3d1idWnCn045b58Z8c7mPqcv7DPKQaMzPtm\/gazfckfUUuhnM2p3QFqYICGU2T6amqEc1B7PLcDguQGtgSJIXPHQgxfXCISKieAquIBSyWaoBn3fIRQ2Js5ya1zcG2xu43DvcfgXoycudg\/N7GgAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-ocz_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022900\u0022 height=\u0022600\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFair warning: this library is pretty useless. And only moderately fun... \ud83e\udd37\u200d\u003C\/p\u003E\n\u003Cp\u003EBut it seemed like a cool way to learn a bit about web components, so here it is: a component that creates googly eyes that follow your mouse.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["css variables","googly eyes","javascript","js","library","web components"],"hasMore":false,"image":"https:\/\/avris.it\/image\/avris-ocz_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-ocz_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-ocz_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022160\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFair warning: this library is pretty useless. And only moderately fun... \ud83e\udd37\u200d\u003C\/p\u003E\n\u003Cp\u003EBut it seemed like a cool way to learn a bit about web components, so here it is: a component that creates googly eyes that follow your mouse.\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-ocz_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-ocz_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u0022160\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFair warning: this library is pretty useless. And only moderately fun... \ud83e\udd37\u200d\u003C\/p\u003E\n\u003Cp\u003EBut it seemed like a cool way to learn a bit about web components, so here it is: a component that creates googly eyes that follow your mouse.\u003C\/p\u003E","words":39,"readTime":null,"lang":"en"}}}}}