Thu. Nov 7th, 2024

sarveshpathak.com

Code Snippets, Tutorials, Articles, Technical Stuff

How to Create Sliding Text Effect Using CSS and JavaScript

2 min read
Sliding Text Effect Using CSS and JavaScript

Sliding Text Effect Using CSS and JavaScript

If you want to Create a Sliding Text Effect, use CSS and Javascript. It will help improve your visitors well time. The Sliding Text Effect will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.


Here we will learn How to Create Sliding Text effect using CSS and JavaScript

Include these two CSS files

https://fonts.googleapis.com/css?family=Montserrat:900&display=swap
https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

Javascript Code

window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('resize', handleWindowResize);

const spansSlow = document.querySelectorAll('.spanSlow');
const spansFast = document.querySelectorAll('.spanFast');

let width = window.innerWidth;

function handleMouseMove(e) {
  let normalizedPosition = e.pageX / (width/2) - 1;
  let speedSlow = 100 * normalizedPosition;
  let speedFast = 200 * normalizedPosition;
  spansSlow.forEach((span) => {
    span.style.transform = `translate(${speedSlow}px)`;
  });
  spansFast.forEach((span) => {
    span.style.transform = `translate(${speedFast}px)`
  })
}
//we need to recalculate width when the window is resized
function handleWindowResize() {
  width = window.innerWidth;
}

CSS code: Sliding Text Effect Using CSS and JavaScript

.line {
  width: 100vw;
}
.left, .right {
  width: 50vw;
  overflow: hidden;
  display: inline-block;
}
.left {
  color:pink;
  -webkit-transform: skew(0deg, -15deg);
          transform: skew(0deg, -15deg);
}
.right {
  color: black;
  -webkit-transform: skew(0deg, 15deg);
          transform: skew(0deg, 15deg);
}
.left .content {
  width: 100vw;
  text-align: center;
}
.right .content {
  width: 100vw;
  text-align: center;
  -webkit-transform: translate(-50vw);
          transform: translate(-50vw);
}
span {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
  line-height: .8;
  transition: ease-out .6s;
}

HTML code

<h1>How to Create Sliding Text Effect Using CSS and JavaScript</h1>
<div class="wrap">
    <div class="line">
      <div class="left">
        <div class="content">
          <span class="spanSlow">Ask-me.in</span>
        </div>
      </div><!--
      --><div class="right">
        <div class="content">
          <span class="spanSlow">Ask-me.in</span>
        </div>
      </div>
    </div>
    <div class="line">
      <div class="left">
        <div class="content">
          <span class="spanSlow">Tips and Tricks</span>
        </div>
      </div><!--
      --><div class="right">
        <div class="content">
          <span class="spanSlow">Tips and Tricks</span>
        </div>
      </div>
      </div>
      <div class="line">
          <div class="left">
            <div class="content">
              <span class="spanFast">Visit</span>
            </div>
          </div><!--
          --><div class="right">
            <div class="content">
              <span class="spanFast">Visit</span>
            </div>
          </div>
        </div>
        <div class="line">
            <div class="left">
              <div class="content">
                <span class="spanSlow">Daily</span>
              </div>
            </div><!--
            --><div class="right">
              <div class="content">
                <span class="spanSlow">Daily</span>
              </div>
            </div>
          </div>
</div>
  

Result

Download Source Code

Sliding Text Effect Using CSS and JavaScript
Sliding Text Effect Using CSS and JavaScript

About Post Author

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.