Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Question

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Is there a way to style dynamic text like this using HTML?

https://i.sstatic.net/NQ9Cs.jpg I'm open to using CSS or Javascript, as long as it does not involve animation.

Answer 1

Answer №1

Using CSS transforms to create a faux effect:

Math.easeInOutSine = function (t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};
var easing = Math.easeInOutSine,
    $target = $('#target'),
    position = $target.position(),
    width = $target.width(),
    height = 100;
$target.html($target.text().split('').map(
  function(char){
    return '<span>'+char+'</span>';
  }
).join(''));
var $chars = $target.children();
$chars.each(function(){
  var $char = $(this),
      w = $char.width(),
      l = $char.position().left,
      offset = easing(l, 0, height, width),
      skew = offset - easing(w + l, 0, height, width),
      angle = Math.atan(skew/w) * 180 / Math.PI;
  offset = -offset;
  $char.css({
    transform: 'translateY('+offset+'px) skewY('+angle+'deg)'
  });
});
$target.css({
  paddingTop: height
});

#target {
  white-space:pre;
  display:inline-block;
}
#target span {
  position:relative;
  display:inline-block;
  transform-origin:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div id="target">This is a test of the emergency broadcast system.</div></div>

http://codepen.io/ouroborus/pen/mmbzje

I refer to it as faking because the letters are not actually curved. Instead, they are broken down into linear segments that approximate a curve based on the width of each character. This approximation becomes more evident at larger font sizes.

Answer 2

Using CSS transforms to create a faux effect:

Math.easeInOutSine = function (t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};
var easing = Math.easeInOutSine,
    $target = $('#target'),
    position = $target.position(),
    width = $target.width(),
    height = 100;
$target.html($target.text().split('').map(
  function(char){
    return '<span>'+char+'</span>';
  }
).join(''));
var $chars = $target.children();
$chars.each(function(){
  var $char = $(this),
      w = $char.width(),
      l = $char.position().left,
      offset = easing(l, 0, height, width),
      skew = offset - easing(w + l, 0, height, width),
      angle = Math.atan(skew/w) * 180 / Math.PI;
  offset = -offset;
  $char.css({
    transform: 'translateY('+offset+'px) skewY('+angle+'deg)'
  });
});
$target.css({
  paddingTop: height
});

#target {
  white-space:pre;
  display:inline-block;
}
#target span {
  position:relative;
  display:inline-block;
  transform-origin:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div id="target">This is a test of the emergency broadcast system.</div></div>

http://codepen.io/ouroborus/pen/mmbzje

I refer to it as faking because the letters are not actually curved. Instead, they are broken down into linear segments that approximate a curve based on the width of each character. This approximation becomes more evident at larger font sizes.

Answer 3

Answer №2

To obtain glyph data for any text, you can utilize the opentypejs library. Subsequently, convert this data into an SVG path. By employing the warpjs library, custom functions can be used to distort the SVG into the desired format.

If you wish to explore more examples, visit the link provided below.

An illustration showing a waving text in SVG is demonstrated below.

opentype.load(
  'https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_c5H3gnD-A.woff',
  (err, font) => {
    const glyphs = font.stringToGlyphs('DEVELOPER');
    const { width, yValues, svgPath } = glyphs.reduce(
      (prev, glyph) => {
        const d = glyph.path.commands.map(({ type, x1, y1, x, y }) => {
          switch (type) {
            case 'M':
            case 'L':
              return `${type} ${x + prev.width} ${y}`;
            case 'Q':
              return `${type} ${x1 + prev.width} ${y1} ${x +
                prev.width} ${y}`;
            default:
              return type;
          }
        });
        return {
          svgPath: `${prev.svgPath}<path d="${d.join('')}" />`,
          width: prev.width + glyph.advanceWidth,
          yValues:
            typeof glyph.yMax !== 'number'
              ? prev.yValues
              : [...prev.yValues, glyph.yMax, glyph.yMin],
        };
      },
      { svgPath: '', width: 0, yValues: [] },
    );
    const yMax = Math.max(...yValues);
    const yMin = Math.min(...yValues);
    const height = yMax - yMin;

    const period = width;
    const amplitude = height / 2;

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', `0 0 ${width} ${height + amplitude * 2}`);
    svg.innerHTML = `<g transform="translate(0,${yMax +
      amplitude}) scale(1 -1)">${svgPath}</g>`;

    const warp = new Warp(svg);
    warp.transform(([x, y]) => [
      x,
      y + amplitude * Math.sin((x / period) * Math.PI * 2),
    ]);
    
    document.getElementById('example').appendChild(svg);
  },
);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4938596948e97a4d5cad4cadc">[email protected]</a>/dist/warp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.1.0/opentype.min.js"></script>
<div id="example" />

