Responsively crop copy, restore onclick

Responsively crop content copy down to a user-defined number of lines. Click to restore content via a typed animation.

Vanilla JavaScript running at 60fps. I believe WCAG 2 level AA accessible but unconfirmed. Super small script: 1K approx minified & gzipped.

CodePen demo: Responsively crop copy, restore onclick

Basic usage

Include a link to the script:

<script src="js/cropCopyRestore.1.0.min.js"></script>

Add data attribute to the content block(s):

<div class=txt data-cropCopyRestore=3>Content copy to trim&hellip;</div>

Attribute value equals the number of lines to display.

Required CSS:

[data-cropCopyRestore][role="button"]:focus {
  outline: 0 dotted #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5);
}
[data-cropCopyRestore][role="button"]:hover {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5);
  cursor: pointer;
}
.-clone {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

Status

Considered too jarring visually. Project to be redeveloped with smooth text expansion.

---

Mike Foskett @ webSemantics