Tap or move your mouse around to animate the particles, polygons & images.
Customizion, instructions come with the package :)
Tutorial
How to customize the interactive background:CHANGING BACKGROUND COLOR
- To change background color, go to the Embed element, under Code field.
- Find the <style> tag, look for this code:<style>- Change the color hex code of
#particles-js {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000000;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
</style>background-color: #000000; to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING COLOR OF PARTICLE
- To change color of the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag:<script>- Change the color hex code of
particlesJS("particles-js", {
particles: {
number: {
value: 50,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},color: { #ffffff },; to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING COLOR OF PARTICLE LINE LINKS
- To change color of the line linking the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag, and find the line\_linkedproperty:line\_linked: {- Change the color hex code of
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},color: "#ffffff", to the the one you need. Use the color picker on Google if you need help getting the hex code.---------------------------------------------------------------------------------CHANGING SHAPES OF THE PARTICLES
- To change shapes of the particles, go to the Embed element, under Code field.
- Find the <script> tag after the </style> tag, and find the shapeproperty:shape: {- Delete the shapes you do not want, e.g. if you just want circle and star, you delete the values till it looks like this:
type: ["circle", "triangle", "image", "edge", "polygon", "star"],
stroke: {
width: 0,
color: "#ffffff"
},shape: {- To use an image, delete the values till it's like that:
type: ["circle", "star"],
...shape: {- Scroll down and add the direct URL of the image here (should end with a .jpg, .png or .svg). Adjust the width and height for size of image.
type: ["image"],
...image: {---------------------------------------------------------------------------------DOCUMENTATION FOR PARTICLES.JS
src: "https://i.ibb.co/vZPty6g/Minimalist-Website-Launch-Computer-Mockup-Instagram-Post-6.png",
width: 100,
height: 100
}
- For more info, read the documentation for particles.js here:https://github.com/VincentGarreau/particles.js
CUSTOMIZING ACCORDION APPEARANCE
- Changing Accordion Background Color
- Locate the .V-accordion class in the <style> section.
- Modify the background-color property to change the accordion's background color. For example, to set it to light blue, change it to background-color: rgba(173, 216, 230, 0.66);.---------------------------------------------------------------------------------- Adjusting Accordion Border Radius
- In the .V-accordion class, find the border-radius property.
- Change the value to adjust the corner roundness. For a more rounded look, increase the value, e.g., border-radius: 20px;.---------------------------------------------------------------------------------- Changing Accordion Hover Color
- Locate the .V-accordion_trigger:hover class.
- Modify the background-color property to change the color when the accordion trigger is hovered over. For instance, to change to a darker shade, use background-color: rgba(230, 230, 230, 0.66);.---------------------------------------------------------------------------------MODIFYING ACCORDION BEHAVIOR
- Changing Accordion Icon Rotation
- In the .V-accordion_trigger.open .V-accordion_trigger-icon class, you can alter the transform: rotate(45deg); line to change the degree of rotation when the accordion is open. For a full rotation, use transform: rotate(180deg);.---------------------------------------------------------------------------------- Adjusting Accordion Transition Speed
- Find the transition property within .V-accordion_trigger-icon and .V-accordion_trigger.
- Modify the duration to speed up or slow down the animation. For example, use transition: background-color 0.5s ease; to make the transition slower.---------------------------------------------------------------------------------CUSTOMIZING ACCORDION CONTENT
- Changing Font Family
- In the #app ID, the font-family is set to use "Sen". To change it, replace Sen, sans-serif; with your desired font family, ensuring it is properly imported or available in your project.---------------------------------------------------------------------------------- Customizing Text Color
- To change the text color within the accordion body, locate the .V-accordion_body p selector.
- Modify the color property to your desired hex color, for example, color: #333333; for a darker grey.---------------------------------------------------------------------------------ADDING MORE ACCORDION ITEMS
To add more items to your accordion:
1. Duplicate one of the <accordion> elements within the <div id="app"> container.
2. Change the title attribute and inner <p> content to reflect the new FAQ item you wish to add.Remember, when making changes to CSS properties like colors or dimensions, using a color picker tool can help you select the exact values you need. For Vue.js specific modifications, familiarity with Vue's reactivity system and component structure will be beneficial.