Answer 4

To obtain glyph data for any text, you can utilize the opentypejs library. Subsequently, convert this data into an SVG path. By employing the warpjs library, custom functions can be used to distort the SVG into the desired format.

If you wish to explore more examples, visit the link provided below.

An illustration showing a waving text in SVG is demonstrated below.

opentype.load(
  'https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_c5H3gnD-A.woff',
  (err, font) => {
    const glyphs = font.stringToGlyphs('DEVELOPER');
    const { width, yValues, svgPath } = glyphs.reduce(
      (prev, glyph) => {
        const d = glyph.path.commands.map(({ type, x1, y1, x, y }) => {
          switch (type) {
            case 'M':
            case 'L':
              return `${type} ${x + prev.width} ${y}`;
            case 'Q':
              return `${type} ${x1 + prev.width} ${y1} ${x +
                prev.width} ${y}`;
            default:
              return type;
          }
        });
        return {
          svgPath: `${prev.svgPath}<path d="${d.join('')}" />`,
          width: prev.width + glyph.advanceWidth,
          yValues:
            typeof glyph.yMax !== 'number'
              ? prev.yValues
              : [...prev.yValues, glyph.yMax, glyph.yMin],
        };
      },
      { svgPath: '', width: 0, yValues: [] },
    );
    const yMax = Math.max(...yValues);
    const yMin = Math.min(...yValues);
    const height = yMax - yMin;

    const period = width;
    const amplitude = height / 2;

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', `0 0 ${width} ${height + amplitude * 2}`);
    svg.innerHTML = `<g transform="translate(0,${yMax +
      amplitude}) scale(1 -1)">${svgPath}</g>`;

    const warp = new Warp(svg);
    warp.transform(([x, y]) => [
      x,
      y + amplitude * Math.sin((x / period) * Math.PI * 2),
    ]);
    
    document.getElementById('example').appendChild(svg);
  },
);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4938596948e97a4d5cad4cadc">[email protected]</a>/dist/warp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.1.0/opentype.min.js"></script>
<div id="example" />

Answer 5

Answer №3

After taking inspiration from @Mike Diglio's solution, we can improve upon it.

var letterContainer = document.querySelector(".letters");

var letters = letterContainer.innerText;

letters = letters.split("");

letterContainer.innerText = "";

var offset = 0;

letters.forEach(function(letter, i){
  var wrap = document.createElement("span");
  wrap.innerText = letter;
  wrap.style.position = "relative";
  wrap.style.bottom = i+"px";
  wrap.style.transform = "rotate("+-i+"deg)";
  letterContainer.appendChild(wrap);
})

<div class="letters">HELLO WORLD</div>

You now just have to devise a function that handles the mapping for you.

Answer 6

After taking inspiration from @Mike Diglio's solution, we can improve upon it.

var letterContainer = document.querySelector(".letters");

var letters = letterContainer.innerText;

letters = letters.split("");

letterContainer.innerText = "";

var offset = 0;

letters.forEach(function(letter, i){
  var wrap = document.createElement("span");
  wrap.innerText = letter;
  wrap.style.position = "relative";
  wrap.style.bottom = i+"px";
  wrap.style.transform = "rotate("+-i+"deg)";
  letterContainer.appendChild(wrap);
})

