Created
April 22, 2024 17:22
-
-
Save codepediair/5ff6c88d98cafafd2aa8bcbc737d5b30 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
a(href='#').switcher | |
.screen.glitch | |
.clock.is-off | |
span(data-time='').time | |
.figure | |
.figure-mask |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function () { | |
function second_passed() { | |
$('.clock').removeClass('is-off'); | |
} | |
setTimeout(second_passed, 2000) | |
$('.switcher').on('click', function(e) { | |
e.preventDefault(); | |
$('.screen').toggleClass('glitch'); | |
}); | |
var newDate = new Date(); | |
newDate.setDate(newDate.getDate()); | |
setInterval( function() { | |
var hours = new Date().getHours(); | |
var seconds = new Date().getSeconds(); | |
var minutes = new Date().getMinutes(); | |
var realTime = ( hours < 10 ? '0' : '' ) + hours + ' : ' + ( minutes < 10 ? '0' : '' ) + minutes + ' : ' + ( seconds < 10 ? '0' : '' ) + seconds | |
$('.time').html(realTime); | |
$('.time').attr('data-time', realTime); | |
}, 1000); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Lato:400,700); | |
$bg-color = #E5E9F0 | |
$txt-color = #2E3440 | |
$color-c1 = red | |
$color-c2 = blue | |
$offset-c1 = 3 | |
$offset-c2 = 2 | |
$lay-c1 = 2 | |
$lay-c2 = 2 | |
*, | |
*:before, | |
*:after | |
margin: 0 | |
padding: 0 | |
border: 0 | |
outline: 0 | |
box-sizing: border-box | |
user-select: none | |
html, | |
body | |
height: 100% | |
body | |
font-family: 'Lato', sans-serif | |
font-weight: 700 | |
background: $bg-color | |
color: $txt-color | |
a.switcher | |
display: block | |
position: fixed | |
text-decoration: none | |
z-index: 999999999999 | |
right: 20px | |
bottom: 20px | |
width: 16px | |
height: 16px | |
background: transparent | |
border: 2px solid $txt-color | |
border-radius: 50% | |
opacity: .15 | |
transition: opacity .150s | |
&:hover | |
opacity: 1 | |
&:before | |
display: block | |
content: '' | |
position: absolute | |
border-radius: 4px | |
width: 2px | |
height: 5px | |
background: $txt-color | |
top: 0 | |
left: 5px | |
.screen | |
position: relative | |
z-index: 1 | |
widht: 100% | |
height: 100% | |
overflow: hidden | |
.figure | |
display: block | |
position: absolute | |
z-index: 1 | |
width: 0 | |
height: 0 | |
top: 0 | |
right: 0 | |
bottom: 0 | |
left: 0 | |
margin: auto | |
border-top: 200px solid $txt-color | |
border-right: 100px solid transparent | |
border-left: 100px solid transparent | |
border-bottom: 0 solid transparent | |
&:before | |
display: block | |
content: '' | |
position: absolute | |
z-index: 99 | |
width: 0 | |
height: 0 | |
top: -194px | |
left: -90px | |
margin: auto | |
border-top: 180px solid $bg-color | |
border-right: 90px solid transparent | |
border-left: 90px solid transparent | |
border-bottom: 0 solid transparent | |
.figure-mask | |
display: block | |
position: absolute | |
z-index: 99 | |
width: 0 | |
height: 0 | |
top: 0 | |
right: 0 | |
bottom: 0 | |
left: 0 | |
margin: auto | |
border-top: 200px solid transparent | |
border-right: 100px solid $bg-color | |
border-left: 100px solid $bg-color | |
border-bottom: 0 solid transparent | |
.clock | |
display: block | |
position: absolute | |
z-index: 9 | |
width: 720px | |
height: 128px | |
text-align: center | |
top: 0 | |
right: 0 | |
bottom: 0 | |
left: 0 | |
margin: auto | |
cursor: default | |
span | |
display: block | |
position: relative | |
font-size: 128px | |
line-height: 1 | |
&.is-off | |
animation: is-off 2s linear infinite !important | |
.glitch | |
&:before | |
position: absolute | |
z-index: 999999 | |
content: '' | |
top: 0 | |
right: 0 | |
bottom: 0 | |
left: 0 | |
animation: bg-move 2s linear infinite | |
background-size: 100% 8px | |
background-image: linear-gradient(0, rgba(255,255,255,.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 60%, transparent 60%, transparent) | |
.figure, | |
.figure-mask | |
transform: skewX(0deg) scaleY(1) | |
animation: tr-bag 4s linear infinite | |
.clock | |
transform: skewX(0deg) scaleY(1) | |
animation: clock-bag 4s linear infinite | |
span | |
&:before, | |
&:after | |
display: block | |
content: attr(data-time) | |
position: absolute | |
top: 0 | |
color: $txt-color | |
background: $bg-color | |
overflow: hidden | |
width: 720px | |
height: 128px | |
clip: rect(0,900px,0,0) | |
&:before | |
left: -($offset-c2)px | |
text-shadow: ($lay-c2)px 0 $color-c2 | |
animation: c2 1s infinite linear alternate-reverse | |
&:after | |
left: ($offset-c1)px | |
text-shadow: -($lay-c1)px 0 $color-c1 | |
animation: c1 2s infinite linear alternate-reverse | |
// animation | |
random(val) | |
return math(math(0, 'random') * val + 1, 'floor') | |
@keyframes is-off | |
0% | |
opacity: 1 | |
50% | |
opacity: 1 | |
56% | |
opacity: 0 | |
57% | |
opacity: 0 | |
58% | |
opacity: 1 | |
71% | |
transform: scaleY(1) skewX(0deg) | |
72% | |
transform: scaleY(3) skewX(-60deg) | |
73% | |
transform: scaleY(1) skewX(0deg) | |
80% | |
opacity: 1 | |
81% | |
opacity: 0 | |
84% | |
opacity: 0 | |
85% | |
opacity: 1 | |
91% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
color: $txt-color | |
92% | |
transform: scaleX(1.5) scaleY(.2) skewX(80deg) | |
color: green | |
93% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
color: $txt-color | |
@keyframes c1 | |
for i in (0..20) | |
{i*(1/20)*10*10%} | |
clip: rect( random(100)px, 9999px, random(100)px, 0); | |
@keyframes c2 | |
for i in (0..20) | |
{i*(1/20)*10*10%} | |
clip: rect( random(100)px, 9999px, random(100)px, 0); | |
23% | |
transform: scaleX(.8); | |
@keyframes clock-bag | |
for i in (0..50) | |
{i*(1/50)*10*10%} | |
transform: translate(random(5)px, random(5)px) | |
1% | |
transform: scaleY(1) skewX(0deg) | |
1.5% | |
transform: scaleY(3) skewX(-60deg) | |
2% | |
transform: scaleY(1) skewX(0deg) | |
51% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
52% | |
transform: scaleX(1.5) scaleY(.2) skewX(80deg) | |
53% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
@keyframes tr-bag | |
for i in (0..50) | |
{i*(1/50)*10*10%} | |
transform: translate(random(5)px, random(5)px) | |
1% | |
transform: scaleY(1) skewX(0deg) | |
1.5% | |
transform: scaleY(3) skewX(-60deg) | |
2% | |
transform: scaleY(1) skewX(0deg) | |
51% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
52% | |
transform: scaleX(1.5) scaleY(.2) skewX(80deg) | |
53% | |
transform: scaleX(1) scaleY(1) skewX(0deg) | |
@keyframes bg-move | |
0% | |
background-position: 0 0 | |
100% | |
background-position: 0 -32px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment