{"id":15679230,"url":"https://github.com/technote-space/jquery.marker-animation","last_synced_at":"2025-05-07T10:34:15.431Z","repository":{"id":33544486,"uuid":"159296115","full_name":"technote-space/jquery.marker-animation","owner":"technote-space","description":"Marker animation jQuery plugin","archived":false,"fork":false,"pushed_at":"2023-03-15T07:06:46.000Z","size":7095,"stargazers_count":12,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-02T23:35:09.026Z","etag":null,"topics":["highlighter","jquery","marker-animation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/technote-space.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"custom":"https://paypal.me/technote0space"}},"created_at":"2018-11-27T07:47:49.000Z","updated_at":"2023-03-26T11:44:11.000Z","dependencies_parsed_at":"2025-04-20T15:15:21.049Z","dependency_job_id":null,"html_url":"https://github.com/technote-space/jquery.marker-animation","commit_stats":null,"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technote-space%2Fjquery.marker-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technote-space%2Fjquery.marker-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technote-space%2Fjquery.marker-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/technote-space%2Fjquery.marker-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/technote-space","download_url":"https://codeload.github.com/technote-space/jquery.marker-animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252860102,"owners_count":21815465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlighter","jquery","marker-animation"],"created_at":"2024-10-03T16:27:19.468Z","updated_at":"2025-05-07T10:34:15.379Z","avatar_url":"https://github.com/technote-space.png","language":"JavaScript","funding_links":["https://paypal.me/technote0space"],"categories":[],"sub_categories":[],"readme":"# jQuery Marker Animation\n\n[![npm version](https://badge.fury.io/js/jquery.marker-animation.svg)](https://badge.fury.io/js/jquery.marker-animation)\n[![CI Status](https://github.com/technote-space/jquery.marker-animation/workflows/CI/badge.svg)](https://github.com/technote-space/jquery.marker-animation/actions)\n[![codecov](https://codecov.io/gh/technote-space/jquery.marker-animation/branch/master/graph/badge.svg)](https://codecov.io/gh/technote-space/jquery.marker-animation)\n[![CodeFactor](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation/badge)](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/technote-space/jquery.marker-animation/blob/master/LICENSE)\n\n*Read this in other languages: [English](README.md), [日本語](README.ja.md).*\n\n蛍光ペンで塗るようなアニメーションを表示するjQueryプラグイン\n\n[デモ](https://technote-space.github.io/jquery.marker-animation/)\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\u003cdetails\u003e\n\u003csummary\u003eDetails\u003c/summary\u003e\n\n- [スクリーンショット](#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88)\n  - [動作](#%E5%8B%95%E4%BD%9C)\n- [Installation](#installation)\n  - [npmから利用](#npm%E3%81%8B%E3%82%89%E5%88%A9%E7%94%A8)\n  - [ダウンロードして利用](#%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E5%88%A9%E7%94%A8)\n  - [WordPressで利用](#wordpress%E3%81%A7%E5%88%A9%E7%94%A8)\n- [基本的な使用方法](#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)\n- [オプション](#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3)\n  - [color](#color)\n  - [thickness](#thickness)\n  - [duration](#duration)\n  - [delay](#delay)\n  - [font_weight](#font_weight)\n  - [repeat](#repeat)\n  - [stripe](#stripe)\n  - [rtl](#rtl)\n- [個別に値を指定する方法](#%E5%80%8B%E5%88%A5%E3%81%AB%E5%80%A4%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)\n  - [例1: 色の変更](#%E4%BE%8B1-%E8%89%B2%E3%81%AE%E5%A4%89%E6%9B%B4)\n  - [例2: 複数設定](#%E4%BE%8B2-%E8%A4%87%E6%95%B0%E8%A8%AD%E5%AE%9A)\n\n\u003c/details\u003e\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## スクリーンショット\n### 動作\n![動作](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/marker-animation.gif)\n\n## Installation\n### npmから利用\nhttps://www.npmjs.com/package/jquery.marker-animation\n\n```bash\nnpm install --save jquery.marker-animation\n```\n\n### ダウンロードして利用\n[リリースバージョン](https://github.com/technote-space/jquery.marker-animation/releases/latest/download/index.js)をダウンロードして\n```html\n\u003cscript type=\"text/javascript\" src=\"/assets/jquery.marker-animation/index.js\"\u003e\u003c/script\u003e\n```\nのように読み込む\n\n### WordPressで利用\nプラグインとして利用できるようにしました。  \n\n[GitHub](https://github.com/technote-space/marker-animation)\n\n## 基本的な使用方法\n```html\n文章文章文章\u003cspan class=\"marker-animation\"\u003e強調したい文字\u003c/span\u003e文章文章文章文章\n```\n\n```html\n\u003cscript\u003e\n    $('.marker-animation').markerAnimation();\n\u003c/script\u003e\n```\n\n## オプション\n### color\nマーカーの色を指定\n```javascript\n$('.marker-animation').markerAnimation({\n    color: '#fe9'\n});\n```\n\n### thickness\nマーカーの太さを指定\n```javascript\n$('.marker-animation').markerAnimation({\n    thickness: '.6em'\n});\n```\n\n### duration\nマーカーを塗るのを完了するまでの時間を指定\n```javascript\n$('.marker-animation').markerAnimation({\n    duration: '2s'\n});\n```\n\n### delay\nマーカーを塗るのを開始するまでの時間を指定\n```javascript\n$('.marker-animation').markerAnimation({\n    duration: '.1s'\n});\n```\n\n### font_weight\n文字の太さを指定\n```javascript\n$('.marker-animation').markerAnimation({\n    font_weight: 'bold'\n});\n```\nデフォルトは太字です。  \n太字にしない場合はnullを設定してください。\n\n### repeat\nアニメーションを繰り返すかどうかを指定\n```javascript\n$('.marker-animation').markerAnimation({\n    repeat: false\n});\n```\ntrueにすると一度画面から外れて再び表示された際に再度アニメーションが実行されます。\n\n### stripe\nストライプデザインにするかどうかを指定\n```javascript\n$('.marker-animation').markerAnimation({\n    stripe: false\n});\n```\nこれが `true` の場合はアニメーションなしの動作になります。  \n![stripe](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/stripe.png)\n\n### rtl\n右書き動作にするかどうかを指定\n```javascript\n$('.marker-animation').markerAnimation({\n    rtl: false\n});\n```\n\n## 個別に値を指定する方法\n`data-ma_[オプション名]` の形式で個別にオプションを指定することが可能です。\n### 例1: 色の変更\n```html\n文章文章文章\u003cspan class=\"marker-animation\" data-ma_color=\"red\"\u003e強調したい文字\u003c/span\u003e文章文章文章文章\n```\nこの例ではマーカーの色が赤色になります。\n### 例2: 複数設定\n```html\n文章文章文章\u003cspan class=\"marker-animation\" data-ma_repeat=\"true\" data-ma_font_weight=\"null\" data-ma_delay=\"2s\"\u003e強調したい文字\u003c/span\u003e文章文章文章文章\n```\nこの例では\n* 画面から外れるごとにアニメーションが実行\n* 太文字ではない\n* ２秒遅れてアニメーション開始\n\nが設定されます。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechnote-space%2Fjquery.marker-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechnote-space%2Fjquery.marker-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechnote-space%2Fjquery.marker-animation/lists"}