If you want to see a cool moving text animation, simply head over to this link: . The text will automatically type out and then clear just like the example below:
https://i.sstatic.net/dAZW6.png
Ever wondered how to create this kind of text animation? Any language can be used - React, Angular, HTML+CSS, anything! If you have any github links or source code, we would love to learn more.
Presenting my Interpretation:
let i = 0,
i2 = 0,
custom = document.querySelector('#custom')
setInterval(write, 100)
function write() {
text('I am Stephen!')
}
function text(str) {
if (i < str.length) {
custom.textContent += str[i++]
} else if (i < str.length * 2) {
i++
} else if (i2 < str.length) {
custom.textContent = str.substring(0, str.length - i2 - 1)
i2++
} else if (i >= str.length * 2 - 1) {
i = 0
i2 = 0
}
}div {
display: grid;
place-items: center;
height: 90vh;
}
:is(#a, #b) {
position: relative;
display: inline-block;
padding: 4px 1px;
top: 0;
}
#a {
border-right: 3px solid #fa4;
margin-right: .5ch;
}
:is(#a, #b)::after {
position: absolute;
top: 0;
right: 0;
padding: 2px 4px;
border-radius: 3px;
}
#a::after {
content: 'start';
background: #fA4;
transform: translate(3px, calc(-1em - 3px));
}
#b::after {
content: 'end';
background: #4af;
transform: translate( calc(4ch - .5px), calc(-1em - 3px));
}
#b {
border-right: 3px solid #4af;
}<div><span id=b><span id=a>Hello, </span><span id=custom></span></span>
</div>Although not as polished, I believe I captured the essence of what was required.
Currently using: Windows 10, Visual Studio 2022 17.1.0 (scheduled for an update). In the past, I would simply copy JavaScript library files into a subfolder of my website or application, add some <script...> tags to the appropriate pages, and consid ...
This particular code functions correctly on the Firefox and Chrome browsers. However, there seems to be an issue with IE and Opera, where the 'OR' text is only visible within a 2px height area. hr { height: 2px; border: 0; background-color ...
I'm working on displaying a list of items in a specific format using Material-UI Grid. The desired layout is: item1 item2 item3 item4 item5 item6 Currently, my code generates the items in a single column like this: const display = () => { ...
Whenever I attempt to run npm start, I encounter the following error message: [Error: ENOENT: no such file or directory, open 'C:\Users\Elijah\vscode\React project\react-project\.next\BUILD_ID'] { errno: -4058 ...
The Address object values are not being retrieved as expected when requesting from the credit card component to a function called getAddress() in a config service that holds the value. Instead of the updated values, I am getting the initial values. Below i ...
When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...
I have a database backend connected to mongoDB using mongoose. There is a controller that sends user data in a specific format: const db = require("../../auth/models"); const User = db.user const addProduct = (req, res) => { User.findOne({ ...
Currently working on a website and utilizing Bootstrap. Looking to keep my fixed navbar distinct from my jumbotron, but struggling to achieve separation between the two. Is there a method to accomplish this without directly modifying the CSS file? Here i ...
Creating a single column fixed-width layout with a header and footer, the order of view should be as follows: header navigation dynamic content 1 dynamic content 2 main content footer The dynamic contents (3, 4, 5) will expand vertically with unknown he ...
Just getting started with web development, very new to it. I am in the process of creating a SharePoint site for my workplace using the Modern Script Editor web part. The site will essentially be a resource page with linked buttons on it. I am facing diffi ...
I developed a custom hook to toggle boolean values: import { useState } from 'react'; export function useToggle(initialValue: boolean) { const [value, setValue] = useState<boolean>(initialValue); const toggleValue = () => setValue ...
What is the best way to translate a binding using Angular's built-in i18n feature? //translating attribute works fine <mycomponent i18n-myattribute myattribute="just an attribute"></mycomponent> //how to handle translating bi ...
I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...
I'm currently developing an Angular application and utilizing OneTrust for managing cookie consent. The issue I'm encountering is that while the rest of the components on the login page are properly translated into the target language, the OneTru ...
I have a task that requires the following: Implement an event listener so that when you click on any list item, the value of its "value" attribute will be shown next to this line. In my HTML, I have an ordered list with 8 list items. The values range fro ...
How can I modify Emmet autocomplete to change from className="" to className={styles.}? If it is possible, could you please guide me on how to achieve this? Alternatively, if modifying the autocomplete feature is not an option, is there a way to create a ...
I have a question regarding using a component-selector to display a component: <app-search></app-search> After adding this component, I noticed that the width and height of the rendered component in the developer console are 0px x 0px. As a r ...
I'm currently working on a project that involves writing data to a CSV file and then downloading it from the frontend. Here's what I have done in my views: ...omitted details data = data.values(*values_fields) response = HttpResponse(content_typ ...
Exploring the realm of CSS for the first time and feeling a bit lost. I am working with material ui alongside react and redux. My goal is to customize certain properties of a specific component, such as TextField with the disabled attribute. Upon inspectin ...
I recently encountered an issue with my Chrome extension where a menu I inserted into the page would disappear whenever a flash or html5 video player went full screen. Is it possible to have two objects in full screen simultaneously, or is there another so ...