Responsively crop content copy down to a user-defined number of lines. Click to restore content via a typed animation.
JavaScript HTML CSS
Latest commit 1da4b96 Jan 11, 2017 @2kool2 Updated text
Permalink
Failed to load latest commit information.
css Text update Jan 11, 2017
js Initial commit Jan 10, 2017
index.html Text update Jan 11, 2017
license.md Initial commit Jan 10, 2017
readme.md Updated text Jan 11, 2017

readme.md

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