Animating HTML elements with JavaScript and CSS when hovering the mouse

Recently, I stumbled upon the SkyZone website and was impressed by the captivating JavaScript/CSS/HTML effects they used. I was inspired to include similar effects on my own website.

(Visit the Home Page)

One noteworthy feature on their website is the navigation bar; when you hover over a button, a sleek line fades in and moves underneath the text.

In the "Our Core Attractions" section, each attraction box has a "See Details" button with an orange arrow that animates when you hover over it.

If there is anyone who can guide me on how to create these effects or something similar for my website, I would greatly appreciate it!

javascriptjqueryhtmlcssweb

Answer №1

Follow this guide to achieve it: 

.nav-item a.hoverbar::after {
    content: '';
    position: absolute;
    bottom: 1rem;
    width: 100%;
    left: 0;
    height: 0.1rem;
    background: rgba(0,0,0,0.9);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.nav-item a.hoverbar:hover::after {
  opacity: 1;
  transform: translateY(0.2rem);
}

a {
    position: relative;
    padding: 0;
    line-height: 4rem;
}

.nav-item a.stretch::after {
    content: '';
    top: 2.4rem;
    right: -0.4rem;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border: solid;
    border-width: 0 0.1rem 0.1rem 0;
    transform: rotateZ(-45deg);
    border-color: black;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.24, 0.97);
}

.nav-item a.stretch:hover::after {
    transform: translateX(100%) rotate(-45deg);
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="hoverbar nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="hoverbar nav-link" href="http://google.com" target="_blank">Stores</a>
                </li>
                <li class="nav-item">
                    <a class="hoverbar nav-link" href="http://google.com" target="_blank">Events</a>
                </li>
              <li class="nav-item">
                    <a class="stretch nav-link" href="http://google.com" target="_blank">Get Started</a>
                </li>

            </ul>

        </div>

</nav>

Demo pen: https://codepen.io/siddiquiadeel/pen/vrGdLR

Explanation: The navigation bar uses CSS pseudo-elements to create interactive effects on anchor elements. When hovering over an anchor element, a pseudo-element is added with specific styling properties. This creates a visual effect below the anchor element.

The arrow animation for the "Get Started" anchor element follows a similar concept of using pseudo-elements for styling and animation.
To learn more about CSS pseudo-classes and pseudo-elements, refer to the documentation on MDN.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

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

Tips for extracting a value from a geojson response using a specific key

When analyzing the geojson response below, I am trying to access the following: Type and Segments To achieve this, I attempted the following: return data["type"] //does not work, error received return data["features"][0]["properties"]["segments"] ...

javascriptpythonjsonangulargeojson

Steps to creating a popup within an HTML page from another HTML page

I recently started learning JavaScript. I have a link on my homepage that directs to another HTML page, but I would like it to show as a popup on the homepage with responsiveness and some stylish design elements such as a folded corner. Is there a way to a ...

javascriptjqueryhtmlcss

Stop displaying AJAX requests in the console tab of Firebug, similar to how Twitter does it

I'm looking for a way to prevent my AJAX calls from being logged in Firebug's Console tab, similar to how Twitter does it. When using Twitter search, you'll see a live update feed showing "5 tweets since you searched." Twitter sends periodic ...

javascriptajaxtwitterfirebug

Footer displays within the content section

Currently, I am utilizing Next.js and antd's layout components to create a dashboard-style page using their Layout component. However, I have encountered two issues related to styling (CSS) in this setup: Footer appearing within the Content: I am wo ...

htmlcssreactjslessantd

Is it possible to retrieve ALL current arrays in existence? If so, how can it be

I am working on a script and I need to fetch all existing arrays with their indexes as they are all used by the same function. Is it feasible to achieve this? The script I am working with is in shell script, but I am also curious to know if this can be do ...

javascriptphpcarraysbash

inputting a pair of parameters into a function

While creating an action for react-redux, I encountered a problem when trying to pass two variables into the function - dispatch and hosts. Strangely, the variable host is being logged as a function instead of its actual value. This is my code: export fu ...

javascriptreactjsreact-redux

Passing information from the created hook to the mounted hook in VueJS

How can I transfer data from the created function to the mounted function in VueJS? In my VueJS application, the code in my created function is as follows: created: function(){ $.getJSON({ url: 'static/timeline.json', success:function( ...

javascripthtmljsonvue.jsvuejs2

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

javascripthtml

Strange padding issue found on View component in React Native Web when using Edge browser

While developing a Button in react native for the web, I noticed an unusual padding issue when viewing the button in Edge. Despite my efforts to debug, I have not been able to find a solution. Strangely, the button appears correctly on Android and Firefox. ...

javascriptreactjsreact-nativemicrosoft-edge

Using fancybox - sending the current element to the onClosed callback

This might seem simple, but I'm having trouble figuring it out! if( is_logged_out( html ) ) { var throughClick = $(this); $.fancybox( html, { 'autoDimensions' : false, 'width' : 'auto', ...

jqueryfunctionfancybox

Is it possible to direct the focus to a specific HTML element when the tab key is pressed?

Seeking a solution to shift focus to a button once the user presses the tab key from the currently selected control, while bypassing other dynamic controls in between. The order of controls is as follows: <dynamic drop down control 1> <dynamic d ...

javascriptjquery

When the program is executed, immediately use .trigger('click')

There is a spelling game that features a grid filled with hidden words. The objective of the game is to spell out these words by clicking on the letters of the alphabet, aided by hints such as images and sounds. Players are given the word they need to spe ...

javascriptjquery

Issue with Slick Grid not updating after Ajax request

I need to update the data on a slick grid when a checkbox is clicked, using an ajax call to retrieve new data. However, I am facing issues where the slick grid does not refresh and the checkbox loses its state upon page load. Jsp: <c:if test="${info ...

javascriptjavajqueryajaxjsp

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

How can I ensure that the search form stays aligned with the other elements in the navbar using Bootstrap CSS?

I am new to CSS and I am facing an issue with my search form in the navbar. When I initially load the page, the search form appears on 2 lines but when I refresh the page, it aligns properly with the other elements. How can I ensure that the search form st ...

csstwitter-bootstrap

On touch devices like iOS, Select2 displays a native select alongside the stylishly customized version for enhanced user experience

Is there a way to hide the native Select when using the select2 dropdown on my site? ...

javascripthtmliostouchjquery-select2

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Mat-SideNav in Angular Material is not toggled by default

<mat-toolbar color="primary"> <mat-toolbar-row> <button mat-icon-button> <mat-icon (click)="sidenav.toggle()">menu</mat-icon> </button> <h1>{{applicationN ...

javascriptangularangular-materialmaterial-design

Issue encountered while executing npm command: "Module 'npmlog' not found"

Today marks the beginning of my first job, and as I was setting up my development environment on my Mac (OSX) by updating node and npm, something went awry. Whenever I attempt to use npm in my command line (npm init, npm install, etc.), I am confronted wit ...

javascriptnode.jscommand-linenpm