circlePop.js
The project was to create a pure JavaScript plugin to create circular transitions
using the anime.js library to underlying content/dynamically loaded content from
click. Users have the option to have the circle spawn from the click point, or one
of the four cardinal directions.
skills
- web development
technologies
- vscode
- anime.js
- html5 canvas
- css
- javascript
html
The HTML for the project can be both advanced and easy. The markup for loading dynamic
content consists of two large divs. One holds placeholder content and sectionals, while
the other holds all the text information that will be used to replace the placeholder
information.
The content that is being displayed is under a div called item-box , and all the item boxes are within a larger container. The item box is used entirely to hold the color of the displayed box on the main screen. Within the box is the most important div, called composition-wrapper. The class composition-wrapper is necessary for the script, but could be changed if the script is changed. The secondary class is a choice between: click-splash, click-top, click-bottom, click-right, click-left. This class indicates where the circle will spawn from, the four directions being self-explanatory, and circlesplash being from the cursor point. The composition-wrapper will also house the data set, datacolor, used to set the color of the circle spawned
The content that is being displayed is under a div called item-box , and all the item boxes are within a larger container. The item box is used entirely to hold the color of the displayed box on the main screen. Within the box is the most important div, called composition-wrapper. The class composition-wrapper is necessary for the script, but could be changed if the script is changed. The secondary class is a choice between: click-splash, click-top, click-bottom, click-right, click-left. This class indicates where the circle will spawn from, the four directions being self-explanatory, and circlesplash being from the cursor point. The composition-wrapper will also house the data set, datacolor, used to set the color of the circle spawned
javascript
The JavaScript for this project is the main portion of the time spent. To begin, a
skeleton function is built to handle the canvas drawing beginning with a page ready
check. Custom selector and listener functions are made for ease.
When the screen is ready to fire a function, properties are given to the screen overlay grouping for canvas selection, context, size, color, and beginning starting position.
When the canvas overlay is given the command to show, options are declared which give the canvas a block display, logs it’s starting position, and fills the canvas with the dataset color from the starting position. A reverse property is given when the canvas is told to hide, which resets is background color and returns it to it’s starting position. There is also an important line here to make sure the run completed by comparing the options.complete property to the callback function which will fail it by giving it a null argument if incomplete.
Next section animates the circle over 750ms. The function grabs the position of the click and the default start radius (0) and animates the circle using anime.js. The anime.js function animates the circle over the time default cover time, or the time it would take for the function to reach the target radius/2, whichever is bigger.
Then grabs the function for filling the radius. Uses a Pythagorean theorem equation to calculate the radius of a circle within a rectangle based on the position of a click within that rectangle. The position is gathered and fed from a separate function that gets the position of a click event within the bounding rectangle of the element.
A draw function is then ran with all the previous necessary information and draws the circle once a box is clicked. Click events are added for the underlying composition wrappers and back button to run a show or hide function respectively.
When the screen is ready to fire a function, properties are given to the screen overlay grouping for canvas selection, context, size, color, and beginning starting position.
When the canvas overlay is given the command to show, options are declared which give the canvas a block display, logs it’s starting position, and fills the canvas with the dataset color from the starting position. A reverse property is given when the canvas is told to hide, which resets is background color and returns it to it’s starting position. There is also an important line here to make sure the run completed by comparing the options.complete property to the callback function which will fail it by giving it a null argument if incomplete.
Next section animates the circle over 750ms. The function grabs the position of the click and the default start radius (0) and animates the circle using anime.js. The anime.js function animates the circle over the time default cover time, or the time it would take for the function to reach the target radius/2, whichever is bigger.
Then grabs the function for filling the radius. Uses a Pythagorean theorem equation to calculate the radius of a circle within a rectangle based on the position of a click within that rectangle. The position is gathered and fed from a separate function that gets the position of a click event within the bounding rectangle of the element.
A draw function is then ran with all the previous necessary information and draws the circle once a box is clicked. Click events are added for the underlying composition wrappers and back button to run a show or hide function respectively.
The show compositions function runs the showSource function and prepareSource function if there is not already an active composition.
The main showSource function loops through a switch statement testing true against whether a box has a certain class relating to the spawn point of the circle. If it finds a hit, it adds a active class to the given composition, and an indicator class to the html tag, and updates the current hash for loading content into it, and gets the spawn position based on a later function. It then prepares all the elements for the overlay by resetting them back to their default values before loading them in using anime.js.
The hideSource function has the same functionality, but in reverse, resetting the circle back to it’s starting position and hiding the overlay elements and revealing the main page elements.
The update hash and related functions grab elements position relative to siblings and assigns it an index hash number. This index hash can be used in other functions to reference that specific element, and updates dynamically as more are added.
Finally the script ends with the spawn positions and centering functions. The spawn positions take centering or touch locations from the centering functions and returns the necessary x,y position for the circle to spawn from.
The main showSource function loops through a switch statement testing true against whether a box has a certain class relating to the spawn point of the circle. If it finds a hit, it adds a active class to the given composition, and an indicator class to the html tag, and updates the current hash for loading content into it, and gets the spawn position based on a later function. It then prepares all the elements for the overlay by resetting them back to their default values before loading them in using anime.js.
The hideSource function has the same functionality, but in reverse, resetting the circle back to it’s starting position and hiding the overlay elements and revealing the main page elements.
The update hash and related functions grab elements position relative to siblings and assigns it an index hash number. This index hash can be used in other functions to reference that specific element, and updates dynamically as more are added.
Finally the script ends with the spawn positions and centering functions. The spawn positions take centering or touch locations from the centering functions and returns the necessary x,y position for the circle to spawn from.
css
Just general styling to make stuff look nice. The styling has little to no effect on the scripts themselves, other than perhaps the overlay being in a fixed position, and the spawnbox & canvas being fixed and spanning 100% of the view height and width.
view the live site here