https://github.com/teomandeniz/selection_js

Advanced HTML Text Selection Visual Effects
https://github.com/teomandeniz/selection_js

css html html5 js style svg web

Last synced: about 2 months ago
JSON representation

Advanced HTML Text Selection Visual Effects

• Host: GitHub
• URL: https://github.com/teomandeniz/selection_js
• Owner: TeomanDeniz
• License: mit
• Created: 2025-04-09T17:08:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-09T17:37:46.000Z (about 1 year ago)
• Last Synced: 2025-04-09T18:38:35.289Z (about 1 year ago)
• Topics: css, html, html5, js, style, svg, web
• Language: JavaScript
• Homepage: https://maximum-tension.com
• Size: 15.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Selection JS

This library enables a custom selection effect when a user selects text inside specific elements. You can also trigger an optional animation when the user presses Ctrl+C to copy the selected content.

![Preview_1](https://github.com/user-attachments/assets/e039186d-03d0-4639-a941-8e45f0fb76ec)

![Preview_2](https://github.com/user-attachments/assets/533e179e-586d-4fd8-8dd0-86f5791a366d)

![Preview_3](https://github.com/user-attachments/assets/904667b5-a587-40e4-99cf-2f3712d15cff)

https://github.com/user-attachments/assets/ef423119-6afd-4fa4-b400-94299f475748

## Features

- Highlight effect using customizable colored overlays

- `CTRL` + `C` copy animations for specific elements

- Lightweight and styleable with CSS

- Works with dynamically added elements, as long as they exist before user selection

## Installation

1. Include the CSS in your HTML:

```HTML

```

2. Include the JavaScript file just before the closing `

  


   
Lorem ipsum with a custom CTRL + C animation. dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae libero bibendum tincidunt.

   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae libero bibendum tincidunt.

   
Phasellus euismod, justo at scelerisque tincidunt, libero erat fermentum libero, nec tincidunt lorem arcu nec libero.

   
Phasellus euismod, justo at scelerisque tincidunt, libero erat fermentum libero, nec tincidunt lorem arcu nec libero.

  


  


  

   

    

     

     

     

    

   

  

  

  

function

	on_copy_animation(SELECTION_COLOR, SELECTION_BOX_ELEMENT)

{

	const ORG_LEFT = SELECTION_BOX_ELEMENT.style.left;

	const ORG_TOP = SELECTION_BOX_ELEMENT.style.top;

	const ORG_WIDTH = SELECTION_BOX_ELEMENT.style.width;

	const ORG_HEIGHT = SELECTION_BOX_ELEMENT.style.height;


	const RECT = SELECTION_BOX_ELEMENT.getBoundingClientRect();

	SELECTION_BOX_ELEMENT.style.backgroundColor = "#FFF";

	setTimeout(

		function()

		{

			SELECTION_BOX_ELEMENT.style.backgroundColor = SELECTION_COLOR; 

		},

		100

	);

}

SOFT_SELECTION("#E84A8C");