【jQuery】レスポンシブテキストハイライトMarker

jQuery

marker

March 10, 2018

Markerは、レスポンシブテキストハイライトプラグイン。

CSS&JS

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
    <link rel="stylesheet" href="../dist/marker.css" />
    <script src="../dist/marker.js"></script>
    
    <script>
      var m = new Marker('.highlight');
      m.setColor(1);
      $(':radio').on('click', function () {
        m.setColor($(this).val());
      });
    </script>

HTML

      <div class="highlight">
        <h1>Marker</h1>
        <h2>Instructions</h2>
        <h4>Highlighting</h4>
        <p>On desktop, simply click and drag from the first word to the last word you wish to highlight. You may also click individual words.</p>
        <p>On mobile, touch and hold for 375ms and a balloon will pop up showing the word you have selected. Drag your finger to the desired ending word. (This can be seen on desktop as well if you hold the left mouse button without dragging for 375ms). This allows the user to scroll normally and highlight when desired.</p>
        <p>Highlighted text can span multiple paragraphs and element types. You can even highlight over, within, into, and out of other highlights. When you release your mouse / finger the highlights get normalized so that any "highlight within a highlight" gets split apart and adjacent highlights get merged together. This way the user is able to highlight as recklessly as they please and the outcome will remain neatly organized.</p>
        <h4>Erasing</h4>
        <p>Exactly the same as highlighting, simply use the "erase" color.</p>
        <h4>Color selection</h4>
        <p>In this demo, you can change the color by selecting one of the options from the floating header.</p>
      </div>

MIT

Latest Posts

Related Posts