- Jump To … +
  ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js

- §

  # Demo Snippets 004

  Snippets included in the Scrawl-canvas demo/snippets folder

  Related files:

  - Snippets included in the Scrawl-canvas demo/snippets folder
  - Animated hover gradient snippet
  - Animated word gradient snippet
  - Green box snippet
  - Jazzy button snippet
  - Page performance snippet
  - Pan image snippet
  - Placeholder effect snippet
  - Ripple effect snippet
  - Spotlight text snippet
  - Word highlighter snippet
- §

  ### ‘Placeholder’ snippet

  Purpose: Place a large X across the DOM element to indicate that it is a placeholder for something else

  Function input:

  - any block-displayed DOM element
  - additional data values can be passed by setting appropriate `data-` attributes on the DOM element

  Function output:

      {
          element           // wrapper
          canvas            // wrapper
          animation         // object
          demolish          // function
      }

  ##### Usage example:

      import placeholder from './relative/or/absolute/path/to/this/file.js';

      let myElements = document.querySelectorAll('.some-class');

      myElements.forEach(el => placeholder(scrawl, el));

- §

  Effects on the element:

  - The DOM element’s background color will be brought into the canvas, with the element’s backgroundColor set to `transparent` - any background image, gradient, etc will be hidden by the snippet effect

      export default function (scrawl, el) {

- §

  Apply the snippet to the DOM element

          const snippet = scrawl.makeSnippet({
              domElement: el,
          });

          if (snippet) {

- §

  Set some convenience variables

              const canvas = snippet.canvas,
                  wrapper = snippet.element,
                  name = wrapper.name;

- §

  Data can be passed to the snippet via `data-` attributes on the DOM element:

  - data-line-width - default: “4”
  - data-line-color - default: “black”

              let lineWidth = el.dataset.lineWidth || '4';

              const lineColor = el.dataset.lineColor || 'black';

              lineWidth = parseFloat(lineWidth);

- §

  Transfer the DOM element’s current background-color style over to the canvas

  - This does not handle situations where the DOM element has a gradient assigned to it

              const backgroundColor = wrapper.elementComputedStyles.backgroundColor || false;

              if (backgroundColor) {

                  canvas.set({
                      backgroundColor,
                  })
                  wrapper.domElement.style.backgroundColor = 'transparent';
              }

- §

  Generate the Scrawl-canvas artefacts that display the effect

              scrawl.makeLine({

                  name: `${name}-line-1`,
                  group: canvas.base.name,
                  start: ['0%', '1%'],
                  end: ['100%', '99%'],
                  lineWidth,
                  strokeStyle: lineColor,
                  method: 'draw',

              }).clone({

                  name: `${name}-line-2`,
                  start: ['0%', '99%'],
                  end: ['100%', '1%'],
              });

              scrawl.makeBlock({

                  name: `${name}-block`,
                  group: canvas.base.name,
                  lineWidth: lineWidth * 2,
                  dimensions: ['100%', '100%'],
                  strokeStyle: lineColor,
                  method: 'draw',
              })
          }
          return snippet;
      }