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.
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.
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;
}
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.
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 ...
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 ...
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 ...
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 ...
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 ...
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% ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
Why is the kendo grid displaying like this for me? ...
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 ...
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 & ...