Smoothly transition with ease when hovering over a link

Hey there! I'm looking to create a menu that is similar to what you can find on this website:

I've been thinking about using animate.css with the slideInDown animation to make the bookmark show up when hovering over a link. However, I'm not sure how to make it disappear when the mouse moves away.

This is the code I have for initiating animation on hover:

function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.addClass('animated ' + animation);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
        });
}
javascriptjqueryhtmlcss

Answer №1

The website you are referring to does not rely on JavaScript for its animations. Instead, it utilizes CSS3 transitions to animate the background position of an image that is initially positioned off-canvas when the site loads.

For a demonstration of this technique, you can view a sample fiddle with the corresponding CSS and HTML code.

You may need to adjust the values in the code snippet to align with your specific design and image requirements.

HTML:

<ul class="nav">
    <li><a href="#">Menu Item 1</a>
    
    </li>
    <li><a href="#">Menu Item 2</a>

    </li>
    <li><a href="#">Menu Item 3</a>

    </li>
    <li><a href="#">Menu Item 4</a>

    </li>
</ul>

CSS:

ul.nav {
    list-style: none;
    margin: 0;
}
ul.nav li {
    float: left;
    margin: 0 0 0 30px;
}
ul.nav li.current a, ul.nav li a:hover {
    background-position: 50% 0;
}
ul.nav li a {
    height: 50px;
    line-height: 50px;
    display: block;
    padding: 50px 20px 0;
    position: relative;
    background: url(http://lorempixel.com/50/70/abstract/) no-repeat 50% -90px;
    -webkit-transition: background-position 0.2s linear;
    -moz-transition: background-position 0.2s linear;
    transition: background-position 0.2s linear;
}

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

Creating an import map using jspm2 can be done by following these steps

Currently, my goal is to utilize JSPM module loader to import javascript packages from npm instead of CDN and employ an offline package loader. Now, the next step involves incorporating an importmap script in order to successfully import modules like rea ...

javascriptnpmmodulenode-modulesjspm

Is there a way to apply the same class exclusively to the first child within a group?

How can I include specific classes for only the initial group of items in a nested ul li list? <ul> <li class="first-group"> <ul> <li></li> </ul> </li> <li class="first-group"></li> & ...

javascriptjqueryhtmlcss

Issue with Promise function not resolving in the context of javascript and Wit.ai

Currently, I am in the process of updating the functions in my messenger/wit.ai chat bot to transition from using callbacks to promises. The initial format functions properly: ['buildScenario'](sessionId, context, cb) { var trendChoice = s ...

javascriptwit.ai

The data variable is typically implemented as __ob__ when it is being returned

Currently, I am working on creating a line chart using vue-chart.js. Here is the Vue component I am utilizing: Vue.component("line-plot", { extends: VueChartJs.Line, props: ["label", "data", "options"], mounted(){ ...

javascriptvue.jsvuejs2

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

javascriptcssstring

What function does the sx prop serve in Material UI?

<Container style={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Container> <Container sx={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Cont ...

cssreactjsmaterial-ui

Calling the ColdFusion component with $.ajax results in returning plain text instead of HTML

Apologies if this question has already been addressed. I am working on setting up a pagination system that involves sending variables to a ColdFusion function query in order to fetch a specific number of elements and display those records on a web page wi ...

jqueryhtmlajaxcoldfusioncfc

Load the div iframe when it is clicked

I'm looking for a way to optimize the loading of div elements on my website. Currently, when the page is loaded, all divs are also loaded but remain hidden until clicked. Is there a method to delay loading the content of a specific div until it's ...

htmliframe

Encountered an issue while attempting to retrieve the access token from Azure using JavaScript, as the response data could

Seeking an Access token for my registered application on Azure, I decided to write some code to interact with the REST API. Here is the code snippet: <html> <head> <title>Test</title> <script src="https://ajax.google ...

javascripthtmljqueryazurepowerbi-embedded

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

I have two applications running locally - one is an AngularJS application and the other is an Angular 10 application. I am trying to access a page from the Angular 10 application using an iframe and send a message to it from the AngularJS application. How ...

javascriptangularjsangulariframecross-domain

The banner displayed at the top of the screen

I'm working on a div element that contains a span, and I want this span to display a message on a web page. My goal is for the message to always appear at the top of the viewport, regardless of where the user is scrolled on the page. For example, if a ...

htmlcss

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

htmlangularjsindexingangularjs-ng-repeatangularjs-ng-click

When importing the Ionic Native File, the JavaScript File object cannot be used simultaneously

When attempting to use the javascript file object, I encountered an issue because the ionic native file object already uses the same key File Here is an example: import { File } from '@ionic-native/file'; @Component({ selector: 'page-ho ...

javascriptangulartypescriptionic3ionic-native

Implement a default dropdown menu that displays the current month using Angular and TypeScript

I am looking to implement a dropdown that initially displays the current month. Here is the code snippet I have used: <p-dropdown [options]="months" [filter]="false" filterBy="nombre" [showClear] ...

htmlangulartypescriptprimeng

Automatically trigger a page reload using a jQuery function

Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...

javascriptjqueryhtmlcssclick

How to incorporate user-submitted form data into the existing state using React

I am currently working on a React project that involves a form input. The goal is for the user to input a number into the field, and then take that number and add it to another number in the application's state. For example, if this.state.data initia ...

javascriptreactjsconcatenationstatesetstate

Hello there! Could you please provide some guidance on how to insert a photo onto a website using Django?

How can I implement a feature that allows users to choose a photo for a product from within the system or enter a URL to use as the image? The selected image should be displayed in the product list along with other relevant information. I have written the ...

htmldjangoimageformsdjango-models

utilize jquery to submit numerous forms using ajax

If I have 3 forms, each with its own submit button: <form name="form1"> <input name="input"></input> <submit></submit> </form> <form name="form2"> <input name="input"></input> <submit></submi ...

jqueryajaxformssubmit

PHP-generated AngularJs Select Element

I'm facing an issue with my PHP function in my AngularJS application. I have created a function to select a default option, but it's not displaying the desired value. Here is the function code: function qtyList($selectName, $selectQty){ $st ...

javascriptphphtmlangularjs

Trouble with X-editable: Unable to view values when editing and setting values using J

When using X-editable to modify a form with data, I encounter an issue. Initially, the values are loaded from the database to the HTML, but when users try to edit by clicking on the "Edit" button, all values appear as "Empty" instead of their actual cont ...

javascriptjqueryx-editable