Essential information for constructing an interactive hover effect using JavaScript

How can I create an animated hover effect similar to the one on the menu at ? I understand that this menu is coded with javascript, and I know where to find icons like these.

Answer №1

If you're looking to incorporate SVG's with CSS for transition animations, you can refer to this resource: https://css-tricks.com/using-svg/

I took inspiration from their example involving the use of transform and made some modifications. You can view the modified example here: https://plnkr.co/edit/MHIL0sHMVWQE9lonA4eh?p=preview'

Hopefully, this information proves to be helpful :)


    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
     xml:space="preserve" class="logo">
      <ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
      <path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
        c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
        c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
        c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
        c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
        c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
        -Some paths omitted due to length-
      </filter>
    </svg>
  </body>
  /html>

Additionally, here is the accompanying CSS:


.kiwi {
      fill: #94d31b; 
      transition: transform 300ms, fill 300ms;
    }
    .kiwi:hover {
      fill: #ace63c; 
      transform: translate(100px,100px) rotate(30deg);
      transform-origin: 50% 50%;
    }

    .ground {
      fill: #787f6a;
    }
    .ground:hover {
      filter: url(#pictureFilter);
      fill: #896d3d;
    }

Answer №2

If I were in your shoes, I would recommend using jQuery for this task as it seems like these effects are based on the jQuery hover event:

  $(document).ready(function(){

  $('div').hover(
    function(){
     $(this).addClass('active');
    },
    function(){
    $(this).removeClass('active');    
    }
  );

})

To make this work, you'll need to create a CSS class, let's name it 'active', and define the properties of that class.

You can achieve similar effects with a function like this:

$('div').animate({left:'+=10px'},500);

This code snippet will move the section to the left by 10 pixels over a duration of 500 milliseconds, which should help you achieve the desired effect.

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

Transforming the format of w2ui cells

I've been attempting to modify the background color of a specific cell to green using w2ui, but the code I have doesn't seem to be working. I've searched through the documentation, demos, and comments related to the style property without an ...

Webpack encounters difficulty resolving non-js `require`s located within node_modules

In my Next.js project, I have set up the configuration to handle imports ending in .web.js, which works fine except for files within the node_modules directory. For this setup, I adjusted the webpack config by setting resolve.extensions = ['.web.js&ap ...

Injecting parameters into an external JQuery function

I attempted to create a general external function for all documents. I intended to utilize the "this" method within the function's process and have the value of "this" come from different buttons. However, this code is not functioning as expected. How ...

What is the best way to conceal the arrow that is included with the datalist?

Recently, I began my journey in coding and encountered an issue with the arrow that appears along with the options in datalist. Here's a screenshot for reference: datalist arrow I attempted to solve this problem using the following code: input[type ...

AngularJs is currently utilizing a combination of three filters for filtering, but disappointingly only two out of

I am working on filtering book information from a json file on a web page using AngularJS. So far, I have filters set up for Author, Title, Year Read, and Booktype, which are all functioning correctly. However, the filter for rating is not working as expec ...

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

I currently have the following setup: .container { background: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { background: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20% ...

The smooth scrolling function in jQuery is producing unexpected outcomes

I'm trying to implement smooth scrolling on my website. However, the scrollbar is not working as expected. It seems like the smooth scrolling and default jumping to anchor links are happening at the same time. Here is my HTML code for the Bootstrap ...

Unable to reach the top while perfectly centered

I am currently struggling to create a perfectly centered popup menu that allows me to scroll all the way to the top. It seems like the transform property only affects visuals, so even though #content is set to top: 50%, I can't see everything at the t ...

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

What is the reason that I have to submit my mapped function twice in order for the updated state to show after modifying the array content?

When I try to display an image for the current value in the array item, the image does not display when I submit my value. I have to submit twice to display the value. Additionally, when changing the value and pressing submit, the content in the div does ...

Combining and compressing JavaScript files using PHP - Code editor

Currently, I am working on optimizing the page speed by minifying JS files. Most of my JS files are being successfully compressed except for two - wmd.js and showdown.js which are not getting compressed and cached by the function in scripts.php. After chec ...

An array becomes undefined once the previous array is removed

Consider the following code snippet: using the splice method, a specific item from Array1 is retrieved and stored in a variable called Popped. Next, Popped is added to array2. However, if we then delete the value from Popped, why does array2 become undef ...

What are the solutions for resolving the Express.js 404 status error?

I am new to node.js and express.js and I am attempting to create a login form using MERN. Whenever I try to access the register route, I keep getting a 404 status error and I can't figure out what's wrong with my code. Can someone please help m ...

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

What could be causing the issues I am encountering while using IE8?

My website looks great on all browsers except for Internet Explorer. I am currently using Internet Explorer 8 to test it. I've tried using a conditional stylesheet (ie.css) to fix some issues, but there are a few problems that have me stumped. I am op ...

Why does a Vue component throw errors prior to being rendered?

In the Home view, there are two components: Filter and Results. The Results component relies heavily on data from the vuex store, which is influenced by the Filter component. Once the filters are applied and the user interacts with Filter, the necessary da ...

Issue with using an <a> tag within a <li> element in Bootstrap

When I attempted to include an "a" tag within an "li" element, I noticed that the pointer cursor was missing and the href attribute wasn't functioning as expected. Which Bootstrap property is causing this issue? Could it be a lack of padding for the l ...

Is it possible to change the background as I move the sun across the screen?

Recently, I developed a page that allows users to drag an image of the sun in an arc. The sun transitions from a bright sun to a darker version and eventually into a moon as it moves along the arc. Now, my goal is to have the background image also transiti ...

Encounter a snag when attempting to upgrade to React version 16.10.2 while working with Ant Design Components - the error message reads: "

After upgrading to the latest React version 16.10.2, I encountered issues while using Ant Design Components. I specifically wanted to utilize the Title component from Typography. Here is an example of what I was trying to do: import { Typography } from & ...