Psycho Glitch (CSS variables & @keyframes)

A Pen By

The "glitch" effect, recreated with animated CSS custom properties. Pure CSS. It doesn't work in Firefox for now, but will work in the next version. I have no idea why i called it like that.

Created May 29, 2017

<!--
Copyright (c) 2019 by Alex Nozdriukhin (https://codepen.io/alexnoz/pen/PmvMZm)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

Comments

André Canilho @Canilho on May 30, 2017

Make animation faster to match "heartbeat", and set glitches timings to subdivisions of the heartbeat. Simplified font type and made it white to give it more impact (personal taste).

And you'll have this > https://codepen.io/Canilho/pen/BRgXmd Not suitable for people that can suffer from epileptic attacks :S

Love
Alex Nozdriukhin @alexnoz on May 31, 2017

@Canilho That's so fast )

Love
Dus Webdesign @DusWebdesign on June 1, 2017

Freaking awesome glitch! It's pretty frustrating to get this to workin in Firefox, been trying it myself.

Love
Damián Muti @damianmuti on June 1, 2017

Fantastic job, @alexnoz ! Forking this pen myself to play a bit as well. Keep it up!

Love
Anthony @tOkyO1 on October 7, 2017

i'm so fucking confused... where have you set the green and pink colors for the distortion? are these determined by the browser or something?

Love
Alex Nozdriukhin @alexnoz on October 9, 2017

@tOkyO1, see the line #56 in CSS section. These colors are shadows whose x-offset depends on --left variable, so when it is changed, the shadows are translated to the left or to the right (if --left is negative).

Love
Anthony @tOkyO1 on October 9, 2017

oh, yes, you're right. i don't know how i missed that :/ i even specifically looked at the filter property below that and to myself i was like "okay, the drop shadow doesn't effect the colors..." lol. must've been staring at a screen for too long

Love

Comments

Leave a Comment Markdown supported. Click @usernames to add to comment.