Peel-Away-Sticker-Text-Animation

Peel Away Sticker Text Effect

A really cool CSS only text effect designed by Mandy Michael. It feels like the text is peeling away like a sticker.

If you are having trouble with the pen, try the archived copy on GitHub

Sticker Text Effect Snippet

 

HTML

<div class="wrapper">
<h1 contenteditable data-heading="Folded">Folded</h1>
</div><

CSS

$bg: #e6e2df;

html, body {
height: 100%;
}

body {
background: linear-gradient(45deg, $bg 80%,#c2c1bd 100%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.wrapper {
width: 100%;
font-family: 'Source Code Pro', monospace;
margin: 0 auto;
height: 100%;

h1 {
text-transform: uppercase;
transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
font-size: 20vw;
top: 50%;
left: 50%;
margin: 0;
position: absolute;
text-rendering: optimizeLegibility;
font-weight: 900;
color: rgba(#ff9eb1, 0.5);
text-shadow: 1px 4px 6px $bg, 0 0 0 #66303a, 1px 4px 6px $bg;
white-space: nowrap;

&:before {
content: attr(data-heading);
position: absolute;
left: 0;
top: -4.8%;
overflow: hidden;
width: 100%;
height: 50%;
color: #fbf7f4;
transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
z-index: 2;
text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
}

&:after {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 1;
color: #d3cfcc;
transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
text-shadow: 2px -1px 6px rgba(0,0,0,0.3);
}
}
}

JavaScript

// JS for content editable trick from Chris Coyier

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});