I came across an interesting typewriter effect implementation using CSS in an article on CSS Tricks
I decided to play around with it and see if I could apply it to a hero image, which I found an example of on Codepen
However, I noticed that the blinking effect goes all the way to the end.
Is there a way to fix this issue, or is it inevitable due to the display setting being table-cell?
Why not give it a try? Remove the fixed width from the intro container and move it to the description instead. To center the content, simply add margin: 0 auto to the intro.
#intro{
display: table;
height: 100vh;
margin: 0 auto;
.intro-description{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
}
Check it out on Codepen: http://codepen.io/anon/pen/WGydqj
I was able to achieve a similar effect by making adjustments to your typing keyframe.
@keyframes typing {
from { width: 0 }
51%{border-right:transparent;}
100%{border-right:transparent;}
to { width: 100% }
}
While you can prevent the cursor from disappearing entirely, there are still some issues to consider. For example, there may be a delay in the cursor reappearing at the end of the sentence. Additionally, there may be responsiveness issues on smaller screens where the blinking effect disappears too early. If this solution meets your needs but requires responsiveness, you may need to create multiple keyframes and apply them through media queries.
Nevertheless, this method is quite impressive. I was unaware that a purely CSS typing effect could be achieved. I previously thought that heavy DOM manipulation, such as that used in typeWriter.js, was the only way to achieve this effect. It may be worth considering typeWriter.js as an alternative solution if the CSS trick does not meet your requirements.
When attempting to create a navbar, I encountered small gaps that seemed impossible to close. Adjusting margins only resulted in new gaps appearing on the opposite side. Even when trying to find a compromise, I ended up with gaps on both sides instead. It ...
Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...
Can anyone help me figure out how to make text appear suddenly and then disappear using skrollr? I've been able to get it to fade in and out, but I want it to just show up without any transition. Here's the code I have so far: <div id="style" ...
I am working on dynamically creating a table with data retrieved from an ajax response. My goal is to display the data stored in an object within a tooltip attached to each cell. Currently, I have successfully rendered the table, but it is displaying `[obj ...
In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...
Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...
In my p5.js code, I created a rectangle using rect(): rect(10, 10, 10, 10); Now, I want to add some style to it with a box-shadow effect: box-shadow: 20px 20px 50px #00d2c6, -30px -30px 60px #00ffff; However, when I tried to apply the style using the doc ...
I created a customized form-group to accommodate both large and small screens. The structure looks like this: <div class="form-group row"> @Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 ...
I am working with tabs structured like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> ...
My journey to learning javascript led me to create a simple game called circle of crosses. Below is the code I used: (JS) // JavaScript code here (HTML) <!DOCTYPE html> <html> // HTML code here </html> I came across an issue whil ...
I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...
I encountered an issue where I am unable to expand a simple select tag in Chrome. <select id="filterCategory" class=""> <option>1</option> <option>2</option> <option>3</option> <option>4</option ...
Looking for help on creating a popup div that grows outward from the center of a button and slides to the center of the screen when clicked. Struggling to find snippets, any assistance would be appreciated. Special thanks to Jamie Dixon for helping me get ...
Hello there, I've been attempting to create a simple animation using CSS and a sprite but for some reason it's not working. Can anyone help me figure out what I'm missing? I have created a sample on JS Fiddle. Could someone please explain w ...
Greetings everyone, I am new to the world of development and seeking guidance from experienced individuals. I have been trying to solve a coding issue for quite some time now. I am currently enrolled in a programming course at Code Academy based in Chicago ...
I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...
<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...
I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...
I recently encountered an issue while trying to include images in my HTML file. When I used a local file path like background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'), the image displayed correctly. However, when I tri ...
Hello there, I am attempting to retrieve all the child values from the parent div .clonedInput when the .send button is clicked. I also want the output to be formatted as shown below and placed in a temporary alert(); variable for code confirmation. //Exa ...