After spending some time delving into the code of wallbase.cc, I've been trying to uncover the secret behind styling the input box similar to the one featured on their homepage. My main curiosity lies in how they achieve the quickly blinking cursor and what seems like animated text.
Upon examining the source code, it appears that they are utilizing a jQuery plugin known as Fancy Input
The unique aspect of their approach is that they are not just styling a plain text input, but rather utilizing it to trigger JavaScript that dynamically generates animated DOM elements. This level of creativity and customization goes beyond what can be achieved with CSS alone.
Upon closer inspection of the DOM after entering text, you will notice these newly generated elements alongside the text input:
<div>
<span>t</span>
<span>e</span>
<span>s</span>
<span>t</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span> </span>
<span>1</span>
<span>2</span>
<span>3</span>
<b class="caret" style="height: 25px;"></b>
</div>
Through JavaScript manipulation, each character you type or delete results in the creation or removal of individual <span> elements, with the animated blinking cursor represented by the <b class="caret"> element at the end.
By treating each character and the caret as separate elements, they are able to apply CSS transitions for animation effects such as size and opacity, showcasing the versatility and innovation in their design.
The caret is incorporating an animated effect. The primary classes involved in this animation, along with some inherited styles, are as follows (while in a hovered state):
.searchmainbar .maininput:focus ~ div .caret {
opacity: .8;
box-shadow: 0 0 8px #fff;
-webkit-animation: 0.4s 40ms caret infinite;
animation: 0.4s 40ms caret infinite;
}
.searchmainbar .maininput:focus ~ div .caret {
opacity: .8;
box-shadow: 0 0 8px #fff;
-webkit-animation: 0.4s 40ms caret infinite;
animation: 0.4s 40ms caret infinite;
}
/* Character animation */
.fancyInput>div span {
-webkit-transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
display: inline-block;
position: relative;
}
@keyframes caret{50%{opacity:0.1;transform:scaleY(0.8)}}
<div><span>H</span><b class="caret" style="height: 25px;">​</b></div>
To easily locate this element in Chrome, you can right-click on it within the inspector and simulate the element being in a :focus state.
When I click the button in my app, I want to see the order status. However, currently all statuses are being displayed in the first order row. PHP: <?php $query = mysqli_query($conn, "SELECT o.orderid,o.product,o.ddate,o.pdate,k.kalibariname,o.sta ...
Are you familiar with how to adjust text alignment after a line break using tcpdf? With tcpdf 6.2.13 and the writeHTML method, I am attempting to achieve perfectly left-aligned text. However, whenever the line is too long, the following line gets shifted ...
Attempting to complete the code provided here but encountering issues as a novice in java-scripting. It seems like the map is not loading correctly. A new tab and text are generated when DIV is created. Seeking assistance on how to open a custom map in a ...
I currently have the filetype plugin indent setting in my ~/.vimrc file, but it seems to be causing issues with the indentation of JSON objects. When I start vim using vim -N -u NONE <filename.js> I am enabling both :filetype plugin indent on and : ...
I am in the process of developing a website to showcase reports in table format, all retrieved from an SQL database using PHP. While the pages are functional, they suffer from slow loading times when dealing with a large amount of data, typically more than ...
After implementing the HTML code snippet provided in the template, I encountered an issue with the alignment of the icon and text. Currently, they are using justify-content which is not aligning them as intended. <button type="submit" class="btn btn-pr ...
I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...
I'm attempting to showcase a collection of images stored in a specific folder within a div. My approach involves utilizing AJAX within a JavaScript file titled edit, which is positioned one directory away from the index route. This implementation is b ...
Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...
I have been attempting to test AJAX functionality within CodeIgniter, but unfortunately, I haven't had any success so far. Can someone please point out where I might be making a mistake? Below is my test_page.php: <!DOCTYPE html> <head> ...
I'm working on an HTML project where I have a select field. Depending on the option selected, I need to update the price field with the corresponding price fetched using Ajax. Additionally, I want to be able to input multiple rows by clicking on the ...
I've been working on implementing an authentication system for my app that involves checking cookies. My approach was to use router.all('*') to handle every request, verify the cookie, and then proceed to the actual handler. However, I encou ...
I have encountered an issue with a component I created that only displays the value of block[0], rather than showing the entire block value. For instance, if I input: HI Stackoverflow It only shows "HI" and not the complete content of the field. Is th ...
I am facing a design challenge where I have a main card (1) that contains two sub-cards (2 and 3) using Bootstrap columns. Sub-card number 2 adjusts its height dynamically based on the screen size, while sub-card number 3 consists of a code snippet element ...
I am looking to incorporate buttons for smooth horizontal scrolling within my container. Currently, the functionality is in place but I would like to enhance its smoothness. How can I improve the scrolling experience? Should I consider using a different p ...
I am trying to configure a global SWRConfig in my Next.js application. In my _app.js file, I have the following setup: import '@/styles/bootstrap.min.css'; import "@/styles/globals.css"; import Layout from "@/components/Layout"; import { SWRConfi ...
During the process of building a website, I encountered an unusual issue with Internet Explorer and our CSS menu system. The top-tier a tag in the menu doesn't seem to have the same clickable area as Firefox and Chrome provide. This is because the a t ...
Trying to make sense of the outcomes from these few experiments : Experiment number 1 (in a new command line) : > _ ReferenceError: _ is not defined at repl:1:2 at REPLServer.self.eval (repl.js:110:21) at Interface.<anonymous> (repl. ...
My understanding is that React components update when their props or state change. For example, I declare a variable like this: let percentage = { width: '10%', }; Then, I have a function using setInterval to upd ...
After reading numerous queries like this, I'm still struggling to find a solution... I utilize the archiver and express Node.js modules. My goal is to effortlessly send a zip file to the client. Here's a snippet of my code: res.set("Content-Typ ...