mouse over on text to change text with scrolling animation with css

Related searches

i want to change this "EMAIL" text to change on mouseover to the specific email (like "JOHN.SNOW@GMAIL.COM) with an horizontal scrolling animation. this is the HTML

<div class="wrapper">
  <a class="contact" href="#">INSTAGRAM</a>
  <a class="contact" href="#">EMAIL</a>
  <a class="contact" href="#">CREDITS</a>
</div>

OKay, Run the following code snippet, I Use an overlay to make the effect like scroll

Try this, may help you

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

</style>
</head>
<body>


<div class="container">
  <div class="">Email</div>
  <div class="overlay">
    <div class="text">JOHN.SNOW@GMAIL.COM</div>
  </div>
</div>

</body>
</html>

How to scroll text within a div to left when hovering the div, See this pure CSS solution, added a span tag to make it possible. In the other word that makes it to scroll to the end of the text on hover. see this link : https:// plnkr.co/edit/NtYpo6l77yet9SE0wpms?p=preview var speed = maxscroll * 15; $( this ).animate( { scrollLeft: speed }, 10000, "linear" );//set timer for slower one� I think this is a cool text hover effect mostly built-in CSS. & little bit HTML. There is the source code of this Amazing hover effect, As you can see above. You can use it on your website’s text, link or menu etc. You can modify this code according to your choice or need. Using CSS, we can make lots of Amazing things like this hover effect.

* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    font-family: Arial;
}
.contact:hover {
    font-size: 0;
}
.contact:hover::after {
    content: attr(data-hover);
    font-size: 15px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Page</title>
        <meta http-equiv="refresh" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="wrapper">
            <a class="contact" href="#">INSTAGRAM</a>
            <a class="contact" href="#" data-hover="john.snow@gmail.com">EMAIL</a>
            <a class="contact" href="#">CREDITS</a>
          </div>
    </body>
</html>

Text scroll css, basicScroll allows you to change CSS variables depending on the scroll Path: Home � scroll animation Split Screen Text and Image with Load More on Scroll. Dec 24, 2019 � In this tutorial, I will create an Image Overlay Text on hover with � CSS marquees are replacing HTML marquees as the standard method for creating scrolling, bouncing, or slide-in text and images. CSS marquees can be created with CSS animations, which make them standards-compliant. The old HTML method of using the <marquee> element is not standards-compliant, as the element is not part of the W3C HTML specifications.

Here is an updated snippet on how you can achive it.

Firstly,

You need to hide excess characters you can do that by providing a fixed width to the .contact container and making overflow:hidden;

In the below snippet change the width max-width: 200px; to control the number of characters of email to be shown.

Secondly,

Use transition: transform 2s ease-in-out; to control animation of the scroll while using transform on hover to provide scroll position using transform: translateX(-200px);

Here, is the working example

a.contact {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
}

a.contact>span::after {
  transition: transform 0.8s ease;
  transform-origin: right;
  display: inline-block;
  content: attr(data-text);
  transform: translateX(0px);
}

a.contact>span:hover::after {
  content: attr(data-hover);
  transition-duration:4s;
  transform: translateX(-200px);
}
<div class="wrapper">
  <a class="contact" href="#">INSTAGRAM</a>
  <a class="contact" href="#"><span data-text="EMAIL" data-hover="LONGGGGGGGGGGGGGGEMAIL@mail.com"></span></a>
  <a class="contact" href="#">CREDITS</a>
</div>

Text Change on Hover Using CSS [VOICE TUTORIAL], In this video, I talk about how to achieve a hover state Scroll for details how to achieve Duration: 5:43 Posted: May 10, 2016 Star Wars 3D Scrolling Text in CSS3. How cool is that? No JavaScript, no graphics — just pure HTML5 text and CSS3. Scroll Drawing. As you scroll down, the % scrolled of the document is calculated and that same % of an SVG path is drawn. CSS background change on scroll. Fixed element appears to change color when entering different sections.

Change Text While Hovering - CSS/HTML, Ever wanted to be able to change some text when you mouseover? Here's a good solution Duration: 9:22 Posted: Dec 15, 2015 Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.

How To - Transition on Hover, CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Add a transition effect (opacity and background� How to animate text color on mouse hover using CSS. Topic: HTML / CSS Prev|Next. Answer: Use the CSS3 transition property. You can use the CSS3 transition property to smoothly animate the text color of an element on mouseover, such as a paragraph of text or a hyperlink. Let's take a look at an example to understand how it basically works:

This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS. It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text. I find this effect much subtler and easier to read on a homepage.

Comments
  • thanks, but if i wanted to make that animation horizontal? and it would be cool if the email text could "disappear" befor the animation
  • this seems to do a strange a trange glitchy animation, i'm trying to fix it
  • I think I might've fixed it... here's a link to a fiddle: jsfiddle.net/Le70akum/2
  • longgggmail is scrolling but i want to switch "EMAIL" with the real email with a fast-scrolling animation
  • that can be achieved as shown below using data-hover
  • @Syertim I have updated the above snippet, check out if it solves the problem.