Codevember 6 :: (Dark) Web

codevember-6-dark-web.markdown

Codevember 6 :: (Dark) Web

Simple lil' hover animation to redact text

A Pen by Menglin Chen on CodePen.

License.

index.html

<div class="container">
    <h1><span class="redacted">Drake Equation</span></h1>
    <p><span class="redacted">Drake Equation a billion trillion rings of Uranus take root and flourish consciousness Jean-François Champollion.</span></p>
    <p><span class="redacted">mote of dust suspended in a sunbeam descended from astronomers inconspicuous motes of rock and gas the carbon</span></p>
</div<

script.js

const redacted = document.querySelectorAll('.redacted');

redacted.forEach((el, i) => {
    el.style.transitionDelay = `${i * 300}ms`
});

style.postcss

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:700|Source+Sans+Pro:200');

:root {
    --color-light: #eaeaea;
    --color-dark: #373334;
    --font-primary: 'Libre Baskerville', serif;
    --font-secondary: 'Source Sans Pro', sans-serif;
}

::selection {
    outline: none;
}

body,html {
    background-color: var(--color-light);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    min-height: 100%;
    justify-content: center;
}

.container {
    max-width: 600px;
}

.container:hover .redacted {
    box-shadow: inset 0 0 0 var(--color-dark);
}

h1 {
    font-family: var(--font-primary);
    font-size: 3rem;
    display: inline-block;
}

p {
    font-family: var(--font-secondary);
    line-height: 1.5;
    font-size: 1.25rem
}

.redacted {
    -webkit-box-decoration-break: clone;
    box-shadow: inset -1000px 0 0 var(--color-dark);
    transition: box-shadow 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
}