Currently working on my website and I want each letter in the title to have a rubbery effect when hovered over. A great example of this can be found on the home section of .
I was considering turning each letter into a span with a specific class that, upon hovering, would change its size and color. However, I am unsure how to achieve that "rubber" effect or create an animation.
Any suggestions? It would be greatly appreciated!
Thank you so much!!!
If you want to see an example, you'll need a bit of JavaScript to make it work smoothly. The code below utilizes jQuery, which is already integrated into your Wordpress setup.
If you prefer not to use JavaScript, I've included the CSS for :hover that you can activate and eliminate the need for JavaScript. Be aware, however, that the animation will cease once the user stops hovering over the element.
$(".rubberBand").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
$(this).removeClass("animated")
})
$(".rubberBand").hover(function(){
$(this).addClass("animated");
})span.rubberBand {
display: inline-block;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
font-size: 60px;
font-weight: bold;
}
span.rubberBand.animated {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
/*
WITHOUT JAVASCRIPT, UNCOMMENT THESE LINES AND YOU'LL SEE THAT THE ANIMATION STOPS WHEN YOU HOVER OUT
*/
/*
span.rubberBand:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
*/
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="rubberBand">H</span>
<span class="rubberBand">E</span>
<span class="rubberBand">L</span>
<span class="rubberBand">L</span>
<span class="rubberBand">O</span>Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...
Struggling with organizing my data into a table, as each row is currently generating a new table. Utilizing the JSON Content Importer with the following code: ...
One issue I am facing is that I have multiple sections containing image info and details. When I click on a specific image, the corresponding details should toggle. Everything works fine, however, if I click on another image without closing the previous ...
Struggling to implement star ratings for multiple items, my code seems to be mixing up the ratings. Here's a snippet of the HTML: <div class="thumbnail"> <img src="https://images.unsplash.com/photo-147031 ...
I've compiled this based on information from other sources on this platform and a variety of tutorials. I'm puzzled as to why it's not functioning, and I've had no success with alternative methods. Below are excerpts from the HTML of m ...
body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...
I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...
I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...
<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...
I've been working with code from a different source and it's definitely not the usual HTML/PHP setup I'm used to. Wordpress seems to have its own way of doing things. Right now, I'm struggling to make the contact form's PHP include ...
I am facing an issue with my dropdown menu. I have styled the caret using CSS background-image property, but now I would like to use a Font Awesome icon instead. I attempted to implement two different styles for the background image with no success. The d ...
I'm currently working with nested HTML tables and facing some challenges with styling. Below is the table I am dealing with: Note: The blue area represents when hovering over. The specific styling modifications I want to make are: 1. Have the im ...
I followed the instructions on to set up a Select2 select. However, I noticed that my Select2 select doesn't look great. Here is how it currently appears: https://i.sstatic.net/SIv7L.png When I don't transform it with jQuery $('#users&apos ...
For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...
Apologies for my poor English. I have the following PHP code. Now, I am looking to incorporate some CSS into this code snippet. <?php $post_objects = get_field('awncn'); if( $post_objects ): ?> <ul> <?php foreach( $post ...
On my website, I have a photo section that displays random user-submitted images. I am facing the same challenge of fitting images into a frame, similar to how landscape video is adapted for broadcast television when combined with portrait cell phone video ...
Having some trouble with my webpage - I can't seem to get the image to load on the page. <div class="background_image" style="background-image:url({% static 'static/images/home_slider.jpg'%})"></div> ...
Within the structure of my webpage, there resides a table containing various elements. One specific cell within this table holds a link that triggers jQuery scripts upon being clicked. An example action initiated by clicking this link is displaying a Boots ...
Sorry if this is a basic question, but I'm new to this. Currently, the sidebar is on the left side. How can I move it to the right? #sidebar-wrapper { top: 52px; right: -200px; width: 200px; background-color: #27CD70; color: white; posi ...
I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...