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

Concatenating strings with JavaScript

A single Modal, Ajax, and data that is continuously refreshed

In what time frame is Javascript/AJAX functioning?

Preventing box shadows from blending together

Line breaks showing up on the page that are not present in the HTML source code

Utilizing Angular's Dependency Injection in Component Development

Extracting props data from a component in React.js - a step-by-step guide

What could be causing my view to not load the jQuery code from _Layout.cshtml, yet it works when I include it directly in the view file?

Retrieve the $http data from a function that is external to it

When going through an array using jquery, only the final object is returned

If the text width of a label exceeds the total width of its container, intelligently display a sub-string based on pixel calculations

The tooltip of the Material UI IconButton is displaying incorrectly

Techniques to dynamically insert database entries into my table using ajax

The hover effect for changing the style of one element when hovering over another element is not functioning as

Populating a clickable list and form with a complex JavaScript object

Choosing between setting a height of 100vh versus a minimum height of 100vh

Issue with AJAX loading functionality not functioning properly in Internet Explorer

"Incorporating a datepicker into input fields that are added dynamically

Enabling and disabling HTML image input based on checkbox selection

Is there a way to ensure the collapsible item stays in its position?