https://github.com/qc20/credit-link

This project creates an interactive particle animation. When users hover over or touch the text (on mobile devices), the particles react and move organically. Clicking or tapping the text triggers an explosion effect before redirecting to a specified URL.
https://github.com/qc20/credit-link

author-link cite credit-link css html hyperlink interaction-design interactive javascript link noise particles physics scatter

Last synced: 2 days ago
JSON representation

This project creates an interactive particle animation. When users hover over or touch the text (on mobile devices), the particles react and move organically. Clicking or tapping the text triggers an explosion effect before redirecting to a specified URL.

• Host: GitHub
• URL: https://github.com/qc20/credit-link
• Owner: QC20
• License: mit
• Created: 2024-07-15T11:20:38.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-18T13:02:34.000Z (6 months ago)
• Last Synced: 2024-11-08T12:09:15.148Z (about 2 months ago)
• Topics: author-link, cite, credit-link, css, html, hyperlink, interaction-design, interactive, javascript, link, noise, particles, physics, scatter
• Language: JavaScript
• Homepage: https://qc20.github.io/credit-link/
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Interactive Particle Credit Link

This project creates an interactive particle animation that forms the text "Jonas Kjeldmand Jensen". When users hover over or touch the text (on mobile devices), the particles react and move organically. Clicking or tapping the text triggers an explosion effect before redirecting to a specified URL.

## Features

- Responsive design that works on both desktop and mobile devices

- Interactive particle animation that reacts to mouse/touch input

- Text formed by particles that disperse and re-form

- Explosion effect on click/tap, followed by a page redirect

- Smooth performance optimized for various screen sizes and pixel densities

## Technical Details

The project consists of three main files:

1. `index.html`: The main HTML file that sets up the canvas element.

2. `credit.js`: The JavaScript file containing all the logic for the particle animation, interactivity, and explosion effect.

3. `credit.css`: The CSS file that styles the canvas and ensures it covers the full viewport.

The animation is created using HTML5 Canvas and vanilla JavaScript. It uses requestAnimationFrame for smooth animation and is optimized for performance on both desktop and mobile devices.

## Customization

You can customize the following aspects of the animation:

- Text content: Change the 'Jonas Kjeldmand Jensen' string in the `init()` function.

- Redirect URL: Modify the `redirectURL` constant at the top of the JavaScript file.

- Particle behavior: Adjust parameters like `maxDistance`, `returnForce`, and explosion speed in the `Particle` class methods.

- Visual style: Modify particle size, color, and density in the `Particle` class constructor and `draw()` method.

## Browser Compatibility

This animation should work on all modern browsers that support HTML5 Canvas and ES6 JavaScript features. It has been optimized for both desktop and mobile devices.

## Performance Considerations

The animation adjusts the number of particles based on the device's pixel ratio to maintain good performance across different devices. On high-density displays, it may create fewer particles to ensure smooth animation.

Enjoy the interactive particle text animation! Feel free to use, modify, and expand upon this project for your own creative purposes.