iondrimba / interactive-repulsive-effect Goto Github PK

:chocolate_bar: An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".

Home Page: https://tympanus.net/codrops/?p=36627

License: Other

HTML 9.10% JavaScript 79.74% SCSS 11.16%

webgl threejs demo tutorial repulsion codrops javascript creative motion animation

interactive-repulsive-effect's Introduction

Interactive Repulsion Effect with Three.js

A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot "Holographic-Interactions". By Ion D. Filho.

Article on Codrops

Demo

Requirements

nodejs 14+

first-demo/ and second-demo/
  src/
    scripts/...
    styles/...
    index.html
    index.js
    config files...
LICENSE
README.md

Installation

cd first-demo or second-demo
npm install
npm start

Build

cd first-demo or second-demo
npm run build

output folder

first-demo/ and second-demo/
  public/
    app.##hash##.js
    app.##hash##.css
    index.html

Credits

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Ion Drimba Filho: Twitter, Codepen, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

interactive-repulsive-effect's People

Contributors

Stargazers

Watchers

interactive-repulsive-effect's Issues

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

Go to the Settings page of either your own account or the organization you've used
Go to "Installed Integrations"
Click the "Configure" button on the Depfu integration
Remove this repo (iondrimba/interactive-repulsive-effect) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.