Responsively crop content copy down to a user-defined number of lines. Click to restore content via a typed animation.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
index.html
license.md
readme.md

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