Skip to content

2kool2/crop-copy-restore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published