I have CSS animations running on an HTML element but I am unable to position the HTML element freely on the HTML page so, how would I do this?
I have tried using doing this in order to position the HTML element freely on the page.
<div style="text-align: center;"><p class="animated flipInX">2</p></div>
But it does not work.
/* GLOBAL STYLES */
body {
background: #011;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: Consolas,monaco,monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<div class="typewriter">
<h1>1</h1>
</div>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<p class="animated flipInX">2</p>
</head>
</html>
To position things anywhere on the screen, likely means you also want to be able to use any part of the screen even if there were items all over the page. Best way to do this is to use the position css property. so on whatever you want to move around, write a css class or id to it like this;
position: absolute;
z-index: 1;
top: 0px;
left: 200px;
Here is a link I played with the example you gave. https://jsfiddle.net/cphutx78/
Let me know if it hel
Related
I have 1 error and 1 question:
Error: Image
If you see on the right side, the cursor has gone to the right side completely
Question:
How do I do that after the typewriter effect of "typeWriter1" is completed it starts effect of "typeWriter2"
I tried to use display: inline-block
It did work but it became very choppy it looked like it was coming from left side of border
#introduction {
font-size: 175%;
color: #d3d3d3;
text-align: center;
font-family: "Solitreo", sans-serif;
}
/* Typewriter effect */
.typeWriter .typeWriter1 {
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
<div id="introduction">
<div class="typeWriter">
<h1 class="typeWriter1">I am Anay,</h1>
<h1 class="typeWriter2">A programmer</h1>
</div>
</div>
I am trying to add typewriter effect to some text on a webpage, however, it is not working as intended. Since this question is about animation I have given small video (only 5-6 sec) links bellow.
How do I make that cursor stop from going further than it needs to be ? See Here
This animation starts as soon as I open the website, but this section in in the middle of the webpage so the user is not able to see that animation.See here
This does not adjust itself, when viewed it mobile. So what should I do so that it automatically get smaller with small screen (keeping the whole text in the same line). See here
.pcb-text p {
font-size: 60px;
animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
border-right: .12em solid orange;
/ width: 28ch;
}
#keyframes type-writer-effect {
0% {
text-align: center;
width: 0ch;
}
100% {
width: 28ch;
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
<div class="pcb-text">
<div class="text-center">
<p>Physics, Chemistry, Biology.</p>
</div>
</div>
In order to avoid your problem, you need to set flex rules for the parent .pcb-text, and also, in keyframes, change it to the transition - from{} and to{}.
.pcb-text {
display: flex;
justify-content: center;
align-items: center;
}
.pcb-text p {
font-size: 60px;
animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
border-right: .12em solid orange;
}
#keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
<div class="pcb-text">
<div class="text-center">
<p>Physics, Chemistry, Biology.</p>
</div>
</div>
This would be the effect with JS
<!DOCTYPE html>
<html>
<body>
<button onclick="typeWriter()">Click me</button>
<p id="demo"></p>
<script>
var i = 0;
var txt = 'Physics, Chemistry, Biology.';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
</script>
</body>
</html>
To call the effect when your element is visible you can do something like that with jQuery:
var has_fired;
$("html").on("scroll", function () {
if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
typeWriter()
has_fired = true; // use this if only want fired once
}
});
If you want to use a CSS animation you can check out: https://css-tricks.com/snippets/css/typewriter-effect/
You can start the CSS animation just like the JS animation
var has_fired;
$("html").on("scroll", function () {
if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
$("#yourElement").addClass("animation-class");
has_fired = true; // use this if only want fired once
}
});
First of all, if you want the animation to start when the user scrolls to the section in which it exists you're going to need a java-script (you can use jQuery too) code like the one in this link.
Secondly in order to have different font sizes in different screens, I would prefer to use Bootstrap but if you're not familiar with Bootstrap, you may use CSS media queries like below:
#media only screen and (max-width: 600px) {
.pcb-text p {
text-align: center;
font-size: 20px;
animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
border-right: .12em solid orange;
}
}
#media only screen and (min-width: 601px) {
.pcb-text p {
text-align: center;
font-size: 60px;
animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
border-right: .12em solid orange;
width: 28ch;
}
}
These two media queries are written for two screen sizes (screens with width of 600 pixels or less and screens with with of 601 pixels or more). You can expand these for your own needs.
Finally for the cursor I have to say that as you do not know the width of you p tag in advance, it's a nice idea to put it inside a div and set the width of the p tag to 100%. In this case the cursor will not move to the end as p tags by default get 100% of the width of their container tags. But to find the exact width of the p tag (which is the length of it), you'd better use a java-script code like below:
<script>
var text = document.getElementById("myParagraph").innerText;
var textLength = text.trim().length;
//Then set the length of your div which holds the p tag equal to textLength considering the number of pixel each character takes in your chosen font-size
</script>
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
I have put a css in my outlook signature, however when I send an email it doesn't work.
<head>
<style>
.typewriter h4 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 30% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
</head>
<div class="typewriter">
<h4>Gaurang Shah</h4>
</div>
Above is my code, however in email signature I see no movement in Text.
Unfortunately, Outlook doesn’t support animation property. You could refer to this link:
https://www.campaignmonitor.com/css/animations/animation/
However, if possible, you could try use GIF to achieve your request.
For more information, please see the following link:
The animated graphic in my e-mail message doesn't work
following is the html code i have written
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
width: 200px;
height: 250px;
border-radius: 15px;
background-color: pink;
border-color: red;
border-style: solid;
display: block;
-webkit-animation: myrotate 3s infinite; /* animation enabled */
}
#box:after /* not working if animation is disabled*/
{
content:"";
display:block;
position:absolute;
bottom:-15px;
left:20px;
width:0;
border-width:15px 25px 0;
border-style:solid;
border-color:#13961c transparent;
}
#-webkit-keyframes myrotate
{
from
{
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
to
{
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<center>
<div id="box">
xyz <br/>
yzx <br>
</div>
</center>
</body>
</html>
the problem is the speech bubble pointer appears only when animation myrotate is enabled. If it is commented the pointer disappear. I am new to css3 and html5. please explain.
Add this to the CSS:
#box {
position: relative;
}
The elements which have a position absolute will only be positioned with respect to the closest parent which also has a position other than the default (static) or if none of the parents have a non-static position, then the position is determined wrt the viewport.
I suspect when an element is animated, the browser doesn't treat is as a statically positioned object anymore.