Skip to content
Browse files

Responsively crop copy, restore onclick via sliding drop-down animation

  • Loading branch information...
2kool2 committed Jan 22, 2017
0 parents commit d40b3318414e91b3bff51d900663f2eb056f5d4d
Showing with 537 additions and 0 deletions.
  1. +121 −0 css/styles.css
  2. +100 −0 index.html
  3. +252 −0 js/cropCopyRestore.2.0.js
  4. +4 −0 js/cropCopyRestore.2.0.min.js
  5. +9 −0
  6. +51 −0
@@ -0,0 +1,121 @@

/* Generic styles */
body {
font-family: sans-serif;
line-height: 1.5;
color: #fff;
background-color: #3a3a3a;
max-width: 40rem;
figure {margin: 1rem 0}
pre, code {display:block;margin:0}
pre {overflow-x:scroll;resize:horizontal;min-width:100%;background-color:#333}
pre > code {text-shadow:0 1px #000;word-wrap:normal;padding-left:.75rem}
::selection {background-color:#000}
::-moz-selection {background-color:#000}
h1, h2, h3 {font-weight: 100; line-height:1.25}
h1 {font-size:1.75rem}
h2 {font-size:1.5rem;margin-top:2em}
a,a:visited {color:#fff}

/* helper class */
* {
box-sizing: border-box;
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);

/* Main styles */

.CCR {
/* Animated via JS embedding inline max-height values */
/* Note: 1ms shorter than SVG rotation duration */
overflow: hidden;
transition: max-height .6s ease-out;

.CCR_txt {
/* Optional, adjust to meet individual project */
color: #fff;
background-color: #000;
padding: .75rem 1rem;
.CCR_txt[role="button"] {
cursor: pointer;

.CCR_txt * {
/* Required, polyfill if unsupported */
/* Note: Prevents embedded links from working */
pointer-events: none;

/* Icon styles */

.CCR_icon {
/* SVG container (required) */
/* Fixes Safari's focus/hover state box-shadow */

/* Override colours here if required: */
/* color: #fff; */
background-color: #3a3a3a;

float: right;
margin: 0 0 .75rem .75rem;

/* Today we look through the round window */
border-radius: 100%;
overflow: hidden;
display: block;
width: 1.5em;
height: 1.5em;
-webkit-transition: box-shadow .3s ease-out;
transition: box-shadow .3s ease-out;
.CCR_svg {
background-color: transparent;
color: currentColor;
border: .125em solid currentColor;
border: 2px solid #3a3a3a;
border-radius: 100%;
display: block;
width: 100%;
height: 100%;
stroke-width: 4;
stroke-linecap: square;
stroke: currentColor;

/* Note: 1ms longer than SVG rotation duration */
-webkit-transition: transform .7s ease-out;
transition: transform .7s ease-out;

/* Icon animation */

.CCR-expanded .CCR_svg {
/* 360deg provides a slower rotation */
transform: rotateZ(180deg);
.CCR_use-plus {
/* Note: same as SVG rotation duration */
-webkit-transition: opacity .7s ease-out;
transition: opacity .7s ease-out;
.CCR-expanded .CCR_use-plus {
opacity: 0;

/* Acts as focus state indicator for the control */
/* A requirement to meet WCAG 2 */
.CCR_txt:hover > .CCR_icon,
.CCR_txt:focus > .CCR_icon {
box-shadow: 0 0 0 4px #99BAD9;
@@ -0,0 +1,100 @@
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Crop copy, restore on-click</title>

<link rel=stylesheet href="css/styles.css">

<svg style=display:none>
<!-- combine to create plus symbol -->
<symbol viewBox="0 0 38 38" id="icon-vert">
<path d="M19 10.5l0 17"></path>
<symbol viewBox="0 0 38 38" id="icon-hori">
<path d="M10.5 19l17 0"></path>

<h1>Responsively crop copy, restore onclick via sliding drop-down animation</h1>

Responsively crop content copy down to a user-defined number of lines in an accessible manner.<br>
Click to fully restore content via a sliding drop-down animation.</p>
As used on <a href="">Tesco Food Love Stories</a>.



<h3>Single line:</h3>

<div class=CCR>
<div class=CCR_txt data-cropCopyRestore>
If you’ve seen our recent TV ad, you’ll be in on our Food Love Story about ‘David’s’ shameful secret: when he met his wife, he fibbed about sharing her love of spicy food. 15 years later, he hasn’t come clean, but he’s still making his wife her favourite curry – with a sneaky dollop of cooling yogurt for him.

<h3>Two lines:</h3>

<div class=CCR>
<div class=CCR_txt data-cropCopyRestore=2>
Sometimes it’s the undemandingly easy, everyday recipes that deliver the most joy. For ‘Iain’ and his dad, from our Food Love Story, it’s croque monsieur. They first had it on a joint trip to France and, since then, it’s become their favourite weekend lunch. ‘Iain’s’ made a few changes to it along the way (bonjour, wafer-thin roast turkey) – but for him and his dad, it’s most definitely ‘proper’.



<p>Include a link to the styles:</p>

<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;link rel="stylesheet" href="css/styles.css"&gt;

<p>Add content block(s) and data attribute.<br>The attribute value is equal to the number of lines to display.</p>

<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;div class="CCR"&gt;
&lt;div class="CCR_txt"
Content copy&hellip;

<p>Include a link to the script:</p>

<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;script src="js/cropCopyRestore.2.0.min.js"&gt;&lt;/script&gt;

<p>CodePen demo: <a href="">Responsively crop copy, restore onclick via sliding drop-down animation</a></p>
<p>GitHub repo: <a href="">crop-copy-slide-restore</a></p>
<p>Mike Foskett @ <a href="">webSemantics</a></p>

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


0 comments on commit d40b331

Please sign in to comment.
You can’t perform that action at this time.