Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 

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

About

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

Resources

License

Releases

No releases published

Packages

No packages published