Crafting a dynamic CSS 'trail' effect when hovering

Question

Crafting a dynamic CSS 'trail' effect when hovering

I am attempting to create a visually appealing CSS menu using primarily CSS, with just a touch of jQuery as well:

Here is the concept:

+------------------------+
|                        |
|                        |
|         +---+          |
|         |   |          |
|         |___|          | <-- Hover over this central piece
|                        |
|                        |
|                        |
+------------------------+

+------------------------+
|     _                  |
|    |\                  | <-- All elements move towards the top of the screen
|      \  +---+          |
|         |   |          |
|         |___|          |
|                        |
|                        |
|                        |
+------------------------+

...and so on...

The plan involves four div children, each positioned at 90-degree intervals from the center. However, I am trying to figure out a way to determine the angle/position in jQuery, which has proven to be challenging.

Similar design:

If there were six child divs, they would be evenly spaced out at 60-degree intervals.

I will also be incorporating animations between them, leading me to experiment with rotations, but I have not been successful:

Fiddle

My questions are:

(A): How can I rotate the divs by a specified angle or distance relative to their parent using jQuery?
(B): How can I reset the animation upon hover out?

Other similar implementations:

Here
This one, although it utilizes Sass (which is not desired)

jquery css css-position css-transitions

Answer 1

Answer №1

Trying out a different method can yield a slightly altered result. Adjusting the timing of the setTimeout and transition can change the behavior.

Check out the code snippet here