<div class="letters">HELLO WORLD</div>

You now just have to devise a function that handles the mapping for you.

Answer 7

Answer №4

It is possible to achieve the desired outcome in a variety of ways.

One approach involves wrapping each letter of the word in a span tag and assigning unique classes to each span. While this method may not be visually appealing in the markup, it can present challenges with responsiveness depending on the word length and placement. (You can view an example HERE)

.container {
  margin: 50px;
  font-size: 20px;
  letter-spacing: -2px;
}
span {
  display: inline-block;
}
.h {
  position: relative;
  transform: rotate(-2deg);
}
.e {
  position: relative;
  bottom: 2px;
  transform: rotate(-5deg);
}
.l {
  position: relative;
  bottom: 5px;
  transform: rotate(-7deg);
}
.el {
  position: relative;
  bottom: 7px;
  transform: rotate(-9deg);
}
.o {
  position: relative;
  bottom: 10px;
  transform: rotate(-11deg);
}

<div class="container">
  <span class="h">H</span>
  <span class="e">E</span>
  <span class="l">L</span>
  <span class="el">L</span>
  <span class="o">O</span>
</div>

Alternatively, following @Ouroborus's suggestion, utilizing an SVG element to create a path for text movement along a curve effect can be effective (Further information available HERE).
Another option includes employing a JS library like Lettering.JS. Although I have not personally used this tool, it comes highly recommended based on feedback from Stack Overflow users and appears to offer robust functionality upon initial review.

Answer 8

It is possible to achieve the desired outcome in a variety of ways.

One approach involves wrapping each letter of the word in a span tag and assigning unique classes to each span. While this method may not be visually appealing in the markup, it can present challenges with responsiveness depending on the word length and placement. (You can view an example HERE)

.container {
  margin: 50px;
  font-size: 20px;
  letter-spacing: -2px;
}
span {
  display: inline-block;
}
.h {
  position: relative;
  transform: rotate(-2deg);
}
.e {
  position: relative;
  bottom: 2px;
  transform: rotate(-5deg);
}
.l {
  position: relative;
  bottom: 5px;
  transform: rotate(-7deg);
}
.el {
  position: relative;
  bottom: 7px;
  transform: rotate(-9deg);
}
.o {
  position: relative;
  bottom: 10px;
  transform: rotate(-11deg);
}

<div class="container">
  <span class="h">H</span>
  <span class="e">E</span>
  <span class="l">L</span>
  <span class="el">L</span>
  <span class="o">O</span>
</div>

Alternatively, following @Ouroborus's suggestion, utilizing an SVG element to create a path for text movement along a curve effect can be effective (Further information available HERE).
Another option includes employing a JS library like Lettering.JS. Although I have not personally used this tool, it comes highly recommended based on feedback from Stack Overflow users and appears to offer robust functionality upon initial review.

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Installing Yarn causes the download of an unconventional directory

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

How come my menu is not showing up in the same format as the code?

A guide on invoking a JavaScript function within a dropdown menu based on selection instead of change event

Retrieve JSON data generated within a JavaScript-powered webpage

Making AngularJS 'PUT' requests: The process of submitting only the data in a form

Encountering 404 errors when reloading routes on an Angular Azure static web app

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

JavaScript providing inaccurate height measurement for an element

Creating borders around Material UI grid items can be achieved by applying a border style to the

Update the CSS classes exclusively for the specified ID

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

Failing to retrieve the file instance upon completing the upload process to cloudinary using nestjs

Angular often uses the JavaScript pattern for development

The router.push function does not properly redirect to the specified path; instead, it just reloads the current page

Should I deploy the Angular2 demo app within Rails or as its own standalone application?

How can I reduce the burden of dependencies on users with a pre-built NPM package?

Employing parseFloat() and parseInt() functions together with regular expressions in JavaScript for converting a Comma Separated Values (CSV

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS