Animated Redacted Text

Animated-Redacted-Text.markdown

Animated Redacted Text

Animated redacted text via Sass for all you confidential needs.

A Pen by Jeremy Paris on CodePen.

License.

index.html

<h1>Redacted Text Demo</h1>

<article class="left">
  <h2>Blackout Left</h2>
  <p>
    Long ago in a distant land, I, <span class="redacted">Aku</span>, the <span class="redacted">shape shifting</span> master <span class="redacted">of darkness</span>, unleashed an unspeakable <span class="redacted">evil</span>. But a <span class="redacted">foolish</span> samurai warrior wielding a <span class="redacted">magic sword</span> stepped forth to oppose me.
  </p>
  <p>
    Before the final blow was struck, I tore open a portal in time, and flung him into the future <span class="redacted">where my evil is law</span>. Now the fool seeks to return to the past and undo the future that is <span class="redacted">Aku</span>.
  </p>
</article>


<article class="right">
  <h2>Blackout Right</h2>
  <p>
    Many millions of years ago, on <span class="redacted">the planet Cybertron</span>, life existed. But, not life as we know it today. Intelligent <span class="redacted">robots</span>, that could think and feel inhabited the cities. They were called <span class="redacted">Autobots</span> and <span class="redacted">Decepticons</span>. But, the brutal <span class="redacted">Decepticons</span> were driven by a single goal, total domination. They set out to destroy the peace-loving <span class="redacted">Autobots</span>, and a war between the forces of good and evil raged across <span class="redacted">Cybertron</span>, devastating all in its path, and draining <span class="redacted">the planet's</span> once rich sources of energy. The <span class="redacted">Autobots</span>, on the verge of extinction, battle valiantly to survive.
  </p>
</article>


<article class="top">
  <h2>Blackout Top</h2>
  <p>
    <span class="redacted">GI Joe</span> is the codename for <span class="redacted">America</span>'s daring, highly trained special mission force. It's purpose: to defend human freedom against <span class="redacted">Cobra</span> - a ruthless, terrorist organization <span class="redacted">determined to rule the world</span>.
  </p>
</article>


<article class="bottom">
  <h2>Blackout Bottom</h2>
  <p>
    I am <span class="redacted">Adam</span>, Prince of <span class="redacted">Eternia</span>, Defender of the <span class="redacted">Secrets</span> of <span class="redacted">Castle Greyskull</span>. This is <span class="redacted">Kringer</span>, my fearless friend. Fabulous, secret powers were revealed to me the day I held aloft <span class="redacted">my magic sword</span> and said: <span class="redacted">"By the Power of Greyskull!"</span>
  </p>
  <p>
    <span class="redacted">Kringer</span> became the mighty <span class="redacted">BattleCat</span> and I became <span class="redacted">He-Man</span>, the most powerful man in the Universe! Only three others share this secret: <span class="redacted">Our friends the Sorceress</span>, <span class="redacted">Man-at-Arms</span>, and <span class="redacted">Orko</span>. Together we defend <span class="redacted">Castle Greyskull</span> from the evil forces of <span class="redacted">Skeletor</span>.
  </p>
</article>

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);

$color : (
  bg-body: #eeeeee,
  text: #222222,
  redacted: #000000
);
$redactAnim: 1s ease-out forwards infinite;

body {
  padding: 2em;
  background: map-get($color, bg-body);
  color: map-get($color, text);
  font-family: 'Anonymous Pro'; 
}

h1 {
  text-align: center;
}

p {
  line-height: 1.25em;
}

.redacted {
  position: relative;
  display: inline-block;
  
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: map-get($color, redacted);
    
  }
  
}

.left .redacted:before, .right .redacted:before {
  @include animation(redact-blackout-width $redactAnim);
}

.right .redacted:before {
    right: 0;
}

.top .redacted:before, .bottom .redacted:before {
  @include animation(redact-blackout-height $redactAnim);
}

.bottom .redacted:before {
    bottom: 0;
}

@include keyframes(redact-blackout-width){
  from {  width: 0%;  }
  to{  width: 100%;  }
}

@include keyframes(redact-blackout-height){
  from {  height: 0%;  }
  to{  height: 100%;  }
}