+ function() {
  var to;
  $(".wrap").on('mouseenter', function() {
    var circles = $(this).children();
    var degree = (2 * Math.PI) / circles.length; //calc delta angle
    var transforms = [];

    // Calculate the position for each circle
    circles.each(function(index) {
        var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
        var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));

      transforms.push('translate(' + x + 'px,' + y + 'px)');
    });

    // Function to moves all the circles
    // We'll pop a circle each time and than call this function recursively
    function moveCircles() {
      var transform = transforms.shift();
      circles.css('transform', transform);

      circles.splice(0, 1);
      if (circles.length) to = setTimeout(moveCircles, 400);
    }

    moveCircles();
  });

  $(".wrap").on('mouseleave', function() {
    var circles = $(this).children().css('transform', '');
    clearTimeout(to);
  });
}();

   .wrap {
     height: 300px;
     width: 300px;
     background: red;
     position: relative;
     transform-origin: center center;
     transition: all 0.8s;
   }
   .circle {
     transition: all 0.8s;
     position: absolute;
     height: 50px;
     width: 50px;
     text-align: center;
     line-height: 50px;
     top: calc(50% - 25px);
     left: calc(50% - 25px);
     background: tomato;
     border-radius: 50%;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="circle">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
  <div class="circle">4</div>
  <div class="circle">5</div>
  <div class="circle">6</div>
</div>

Answer 2

Trying out a different method can yield a slightly altered result. Adjusting the timing of the setTimeout and transition can change the behavior.

Check out the code snippet here

+ function() {
  var to;
  $(".wrap").on('mouseenter', function() {
    var circles = $(this).children();
    var degree = (2 * Math.PI) / circles.length; //calc delta angle
    var transforms = [];

    // Calculate the position for each circle
    circles.each(function(index) {
        var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
        var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));

      transforms.push('translate(' + x + 'px,' + y + 'px)');
    });

    // Function to moves all the circles
    // We'll pop a circle each time and than call this function recursively
    function moveCircles() {
      var transform = transforms.shift();
      circles.css('transform', transform);

      circles.splice(0, 1);
      if (circles.length) to = setTimeout(moveCircles, 400);
    }

    moveCircles();
  });

  $(".wrap").on('mouseleave', function() {
    var circles = $(this).children().css('transform', '');
    clearTimeout(to);
  });
}();

   .wrap {
     height: 300px;
     width: 300px;
     background: red;
     position: relative;
     transform-origin: center center;
     transition: all 0.8s;
   }
   .circle {
     transition: all 0.8s;
     position: absolute;
     height: 50px;
     width: 50px;
     text-align: center;
     line-height: 50px;
     top: calc(50% - 25px);
     left: calc(50% - 25px);
     background: tomato;
     border-radius: 50%;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="circle">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
  <div class="circle">4</div>
  <div class="circle">5</div>
  <div class="circle">6</div>
</div>

Answer 3

Answer №2

function rotateImage($this, $circle, angle) {
    $this.animate({
        rotation: angle
    }, {
        step: function(now, fx) {
            $this.css({
                transform: 'rotate(' + now + 'deg)'
            });
            $circle.css({
                transform: 'translate(-50%, -50%) rotate(' + -now + 'deg)'
            });
        }
    });
}

$('.container').hover(function() {
    var $this = $(this),
        $circleWrappers = $this.find('.imageWrapper'),
        angleOffset = 360 / $circleWrappers.length,
        angle = - angleOffset / 2,
        distance = Math.min($this.width(), $this.height()) / 2;
    
    $circleWrappers.each(function() {
        var $this = $(this),
            $circle = $(this).find('.image');
        $circle.animate({ top: -distance });
        rotateImage($this, $circle, angle);
        angle -= angleOffset;
    });
}, function() {
    var $this = $(this),
        $circleWrappers = $this.find('.imageWrapper');
    
    $circleWrappers.each(function() {
        var $this = $(this),
            $circle = $(this).find('.image');
        $circle.animate({ top: 0 });
        rotateImage($this, $circle, 0);
    });
});

.container {
    position: relative;
    background-color: #cccccc;
    width: 400px;
    height: 400px;
    transition:all 0.8s;
    transform-origin: center center;
}
.imageWrapper {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
}
.image {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    line-height: 80px;
    text-align: center;
    font-family: arial;
    font-size: 42px;
    font-weight: bold;
    transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="imageWrapper"><div class="image">1</div></div>
    <div class="imageWrapper"><div class="image">2</div></div>
    <div class="imageWrapper"><div class="image">3</div></div>
    <div class="imageWrapper"><div class="image">4</div></div>
</div>

JSFiddle Link

Answer 4

function rotateImage($this, $circle, angle) {
    $this.animate({
        rotation: angle
    }, {
        step: function(now, fx) {
            $this.css({
                transform: 'rotate(' + now + 'deg)'
            });
            $circle.css({
                transform: 'translate(-50%, -50%) rotate(' + -now + 'deg)'
            });
        }
    });
}

$('.container').hover(function() {
    var $this = $(this),
        $circleWrappers = $this.find('.imageWrapper'),
        angleOffset = 360 / $circleWrappers.length,
        angle = - angleOffset / 2,
        distance = Math.min($this.width(), $this.height()) / 2;
    
    $circleWrappers.each(function() {
        var $this = $(this),
            $circle = $(this).find('.image');
        $circle.animate({ top: -distance });
        rotateImage($this, $circle, angle);
        angle -= angleOffset;
    });
}, function() {
    var $this = $(this),
        $circleWrappers = $this.find('.imageWrapper');
    
    $circleWrappers.each(function() {
        var $this = $(this),
            $circle = $(this).find('.image');
        $circle.animate({ top: 0 });
        rotateImage($this, $circle, 0);
    });
});

.container {
    position: relative;
    background-color: #cccccc;
    width: 400px;
    height: 400px;
    transition:all 0.8s;
    transform-origin: center center;
}
.imageWrapper {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
}
.image {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    line-height: 80px;
    text-align: center;
    font-family: arial;
    font-size: 42px;
    font-weight: bold;
    transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="imageWrapper"><div class="image">1</div></div>
    <div class="imageWrapper"><div class="image">2</div></div>
    <div class="imageWrapper"><div class="image">3</div></div>
    <div class="imageWrapper"><div class="image">4</div></div>
</div>

JSFiddle Link

Crafting a dynamic CSS 'trail' effect when hovering

Answer №1

Check out the code snippet here

Answer №2

Similar questions

Update the iframe URL to direct the user to a new tab instead of opening a popup

Struggling to find the right look for identical items

hide the side menu automatically - wordpress

Tips for minimizing the gap between two rows in a table with a set height

Is it possible to configure the jQuery datepicker to function without displaying the year?

What is the best way to adjust the dimensions of an image using CSS?

The sequence of divs in a language that reads from right to left

Dealing with errors in jQuery when handling JSON

Performing the AJAX request prior to the document being fully loaded

Struggling to create a search bar and dropdown menu that adapts to different

Using AJAX to delete items from the personalized shopping cart on your WooCommerce website

Developing a Multi-Faceted Array Utilizing SQL Data

The jquery function is not operating as anticipated

What is the best way to split an input field into distinct fields for display on the screen?

Questions and confusion surrounding Ajax with Jquery

AJAX Response Type in ASHX Handler

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

Aligning elements of unknown width within a container of a specified width

Issue with Foundation 6 not triggering the change.zf.slider event

Close the gap in the CSS for the image tag