What is the best way to create scrolling text within a sentence?

As a fun project, I decided to create a unique landing page and experiment with different ways to enhance its appearance. One idea I had was to include spinning text in the center of the page. To illustrate this concept, I have added a GIF for reference. I did come across a similar post on this topic, but the response provided didn't quite achieve the desired effect.

Initially, I attempted to use CSS scrolling text, but encountered a problem where the entire sentence started moving. I then tried placing the beginning and end of the sentence in different DIVs, only to find that it caused them to become separated.

htmlcsssass

Answer №1

It is important for this element to be self-contained, but you have the flexibility to use the inline-block property. Additionally, there will be a larger element within this container that can be scrolled.

h1 {
  display: flex;
  height: 40px;
  
  /* center the content: */
  justify-content: center;
}

.scroll-container {
  text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 40px;
  /* border: 1px solid red; */
  margin-left: 10px;
  margin-right: 10px;
}

.text-inside .item {
  height: 40px;
}

.text-inside {
  margin-top: 0;
  transition: 500ms;
  animation: 3s infinite test;
}

@keyframes test {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 0;
  }
  50% {
    margin-top: -40px;
  }
  100% {
    margin-top: -80px;
  }
}
<div style="inline-block">
<h1>Welcome to
  <div class="scroll-container">
    <div class="text-inside">
      <div class="item">Paris</div>
      <div class="item">Frankfurt</div>
      <div class="item">Milano</div>
    </div>
  </div>, Joshua
</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

Restrict page scrolling to the vertical position of a specified div [Using jQuery, javascript, and HTML]

Currently, I am in the process of developing a personal website that features numerous expandable items. My goal is to restrict the page scrolling to the height of the expanded item once it is opened. I do not want users to be able to scroll above or below ...

javascriptjqueryhtmlcssscroll

What is the best approach for establishing a consistent font size and line height for a website using em units?

What is the optimal approach to ensure consistent typography across different browsers (font-size and line height) for an entire website with a fixed width of 970px, centered layout? It's common to receive designs from clients with varying font sizes ...

cssxhtmltypography

The uncertainty surrounding the usage of checkboxes in D3.js

I am faced with the challenge of adding checkboxes to multiple groups within an SVG, each containing a circle and text element. I have attempted to accomplish this by using D3 to append foreignObject tags and then add checkboxes to each group. The code I h ...

javascripthtmld3.js

Personalized design for Material Tooltip in Angular 17

I am currently working on an angular 17 application that utilizes the latest Material components. My project heavily incorporates the Tooltip component, but I am facing challenges when it comes to customizing it to my preferences. While I did succeed in c ...

angularsassangular-materialtooltipangular-material-theming

Attempting to retrieve data from a Postman API and then utilizing the map function to display the elements of the array. However, an error message is indicating that

The API receives a JSON object that has an array of objects. We then extract this array and send it down to the component below as a prop called props.users. import React, { Component } from 'react'; import UserCard from '../components/User ...

javascripthtmlnode.jsreactjsapi

The timer freezes briefly at 1:60 before switching to 1:01

I'm in the process of creating a website for Rubik's cube scrambling and timing, and everything seems to be working well so far. I have implemented a scrambler, a timer, and a list of recorded times (still a work in progress). The timer is functi ...

javascripthtml

What is the method for adjusting the height of a CustomScrollPanel to be 100%?

I'm trying to set a CustomScrollPanel to have a height of 100%, but I'm having trouble making it work. Here's what I've attempted: public class MyScrollPanel extends Composite implements HasWidgets { private ResizeLayoutPanel resizeLa ...

javajavascripthtmlcssgwt

What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next ...

htmlcsshoveruinavigationbarnav

Is there a way for me to transition a grid from 4x3 to 3x4 at a specific breakpoint in the media query?

I am currently working on creating a responsive grid layout. Initially, the grid is set up as a 4x3 configuration, but once the screen width reaches 720px, I need it to convert into a 3x4 grid. The challenge is that I must accomplish this using only HTML a ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Transitioning Pace.JS Across a Webpage

My dilemma involves a 200px wide sidebar and trying to have my pace.js bar load beside it, with a margin of 200px to its left. Here is the CSS I've been using for editing: .pace-progress { background: #2dbaa6 !important; position: fixed; z-i ...

javascriptjqueryhtmlcss

Tips for maintaining the order of child elements in Angular when deleting one of them

I have a parent Angular component that showcases multiple children components using the ngFor directive. Each child functions as its own window within the parent container and can be repositioned using CdkDrag. Additionally, I have added a small "X" button ...

cssangularangular-cdkangular-cdk-drag-drop

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

javascriptjqueryhtmlcsstimer

Change "ul li" on the fly

My unordered list contains list items with a badge span indicating the number of unread messages. I am trying to rearrange the list items so that those with the highest number are at the top and those with the lowest or none are at the bottom. Despite tryi ...

javascriptjqueryhtmlarrays

Finding the Origin and Automatically Forwarding

I'm having an issue with my code. It's not functioning as expected. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml ...

javascripthtmljsonjsonp

The attempt to compare two undisclosed inputs using basic javascript was unsuccessful

In my current project, I am facing an issue with comparing two hidden input HTML elements using JavaScript onclick submit button. Despite the seeming simplicity of the task, it is not working as expected. The function that I have implemented for this purp ...

javascriptphphtmlalgorithmhidden-field

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework

Storing css data for iPhone Facebook application

Currently, I am in the process of developing a webpage specifically for the iPhone Facebook app wall link. Interestingly, when attempting to apply the margin attribute to a div within the webpage, the margin doesn't seem to have any effect when clicki ...

iphonecss

col-md-4 overlapping on smaller screens

I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other. How are you today? https://i.sstatic.net/CdKAI.png And I'm trying to keep ...

htmlcsstwitter-bootstrapbootstrap-4

When the mouse button is released or when an event listener is

I've been pondering a question that has yet to be fully answered. When I implement this technique to catch a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is it more efficient than this newer approach: <div id=" ...

javascripthtmlmouseevent

Responsively adjust font size for mobile devices using HTML

My application is designed to work on both Android and IOS devices. Within the app, there are WebView components that display HTML content. I have discovered the use of "em" and viewport units as well as @media queries in CSS. As someone who is new to HT ...

androidioshtmlcssresponsive-design