"Can you please show me how to create a hover effect on a button when it

To change the image on button click "Click here to change image with hover effect" with the current hover effect (using this library) without the hover effect, follow these steps. The example is hosted on my server because jsfiddle does not support WebGl.

View the Example

My code:

!function(f, l) { // Code here } })();
//# sourceMappingURL=hover-effect.umd.js.map
     
new hoverEffect({
parent: document.querySelector('.distortion'),
intensity: 0.3,
image1: 'https://tympanus.net/Development/DistortionHoverEffect/img/Img22.jpg',
image2: 'https://tympanus.net/Development/DistortionHoverEffect/img/Img21.jpg',
displacementImage: 'https://tympanus.net/Development/DistortionHoverEffect/img/displacement/8.jpg' 
});

.landing {
display: flex;
justify-content: space-between;
height: 100vh;
}

.distortion {
width: 640px;
height: 920px;
align-self: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>

<div class="landing">
  <div class="intro">
      <h2>Lorem, ipsum.</h2>
        <p>
          <button>Click here to change image with hover effect</button>
        </p>
  </div>
<div class="distortion"></div>
</div>

javascriptthree.jsgsap

Answer №1

To create a new variable, add var clickBtn = opts.clickBtn; within the variables section.

Afterwards, modify

if (userHover) {
    parent.addEventListener('mouseenter', transitionIn);
    parent.addEventListener('touchstart', transitionIn);
    parent.addEventListener('mouseleave', transitionOut);
    parent.addEventListener('touchend', transitionOut);
}

to

if (userHover) {
    clickBtn.addEventListener('click', transitionIn);
}

within the event listeners section.

Finally, update the instantiation to:

new hoverEffect({
    parent: document.querySelector('.distortion'),
    clickBtn: document.querySelector('button'),
    intensity: 0.3,
    image1: 'https://tympanus.net/Development/DistortionHoverEffect/img/Img22.jpg',
    image2: 'https://tympanus.net/Development/DistortionHoverEffect/img/Img21.jpg',
    displacementImage: 'https://tympanus.net/Development/DistortionHoverEffect/img/displacement/8.jpg'
});

To enable toggling between the two images, create a boolean variable to track the state. Set it to true in the transitionIn function and false in the transitionOut function. Then, check the state on click and call the appropriate function.

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

What is the process for transforming an AJAX request's onreadystatechange into a promise?

During the process of making a javascript AJAX request, I initially utilized the traditional callback approach to call the callback function within the onreadystatechange and retrieve all the values of readyState. However, upon switching my callback funct ...

javascriptajaxpromisees6-promise

I am attempting to trigger a mouseup event following a mousedown action

elements[0].onmousedown = function(){ console.log('screen clicked.'); triggerMouseUp(); }; I just need to incorporate a function in my code that simulates mouseup event, even when the user is still holding down the click button. e ...

javascripthtmlcssangularjs

Having trouble with the function not running properly in HTML?

I'm having trouble implementing a copy button on my HTML page. Despite no errors showing in the chrome console, the text just won't copy. Below is a snippet of my HTML code: <!doctype html> <div class="ipDiv tk-saffran"> <div c ...

javascripthtmlcopy

Error message: "Unassigned value in knockout.js"

Here is my code snippet for binding to a textbox: var CategoryViewModel = { categoryModel: ko.observable({ categoryId: ko.observable(), categoryName: ko.observable(), active: ko.observable() }), GetCategoryById: functio ...

javascriptjqueryknockout.jsknockout-mapping-pluginknockout-3.0

Should I install @capacitor/android as a dev dependency in the package.json file of a React project?

I was pondering whether it would be better to add @capacitor/android, @capacitor/ios, and @capacitor/core as development dependencies. ...

javascriptnode.jsreactjspackage.jsoncapacitor

Managing the length of a PHP session

As a beginner in web development, I have been trying to figure out how to limit session time in PHP. I have researched on Stackoverflow but haven't found a suitable solution yet. Some suggestions like using cookies, AJAX communication, and static PHP ...

javascriptphpajax

Why isn't Freichat displaying the name of the user who logged in?

After creating my own small social networking site, I decided to add a chat script called freichat. However, I am facing an issue where when a user logs in, their name appears as "Guest102" instead of their actual name. I am quite confused by this problem ...

javascriptphpjqueryhtmlmysql

Anticipating the refresh of React state in a functional component

I am looking for a way to ensure that the function handleOpen is only called after all the state variables (nameError, emailError, messageError) have been updated. The issue I am facing is that the state update is not instantaneous, causing handleOpen to s ...

javascriptreactjsreact-hooksuse-state

Experience the quick sort programming algorithm in action using Vue.js without the hassle of dealing with Promises

I am currently experimenting with the quicksort algorithm visualization using Vue.js for self-educational purposes. However, I am facing some difficulties with async/await implementation. Although array filling and shuffling seem to work fine (although I a ...

javascriptasynchronousvue.jsasync-await

Managing Z-index (navigation) in Java Selenium 2.0 by addressing z-index conflicts prior to executing the built-in scroll function followed by the WebElement

When using Selenium 2.0, the .click() method has the capability to automatically scroll until the element is visible and can be clicked on, as shown in the code snippet below: WebElement box = driver.findElement( By.id( boxID ) ); box.click(); Generally, ...

javajavascriptgoogle-chromeseleniumwebdriver

Encountering an issue with postman where properties of undefined cannot be read

I am facing an issue while trying to create a user in my database through the signup process. When I manually enter the data in the create method, it works fine as shown below: Note: The schema components are {userName:String , number:String , email:Stri ...

javascriptnode.jsreactjsmongodbexpress

The Vue.js form is experiencing issues with submission when pressing the "enter" key

TL;DR Question Why is it that having 2 identical input fields in a form prevents the enter button from submitting the form? More detailed question Straight to the point. I'm attempting to use the `enter` button to submit a form when an input elemen ...

javascriptvue.js

Step-by-step guide on programmatically activating a radio button

I am working with a radio button and input field. I need the ability to programmatically toggle the radio button so that when this.iAreaOfCoverageForThresholdPasser.average-height is set to true, the radio button appears highlighted. Snippet of HTML: < ...

javascripthtmlangulartypescript

the session data is being mishandled

I have integrated express-session and express-mysql-session in my application to handle sessions and store them in a MySQL database. The session data is saved in a table named "sessions". const express = require('express'); const session = requir ...

javascriptmysqlnode.jsexpressexpress-session

Tips for extracting data from a JSON file

I'm attempting to retrieve a list of music genres from my json file using PHP and JQuery ajax. Here is the format of my json file [ "12-bar blues", "2 tone", "2-step garage", "4-beat", "50s progression", "a cappella", "accordion", " ...

javascriptphpjqueryjsonajax

Checkbox column within GridView allows users to select multiple items at once. To ensure only one item is selected at a

Currently, I am facing a challenge with dynamically binding a typed list to a GridView control within an asp.net page that is wrapped in an asp:UpdatePanel for Ajax functionality. One of the main requirements is that only one checkbox in the first column c ...

asp.netjavascriptasp.net-ajax

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

I have been experimenting with designing a custom cursor for my website. After finding a design I liked, I made some adjustments to suit my needs. However, an issue I encountered is that when I scroll, the custom cursor also moves away from its original po ...

javascripthtmlcsscursor

Discovering ways to verify if an array is empty within JSON data using JMESPath?

I am presenting JSON data that looks like this: [ { "id": "i_1", "name": "abc", "address": [ { "city": [ "city1", "city2" ] }, { "city": [ "city1", "city2" ...

javascriptjsonjmespath

Is there a way to bring in both a variable and a type from a single file in Typescript?

I have some interfaces and an enum being exported in my implementation file. // types/user.ts export enum LoginStatus { Initial = 0, Authorized = 1, NotAuthorized = 2, } export interface UserState { name: string; loginStatus: LoginStatus; }; ex ...

javascripttypescriptecmascript-6importinterface

Best practices for logging error objects in JavaScript

As a beginner in web development, I've recently come across an interesting observation related to handling errors. When working with json.stringyfy(), I noticed that the message key is not displayed in statement 2. However, accessing error.message ret ...

javascriptexpressmongoose