Spinning Text with Dynamic jQuery Effects

I am looking to add a creative typography effect by rotating a portion of a sentence. I have experimented with jQuery animations.

Specifically, I am interested in animating a word upwards. Here is the code snippet I have been working on:

window.setInterval(function() {
  $("#tchange").animate({
    "top": "-=15px"
  }, 100).fadeOut("fast");
  $('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
        Get on the Current Release.<br>
        Boost your 
        <span id="tchange">
            Competitiveness
        </span>
    </h1>
jquerycsshtml

Answer №1

jQuery lacks support for CSS3 animations. To achieve animations, you can opt to animate using pure CSS, utilize jQuery to switch CSS classes that trigger the CSS animation effect, or increment the inline CSS3 animation property on the element rapidly (similar to how jQuery animating functions).

For example:

let x = 0;
let timer = 1; // Adjust timer for FPS

setInterval(function() {
    x++;
    $('#myelement').css('-webkit-transform', 'scale(' + x + ')');
}, timer);

Answer №2

An effective technique involves utilizing CSS to modify the opacity and rotate properties.

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}

... (CSS code continues) ...

@keyframes rotateWord {
  ... (Keyframes for rotation) ...
}
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
<span>Competitiveness</span>
<span>abc</span>
<span>def</span>
<span>ghi</span>
<span>jkl</span>
</div>

    </h1>

Alternatively, jQuery can be used as well, but it may consume more memory:

var degrees = 0,
  timer = 1; //Change timer to change FPS

setInterval(function() {
  if (degrees < 359) {
    degrees++;
  } else {
    degrees = 0;
  }

  $('.rw-words-1 span').css('transform', 'rotate(' + degrees + 'deg)');

}, timer);
.rw-words {
  ... (Repeats previous CSS styles) ...
}
... (JavaScript/jQuery function continues) ...


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
<span>Competitiveness</span>
<span>abc</span>
<span>def</span>
<span>ghi</span>
<span>jkl</span>
</div>

    </h1>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The AJAX request is not triggering the anonymous function upon successful completion

There seems to be an issue with my code that I can't quite figure out. I'm attempting to make an AJAX call to retrieve an XML file and execute an anonymous function upon success, but it's not working as expected. Strangely, if I replace the ...

javascriptjqueryajaxanonymous-function

What is the best way to create spacing between fields in Material UI?

I just started using material UI and I'm trying to add spacing between my text fields. I've tried adding the spacing but it doesn't seem to be working. Can someone help me figure out how to add space in between textfields? Below is the code ...

javascripthtmlcssreactjsmaterial-ui

Creating an Image with a specified form action

echo "<img src=\"{$recipe['image']}\" height=100 width=100 /><br />"; echo '<form action="php/recipe.php?id='.$recipe_id.'&img='.{$recipe['image']'}.'" method="POST">'; echo ...

phphtml

Changing the content of an HTML table using JQuery's Ajax functionality

I have a table in my JSP page that loads data from the server. My question is, how can I load a new list of data from the server (servlet) and change the content of the same row when I enter a number in an input text box and press enter? I am trying to a ...

javascriptjqueryajax

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

Expanding AngularJS capabilities with multiple ng-repeat directives in a single row of a table

This question is related to displaying a collection of Grandchildren in AngularJS. The current for loop structure is as follows: foreach(var parent in list) foreach (var child in parent) foreach (var grandChild in child) print(grandChild.item1) ...

javascriptangularjshtmlhtml-tableangularjs-ng-repeat

Update the input type on the fly

Hey there, I've got a bit of an unusual question. I'm looking to create a form with fields that vary for each user, like a text input or a checkbox. I attempted using Angular to achieve this: <div ng-controller="myCtrl" ng-repeat="x in prova" ...

javascripthtmlangularjs

Merge three Wordpress themes into a single template using the args value in the URL

Recently, I created an archive template that displays the custom post type artists on the page. To make it more organized, I added a filter to sort the artists into three different orders: All ('orderby' => 'rand'), Newest ('ord ...

phphtmlwordpresstemplates

Performing an Ajax POST request with parameters using Jquery in Ruby on Rails (Rails)

I've been attempting to send an Ajax post request in my Rails application, but I'm encountering an error in the response. Here's the Rails code snippet:- def search_exams(myparam1 , myparam2) json_data = {:aaData=> [["abc","xyz","lmn ...

jqueryruby-on-railsajaxruby-on-rails-4

Dynamically linking tabbable tabs is a useful technique that allows for

I have been working on an app that organizes websites into groups displayed as tabs in a tabbable navigator using Twitter Bootstrap. The idea is that each time a new group is added, a new tab should appear. Currently, this is how it looks: The functionali ...

javascripthtmlcsstwitter-bootstrapangularjs

There is no automatic margin calculation for the input element, however, the margin can still be adjusted using metrics and

I'm encountering an issue with the width of an input element within a table cell. The input element is defined in the following way: <td><input class="form-control input-small my-input-narrow" type="number"></td> Unfortunately, the ...

htmlcsstwitter-bootstrap

What is the best way to trigger a filter function that has been stored in a variable?

I need assistance with executing a filter function stored in a variable when the user clicks a button. The function enableFilter must compare item.id with item.category and trigger the filter if they match. Can someone provide guidance on how to achieve ...

javascripthtmlreactjs

Incorporating a submission button into a jQuery star rating system

While my default star rating system functions well for desktop users, I have encountered issues when using it on a mobile device. I often end up tapping on the wrong rating by mistake. To improve this experience, I would like to incorporate a submit butt ...

javascriptjqueryrating

What could be the reason my SVGs are not displaying within the def group?

I am encountering a strange behavior that I cannot explain. I utilized grunt svg sprite to generate an SVG sprite containing all of my SVG files from a specific directory. The structure of the sprite looks like this: <svg width="0" height="0" style="p ...

htmlcsssvg

Having trouble executing a JavaScript function correctly when using an onclick event created within innerHTML in JavaScript

My goal is to trigger the loadInWhat function with an onclick event and populate my input field with id="what" using the value of LI function createDivBox(data){ document.getElementById("whatContainer").style.display="block"; document.get ...

javascripthtmljson

A technique for postponing the addition of a class to a div

I am attempting to create a unique type of slider effect. Inside a single div named #slider, I have 9 items displayed in a line. Link to JsFiddle The slider is 1860px wide, but only 620px is visible at any given time due to the parent having an overflow: ...

javascriptjqueryhtmlcss

Tips for automatically closing SweetAlert after an AJAX request finishes

I recently implemented Sweet-alert into my Angular project. function RetrieveDataFromAPI(url) { SweetAlert.swal( { title: "", text: "Please wait.", imageUrl: "../../app/app-img/loading_spinner.gif", showConfirmB ...

javascriptjqueryangularjsajaxsweetalert

Automated video and image gallery - with a twist!

While searching for a (jQuery) video/image gallery to incorporate on my website, I came across several available options. However, I am specifically looking for one that, when set to "autoplay" mode and reaches a video file, will automatically play the ent ...

jqueryvideoimagegallery

Tips for maintaining a highlighted navigation link upon selection in Vue.js

My dilemma involves a navigation bar featuring router-links. My goal is to have the selected link visually highlighted so users can easily identify which page they are on. The current setup looks something like this: <div class="mynav"> ...

htmltwitter-bootstrapvue.js

Revamp the sequence of divs using jQuery

<div class="example first">111</div> <div class="example second">222</div> <div class="example third">333</div> Can the order of these divs be changed using jQuery? I am looking to get: <div class="example second"&g ...

javascriptjqueryhtmlcss