Create ripple effects with PixiJS

3 min


[ad_1]


There are a lot of interesting effects that can be added to a page to increase engagement, but it is important to pick effects that combine well with the overall aesthetic of a site. Here we demonstrate how to introduce displacement ripples with JavaScript. Check out MustafaCelik for a great example of the effect in action.
1. Create ripples
In order to create ripple effects PixiJS will be used since this provides simple displacement effects. Here the JavaScript code sets up the variables needed and loads the images to create the effect. Once the images are loaded the ‘setup’ function is called.
2. Create the displacement
In the ‘setup’ function the displacement sprite is created that will create the ripple effect and this is added to a displacement filter. It’s then set to move its anchor point to the centre of the image and positioned on the screen.
3. Finish the setup
To finish off the ‘setup’ function, the displacement filter scale is set and the background positioned. Notice the scale is ‘0’ for the displacement, that’s because it will be set to a height as soon as the mouse moves.
4. Get the mouse
The next code just grabs the position of the mouse on the x-axis whenever the mouse moves. This will be used to trigger the amount of ripple displacement effect when the user moves their mouse. More movement will make the ripple bigger.
5. Make it move
The ‘loop’ function continually updates the screen. A velocity for the x-axis is worked out using the position of the mouse and the ripple. This is then mapped onto the filter to give a value between 0 and 120.
6. Finish the code
At the end of the ‘loop’ function the sprite is scaled to the amount of displacement and filter scaled to the amount of depth it should have. Finally, the map function is declared that maps value ranges to new values.
Find the full code for this tutorial on FileSilo.This article originally appeared in Web Designer magazine. Subscribe here.
Learn more at Generate London 2018
Get to see Sarah Parmenter, Bruce Lawson, Richard Rutter and more talk at Generate London 2018
Special effects and beyond is where the web is heading and Generate speaker Marpi Marcinowski’s creative work revolves around building 3D worlds, creating immersive AR, VR experiences and storytelling in style with a difference.His talk will take you on a journey through all interactive media and technologies and look at it from the perspective of the user. Don't miss out, get your ticket nowRelated articles:
Is it okay to build sites that rely on JavaScript?Perfect JavaScript in 1,000 projectsHow to manage CSS classes with JavaScript

[ad_2]

Source link


Like it? Share with your friends!

0 Comments

What's Your Reaction?

Naughty Naughty
4
Naughty
Cry Cry
2
Cry
Cute Cute
2
Cute
LOL LOL
0
LOL
Love Love
6
Love
OMG OMG
6
OMG
WIN WIN
5
WIN
WTF WTF
4
WTF
Wow Wow
2
Wow
Angry Angry
6
Angry
Damn Damn
4
Damn
Dislike Dislike
4
Dislike
Like Like
2
Like
Huh Huh
6
Huh
Choose A Format
Story
Formatted Text with Embeds and Visuals
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Ranked List
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo or Vine Embeds

Send this to a friend