Is there a way in CSS to create a fading trail behind a moving particle?

I have successfully made the particle move around as desired, but now I want to create a fading trail behind it. I'm unsure of how to achieve this effect.

Can this be accomplished with CSS alone, or do I need to incorporate jQuery?

Check out the demo here: LINK

#object{
    position: absolute;
    bottom:-2em;
    left:0;
    right:0;
    margin:0 auto;
    width: 10px;
    height: 10px;
    background: red;    

    -webkit-animation: myOrbit 6s linear infinite; 
       -moz-animation: myOrbit 6s linear infinite; 
         -o-animation: myOrbit 6s linear infinite; 
            animation: myOrbit 6s linear infinite;   
}
@-webkit-keyframes myOrbit {
    0%  { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@-moz-keyframes myOrbit {
    0%  { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg6) scale(.60); }
    50%  { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@-o-keyframes myOrbit {
        0%  { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@keyframes myOrbit {
    0%  { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}
javascriptjqueryhtmlcss

Answer №1

While exploring a similar concept, I stumbled upon this question. I tweaked my approach to align it with your solution. It may not be a perfect fit for your project, but experimentation is always enjoyable.

http://jsfiddle.net/2wu95yxr/3/

const elem = document.getElementById("element");

class ElementEffect {
    constructor(container) {
        this.div = document.createElement("div");
        this.div.classList.add("effect");
        this.div.classList.add("sparkle");
        this.div.id = "effect-" + Date.now();
        container.appendChild(this.div);

        setTimeout(() => { // remove effect
            if (this.animationId) clearInterval(this.animationId);
                this.div.remove();
        }, 400);
    }

    move(speed = 1) {
        const angle = Math.PI * Math.random();

        this.animationId = setInterval(() => {
            let left = +this.div.style.left.replace("px",'');
            let top = +this.div.style.top.replace("px",'');

            left += Math.sin(angle) * speed;
            top += Math.cos(angle) * speed;

            this.div.style.left = left + "px";
            this.div.style.top = top + "px";
        }, 10);
    }
}

const effectGenerator = function(target) {
    const boundingRect = target.getBoundingClientRect();
    const effect = new ElementEffect(target.parentElement);
    effect.div.style.left = boundingRect.left + "px";
    effect.div.style.top = boundingRect.top + "px";
    effect.move(0.4);

    setTimeout(() => {
        effectGenerator(target);
    }, 100);
};
effectGenerator(elem);

Answer №2

Is this the kind of effect you're looking for?

  • Adjusted keyframe animation to ensure proper orbiting
  • Introduced a new animation to gradually fade out the 'trail' over time

Does this align with your expectations?

#object{
position: absolute;
top: 200px;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;    
-webkit-animation: myOrbit 6s linear infinite; 
-moz-animation: myOrbit 6s linear infinite; 
-o-animation: myOrbit 6s linear infinite; 
animation: myOrbit 6s linear infinite;
}

#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite; 
-moz-animation: myOrbit-fadeout 6s linear infinite; 
-o-animation: myOrbit-fadeout 6s linear infinite; 
animation: myOrbit-fadeout 6s linear infinite;
}


@-webkit-keyframes myOrbit {
0%  { -webkit-transform: rotate(0deg) translateY(200px); }
25%  { -webkit-transform: rotate(90deg) translateY(200px); }
50%  { -webkit-transform: rotate(180deg) translateY(200px); }
75%  { -webkit-transform: rotate(270deg) translateY(200px); }
100%  { -webkit-transform: rotate(360deg) translateY(200px); }
}

@-moz-keyframes myOrbit {
0%  { -moz-transform: rotate(0deg) translateY(200px); }
25%  { -moz-transform: rotate(90deg) translateY(200px); }
50%  { -moz-transform: rotate(180deg) translateY(200px); }
75%  { -moz-transform: rotate(270deg) translateY(200px); }
100%  { -moz-transform: rotate(360deg) translateY(200px); }
}

@-o-keyframes myOrbit {
0%  { -o-transform: rotate(0deg) translateY(200px); }
25%  { -o-transform: rotate(90deg) translateY(200px); }
50%  { -o-transform: rotate(180deg) translateY(200px); }
75%  { -o-transform: rotate(270deg) translateY(200px); }
100%  { -o-transform: rotate(360deg) translateY(200px); }
}

@keyframes myOrbit {
0%  { transform: rotate(0deg) translateY(200px); }
25%  { transform: rotate(90deg) translateY(200px); }
50%  { transform: rotate(180deg) translateY(200px); }
75%  { transform: rotate(270deg) translateY(200px); }
100%  { transform: rotate(360deg) translateY(200px); }
}

@-webkit-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-moz-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-o-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to use Javascript to retrieve a variable from a remote PHP file?

I am trying to retrieve a variable from a remote PHP file using JavaScript in my phonegap application. The same origin policy doesn't apply here, so I believe I need to use JSON/AJAX for this task. However, I have been unable to find any tutorials tha ...

javascriptphpajaxjsoncordova

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

htmljquerycsslaraveljquery-ui

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

cssreactjstypescriptmaterial-ui

Tips on displaying an array of elements as a <Dialog> within a <List>

I am currently developing a <ElementList> component that is designed to accept an array of elements through props and create a <List>, with each <ListItem> representing an element in the array. I have also included a separate component ca ...

javascriptarraysreactjsmaterial-ui

Uncovering the unique properties of custom Items in MUI v5 - RichTreeView: A Step-by-Step Guide

Can custom item properties received asynchronously with MUI - RichTreeView be exposed inside a custom treeItem? For instance, how can the customProperty1 and customProperty2 be accessed within the CustomTreeItem? The console.log to props only shows defaul ...

javascriptmaterial-uitreeview

What is causing this code to run immediately upon the addition of Promise logic?

The coding scenario written below was supposed to have two 4-second delays. However, when the code is run, it executes immediately. It seems that there might be a lack of understanding on my part regarding some basic concept, or perhaps there's a hidd ...

javascriptpromisesettimeout

Oops! The Vue star rating encountered an error because it couldn't read the length property of an undefined value at line 26 of listToStyles.js

Encountering an issue with the getRating function in Vue while using the Vue-star-rating package in Laravel. Unsure of what the problem may be. getRating(){ var pathArray = location.pathname.split('/'); v ...

javascriptphplaravelvue.js

Troubleshooting issue: AngularJS - Updating variables in view without utilizing scope

I seem to be facing an issue with my Angular code. Some variables are not updating after their values have been changed. While my header updates correctly, the footer remains stuck with its initial values. Here is a snippet of my code: <body> < ...

javascriptangularjsvariablesupdating

Top method for customizing w2ui grid appearance

While utilizing the w2ui grid to showcase data in a table, I've found it to be quite effective. However, I'm not entirely happy with the appearance of the table itself. Are there any methods available for styling the table that don't involve ...

cssw2ui

Sorting numeric ID columns in a Bootstrap table

I've implemented the Boostrap table to display data from my database on my admin page. I saved an array into a json file, and then used the following code to populate the table: <div class=\"row\"> <div class=&bsol ...

javascriptbootstrap-4bootstrap-table

Exploring the Power of Global Variables in jQuery

I successfully implemented the FooTable responsive table plugin and now I am working on setting up a PHP script to retrieve data from PostgreSQL and return it as a JSON encoded array. Although everything seems to be functioning well, I'm encountering ...

phpjqueryjsonajaxfootable

Show a notification every time an SQL update is completed successfully

Utilizing PHP, I am updating the item table by iterating through a result set. while (!$rs->EOF) { $conn->Execute("UPDATE [table] SET qty='".$quantity."' WHERE locn ='".$locn."' AND pdln ='".$pdln."'") ...

phpjquerysql

Creating an object array in JavaScript with an invalid index initialization

As an illustration, I start by creating a constructor and initializing an array of objects in JavaScript. function SomeConstruct(val1, val2) { this.val1= val1; this.val2= val2; } var someCons= new Array(); someCons[0] = new SomeConstruct(12, 40) ...

javascriptarraysobject

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Using AJAX asynchronously in JavaScript commands synchronization

After researching similar questions on SO without finding a satisfactory answer, I encountered an issue with synchronous AJAX calls in my HTML/JavaScript page. Mozilla has deprecated some functionality related to synchronous requests, making it necessary f ...

javascriptajaxasynchronous

The content from http://x.com/js/bootstrap.min.js.map could not be retrieved due to an HTTP error with a status code 404, showing a net::ERR_HTTP_RESPONSE_CODE_FAILURE

I'm working on an HTML CSS Website and encountering a consistent error. Some solutions suggest using Developer Tools in the browser to resolve it, but after trying multiple browsers, I suspect the issue lies within the code itself. Can anyone offer as ...

javascripthtmlcssbootstrap-4

Encountering a challenge in developing a personalized, digital keyboard with CSS grid in React where some buttons are not appearing on the screen

Attempting to develop an on-screen keyboard for a React application using CSS grid to partition the containing element. Despite setting the necessary display properties and grid template, only 4 buttons are appearing, with most of them hidden below one ano ...

cssreactjskeyboard

Get dynamic dropdown values that have been saved using Ajax

Within my form, I have a dynamic drop-down menu containing both "Category" and "Subcategory" options. The dropdown is functioning correctly and I have successfully stored the values in the "registrations" table. However, when I try to retrieve these values ...

jqueryajaxlaravel

In React Router v6, the homepage is continuously rendered as "/"

I am having issues implementing a router in my react-create-app. It always renders "/" and displays either the Home or SignIn page. How can I resolve this problem? function AppRouter({ isLoggedIn, user }) { return( <Router> <Routes&g ...

javascriptreactjsreact-router

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend