Interactive Text Transformation on Mouse Over

Question

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be:

                               USEStudio

Upon hovering the mouse, the text will transform into:

                         UrbanSpaceEvent.Studio

Additionally, I want to make sure that the second text is clickable and directly leads to the website.

Despite experimenting with various CSS codes, I have struggled to incorporate fade-in/fade-out effects and properly link the text to the site.

jquery html css

Answer 1

Answer №1

How to easily change visibility

Using CSS only

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example.com</title>
    <style>
        .wrap{
            text-align: center;
        }
        .wrap:hover .state--off {
            display: block;
        }
        .wrap:hover .state--on,
        .state--off {
            display: none;
        }
    </style>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p class="state--on">ExampleStudio</p>
        <p class="state--off">NewSpaceStudio</p>
    </a>

Adding fade effects using jQuery

A quick and simple way

(function($) {
  var toggleVisibility = function( domWrap, sClass ) {
    $Children = $( domWrap ).children();
    var $Hidden  = $Children.filter(':hidden'),
        $Visible = $Children.filter(':visible');
    $.when(
      $Visible.animate({opacity: 0})
    ).then(function(){
      $Visible.hide();
      $Hidden
        .css({display: 'block', opacity: 0})
        .animate({opacity: 1}, 'slow');
    })
  };
  $(function() { // document ready
    $('.wrap')
      .mouseenter(function(){ toggleVisibility( this ) })
      .mouseleave(function(){ toggleVisibility( this ) })
  })
})(jQuery)

.wrap{
    text-align: center;
}

.state--off {
    display: none;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example.com</title>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p class="state--on">ExampleStudio</p>
        <p class="state--off">NewSpaceStudio</p>
    </a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternatively, you can use a library like:

Animate.css for CSS animations

Utilizing CSS animation with jQuery fallback

(function($) {

    // choose from https://daneden.github.io/animate.css/ and customize this script
    var sClassIn  = 'zoomIn',    // <- your string here //////////////////
        sClassOut = 'rotateOut'; // <- your string here //////////////////

    sClassIn  += ' animated';
    sClassOut += ' animated';

    var sAnimationEnd = (function() {
        var t,
            el = document.createElement('fakeelement'),
            animations = {
                'animation': 'animationend',
                'OAnimation': 'oAnimationEnd',
                'MozAnimation': 'animationend',
                'WebkitAnimation': 'webkitAnimationEnd'
            }

        for (t in animations) {
            if (el.style[t] !== undefined) {
                return animations[t];
            }
        }
    })();

    var toggleVisibility = function(domWrap, sClass) {
        $Children = $(domWrap).children();
        var $Hidden = $Children.filter(':hidden'),
            $Visible = $Children.filter(':visible');

        if (sAnimationEnd) { // modern browsers css animation
            var $Deferred = $.Deferred();
            $Visible.attr('class', sClassOut).one(
                sAnimationEnd,
                function() {
                    $Visible.hide().attr('class', '');
                    $Hidden.show().attr('class', sClassIn);
                    $Deferred.resolve();
                }
            );
            return $Deferred.promise();
        } else { // fallback | js animation
            return $.when( $Visible.animate({ opacity: 0 }) ).then(function() {
                $Visible.hide();
                $Hidden.show().animate({ opacity: 1 }, 'slow');
            });
        }

    };

    $(function() { // document ready
        $('.wrap')
            .mouseenter(function() { toggleVisibility(this) })
            .mouseleave(function() { toggleVisibility(this) })
    })

})(jQuery)

.body, html {
    overflow: hidden;
}
.wrap{
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>stackoverflow.com</title>
    <style></style>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feee1e6e2eefbeaa1ecfcfccfbca1baa1bd">[email protected]</a>/animate.css" rel="stylesheet"/>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p>ExampleStudio</p>
        <p style="display:none">NewSpaceStudio</p>
    </a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

How to easily change visibility

Using CSS only

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example.com</title>
    <style>
        .wrap{
            text-align: center;
        }
        .wrap:hover .state--off {
            display: block;
        }
        .wrap:hover .state--on,
        .state--off {
            display: none;
        }
    </style>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p class="state--on">ExampleStudio</p>
        <p class="state--off">NewSpaceStudio</p>
    </a>

Adding fade effects using jQuery

A quick and simple way

(function($) {
  var toggleVisibility = function( domWrap, sClass ) {
    $Children = $( domWrap ).children();
    var $Hidden  = $Children.filter(':hidden'),
        $Visible = $Children.filter(':visible');
    $.when(
      $Visible.animate({opacity: 0})
    ).then(function(){
      $Visible.hide();
      $Hidden
        .css({display: 'block', opacity: 0})
        .animate({opacity: 1}, 'slow');
    })
  };
  $(function() { // document ready
    $('.wrap')
      .mouseenter(function(){ toggleVisibility( this ) })
      .mouseleave(function(){ toggleVisibility( this ) })
  })
})(jQuery)

.wrap{
    text-align: center;
}

.state--off {
    display: none;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example.com</title>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p class="state--on">ExampleStudio</p>
        <p class="state--off">NewSpaceStudio</p>
    </a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternatively, you can use a library like:

Animate.css for CSS animations

Utilizing CSS animation with jQuery fallback

(function($) {

    // choose from https://daneden.github.io/animate.css/ and customize this script
    var sClassIn  = 'zoomIn',    // <- your string here //////////////////
        sClassOut = 'rotateOut'; // <- your string here //////////////////

    sClassIn  += ' animated';
    sClassOut += ' animated';

    var sAnimationEnd = (function() {
        var t,
            el = document.createElement('fakeelement'),
            animations = {
                'animation': 'animationend',
                'OAnimation': 'oAnimationEnd',
                'MozAnimation': 'animationend',
                'WebkitAnimation': 'webkitAnimationEnd'
            }

        for (t in animations) {
            if (el.style[t] !== undefined) {
                return animations[t];
            }
        }
    })();

    var toggleVisibility = function(domWrap, sClass) {
        $Children = $(domWrap).children();
        var $Hidden = $Children.filter(':hidden'),
            $Visible = $Children.filter(':visible');

        if (sAnimationEnd) { // modern browsers css animation
            var $Deferred = $.Deferred();
            $Visible.attr('class', sClassOut).one(
                sAnimationEnd,
                function() {
                    $Visible.hide().attr('class', '');
                    $Hidden.show().attr('class', sClassIn);
                    $Deferred.resolve();
                }
            );
            return $Deferred.promise();
        } else { // fallback | js animation
            return $.when( $Visible.animate({ opacity: 0 }) ).then(function() {
                $Visible.hide();
                $Hidden.show().animate({ opacity: 1 }, 'slow');
            });
        }

    };

    $(function() { // document ready
        $('.wrap')
            .mouseenter(function() { toggleVisibility(this) })
            .mouseleave(function() { toggleVisibility(this) })
    })

})(jQuery)

.body, html {
    overflow: hidden;
}
.wrap{
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>stackoverflow.com</title>
    <style></style>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8feee1e6e2eefbeaa1ecfcfccfbca1baa1bd">[email protected]</a>/animate.css" rel="stylesheet"/>
</head>
<body>
    <a href="YourLinkGoesHere" class="wrap">
        <p>ExampleStudio</p>
        <p style="display:none">NewSpaceStudio</p>
    </a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Answer №2

Here is a way to achieve the desired result using only CSS and no JavaScript:

<html>
<head>
<title></title>
<style type="text/css>
.hover_text:after {
    content: attr(data-nothovertext);
}
.hover_text:hover:after {
    content: attr(data-hovertext);
}
.hover_text {
    text-align: center;
        display:block;
}
</style>
</head>
<body>

<a href="#link_to_your_url" class="hover_text" data-hovertext="UrbanSpaceEvent.Studio" data-nothovertext="USEStudio" ></a>

</body>
</html>

Answer 4

Here is a way to achieve the desired result using only CSS and no JavaScript:

<html>
<head>
<title></title>
<style type="text/css>
.hover_text:after {
    content: attr(data-nothovertext);
}
.hover_text:hover:after {
    content: attr(data-hovertext);
}
.hover_text {
    text-align: center;
        display:block;
}
</style>
</head>
<body>

<a href="#link_to_your_url" class="hover_text" data-hovertext="UrbanSpaceEvent.Studio" data-nothovertext="USEStudio" ></a>

</body>
</html>

Interactive Text Transformation on Mouse Over

Answer №1

How to easily change visibility

Adding fade effects using jQuery

Animate.css for CSS animations

Answer №2

Similar questions

Contrast between gmaps and traditional cross-domain AJAX queries

Switch the display of a div within a ng-template loop using PrimeNg

Obtain the printed value of a button via PHP and manipulate it using JavaScript

Can the line "as is" be included in HTML code?

The render() method in a class does not support Jquery functionality, unlike the componentDidMount() method where it works effectively

The operation of 'val' is not supported by HTMLInputElement

Executing two AJAX requests simultaneously with Django, AJAX, and jQuery in a single event

Tips for utilizing a particular style from a font collection?

Is it possible for me to generate HTML using JavaScript?

What is the best way to align my cards side by side using html/css/js?

Elegant CSS background image fade effect

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

JavaScript application that features an audio player complete with a dynamic progress bar and customizable tags

Center align the label and textbox using CSS in a horizontal arrangement

Memory leakage in Internet Explorer as a result of JavaScript code

retrieving a date from a different source and displaying it in a date

Transitioning smoothly between different backgrounds will be like changing the cursor color

What is the best way to retrieve content from a different website using javascript in an asp.net environment?

What is the best way to incorporate (+/-) buttons to increase or decrease numbers in this code snippet?

Ways to adjust your selection to the space or new line before or after