So after working my behind off all day at my website, I find out that it's basically only compatible on my computer on 1920*1080.
I suppose that I'm to ''glue'' objects somehow to x areas of the website but I don't know how to.
I know this is not exactly a direct question but can you please tell me what is causing my website to go out of order when resized? Here is the whole website JSfiddle
http://jsfiddle.net/vuz2L/
Here is the HTML code:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Heilsa</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<img id="bordi" src="heilsa2.png"/>
<div id="bigtext">Heilsa</div>
<div class="menu">
<ul>
<li>Heim</li> <span id="menubord">
<li>Hollt Mataræði</li>
<li>Reynslusögur</li> </span>
</ul>
</div>
<div id="content">
<div id="block">
</div>
<div id="meginmal">
<h1>Fyrirsögn</h1>
<p>ch-slahing thust get a proper bitch-slapping to stop making walls of text, but if you are weird then thaA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othoesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othsome other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.A wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.
</p>
</div>
</div>
<div class="push">
</div>
<div id="wrapper">
<img id="undir" src="undir.png"/>
</div>
</div>
</body>
</HTML>
And CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
position:relative;
height: 100%;
margin: 0 auto -232px;
}
.menu {
width:700px;
height:180px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:135px;
}
#menubord {
}
.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:red;
font-weight:600;
font-size: 22px;
letter-spacing: 1.2px;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:24px;
animation-name: opac;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#keyframes opac
{
0% {opacity:1}
25% {opacity:0.5}
50% {opacity:0.1}
75% {opacity:0.5}
100% {opacity:1}
}
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:1}
25% {opacity:0.5}
50% {opacity:0.1}
75% {opacity:0.5}
100% {opacity:1}
}
.menu a:active {
text-shadow: 12px 8px 12px #333333;
}
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
background: red;
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Mozilla */
opacity: 0.2; /* CSS3 */
position: absolute;
top: 0; left: 0;
height: 100%; width:100%;
border-radius: 20px;
margin:10px;
}
#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}
#bordi {
height:100%;
width: 100%;
margin: 0%;
}
#wrapper {
bottom:0;
width:100%;
height:232px; /* Height of the footer */
margin-top:200px;
}
.push {
height: 232px;
}
#bigtext {
z-index:1;
margin-top:-300px;
margin-left:700px;
position: absolute;
font-size:70px;
font-family: Trajan Pro;
}
#bigtext a {
text-decoration: none;
color:black;
border-bottom:solid;
border-color: rgba(0, 255, 255, 0);
}
#bigtext a:hover{
animation-name: big;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: big;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#keyframes big
{
0% { border-color: rgba(0, 0, 0, 1); }
50% { border-color: rgba(0, 0, 0, 0); }
100% { border-color: rgba(0, 0, 0, 1); }
}
#-webkit-keyframes big /* Safari and Chrome */
{
0% { border-color: rgba(0, 0, 0, 1); }
50% { border-color: rgba(0, 0, 0, 0); }
100% { border-color: rgba(0, 0, 0, 1); }
}
when you trying to design website try not to use fixed values like X px, when X is large number, like width: 800 px;.
for example if you change #content to this:
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:5%;
margin-left:5%;
padding:10px;
padding-bottom:60px;
/* Height of the footer */
}
where i changed
margin-right:5%;
margin-left:5%;
the main content is becoming more likely.
Try avoid big fixed values, changing them to percentable values, or align: left;, etc
You have a lot of margin-left + position:absolute values which breaks the layout. Instead of using absolute positioning, try to use margins and floats, or even browser natural flow of displaying elements in the page.
Related
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 am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this?
HTML:
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
CSS:
#keyframes strike{
from{text-decoration: none;}
to{text-decoration: line-through;}
}
.strike{
-webkit-animation-name: strike; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: strike;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
You can use a pseudo like this
Note (thanks to Phlame), this left-to-right animation won't work if the line to strike breaks in to a second line. For that one need to use yet another pseudo element and some script to position the two properly. Or use some other animation effect, e.g. like the one suggested in Oriol's answer.
#keyframes strike{
0% { width : 0; }
100% { width: 100%; }
}
.strike {
position: relative;
}
.strike::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
It depends on how you want to animate it.
Since text-decoration-color is animatable, you can animate it from transparent to auto.
But this property is not widely supported yet.
#keyframes strike {
from { text-decoration-color: transparent; }
to { text-decoration-color: auto; }
}
.strike {
text-decoration: line-through;
animation: strike 4s linear;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Here's a variation on the accepted answer, using an image to provide an animated "scribble" strike-through.
html {
font-family: Helvetica;
font-size: 24px;
}
.strike { position:relative; }
.strike::after {
content:' ';
position:absolute;
top:50%; left:-3%;
width:0; height:10px;
opacity:80%;
transform:translateY(-50%);
background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
animation: strike 2s linear .3s 1 forwards;
}
#keyframes strike { to { width: 106%; } }
This thing and <span class="strike">this thing and</span> this thing.
It's very elegant, IMO, to use linear-gradient as background, and paint line which is the same color as the text (currentColor).
This solution is very flexible, opens up the door to many interesting effects and is also much less code than a pseudo-element solution.
PS: It also supports multi-line texts
From my CodePen:
span {
--thickness: .1em;
--strike: 0;
background: linear-gradient(90deg, transparent, currentColor 0) no-repeat
right center / calc(var(--strike) * 100%) var(--thickness);
transition: background-size .4s ease;
font: 25px Arial;
padding: 0 .2em;
}
span:hover {
--strike: 1; /* "1" means "true" (show the strike line) */
background-position-x: left;
}
<span contenteditable spellcheck='false'>
Strike-through animation (hover)
</span>
According to W3Schools, the text-decoration property is not animatable.
However, if you use jQuery, you can. (See here)
I'm trying to create some Easter animation with a little bunny that catches a falling egg. Now that's working great, but where i'm having troubles is that i can't seem to create a button that restarts my multiple animations and let's them fall/move down again once more.
I've tried alot of things this one seemed was the closest i could get but this only seemed to play/pause the whole thing and the elements would disappear after i released the hover.
#logo:hover ~ #ei, #otherelements{ -webkit-animation-play-state:running; }
/* most likely the problem /*
animation-iteration-count: 1;
But since the multiple animations move separately i kind of need the animation-iteration-count 1
Does anyone know if this is possible with just CSS or do i need to implement some javascript/jQuery?
http://jsfiddle.net/p5r9F/
This is easy young squire (Sorry)
#keyframes yournameofanimation {
0% {top: 0; left: 0; background: #dda221;}
50% {top: 500px; left: 100px; background: #e0e0e0;}
100% {top: 0; left: 50px; background: grey;}
}
.nameofclass {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
position: relevant;
}
.nameofclass:hover {
animation: yournameofanimation;
animation-duration: 1s; /* of course can be varied */
}
</style>
<div class="nameofclass">
<p> Try it! </p>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I wish to do something similar to this,
http://timheuer.com/blog/archives.aspx
i need to create a interactive circular links using CSS.
There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The simplest example is;
1 Image Background
#link1 {
background-image: url('/images/button1-trans.png')
}
#link2 {
background-image: url('/images/button2-trans.png')
}
#link1:hover {
background-image: url('/images/button1.png')
}
#link2:hover {
background-image: url('/images/button2.png')
}
1b Image Spriting
Using multiple images like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);
Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;
#links a {
background-image:url('/images/allButtons.png')
background-position: 0px 0px; /* sets the row for all normal links */
width: 64px;
height: 64px; /* bounding box for the image */
}
#links #link1 {
background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
background-position: -64px -64px; /* second image, second row */
}
Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.
However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?
2 Pure CSS
You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.
3 Icon Fonts
☺☻☼☽☾☿
This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?
Zoom in on the icons above, and Here's a fiddle
You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.
EXPLANATION
The page You show us use a images sprit with icon of all menu item, event with border. My example show how do this with simple css. You can also use images sprit but including only icon.
HTML CODE:
<ul>
<li><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
<li><span>About</span></li>
<li><span>Projects</span></li>
</ul>
CSS CODE
html, body {
background: #369BD7;
font-family: tahoma;
font-size: 12px;
}
a {
color: #fff;
}
ul {
clear:both;
margin: 0;
padding: 0;
}
ul li {
display:block;
position: relative;
float: left;
height: 80px;
width: 80px;
padding: 0;
margin-left: 10px;
list-style: none;
text-align: center;
white-space: nowrap;
}
ul li:first-child {
margin: 0;
}
ul li a {
display:block;
margin: 10px auto;
height: 40px;
width: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 4px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}
ul li a:hover {
background-color: #fff;
}
ul li a span {
display: block;
position: absolute;
bottom: 0;
left:0;
width: 100%;
text-align: center;
z-index: 1;
}
BORDER RADIUS BROWSER SUPPORT
http://caniuse.com/#search=border-radius
DEMO
http://jsfiddle.net/bartekbielawa/fgPf8/6/
The trick is to have the border-radius be half of the height and width. Then just use a gif or png for IE fallback.
.round-button {
width:100px;
height:100px;
border-radius:50px; /* be sure to add all the browser prefix versions */
}
I'm trying make an animation as if I was typing. To achieve this I'm using CSS animation 'steps'.
The animation itself works just fine. However, if I want to animate multiple lines of text, they all start playing at the same time. Which isn't giving me the desired effect. (Tried using <br> in a single <h1>, which cut off the text, but again started the animations simultaneously.)
To counter this, I put the next line of text in an <h2> and set an animation-delay for every line of text. Which works, but the text is visible before the animation starts.
I want the text to be hidden until the animation starts playing, to really get that 'live typing' effect.
Anyone got any ideas on how I can achieve this?
HTML
<div class="content">
<h1>Hi there! My name is Jeff.</h1>
<h2>And I create cool stuff.</h2>
</div>
CSS
.content h1 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end 2s;
}
.content h2 {
background:white;
opacity:0.7;
white-space:nowrap;
overflow:hidden;
border-right: 3px solid black;
-webkit-animation: typing 2s steps(26, end),
blink-caret 1s step-end infinite;
-webkit-animation-delay:3s;
}
#-webkit-keyframes typing {
from { width: 0; }
to { width:400px; }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
jsFiddle
The simplest solution is to add:
animation-fill-mode:both;
to your h2 (with the necessary prefixes). That way, you aren't setting it to a zero width outside of your animation, so browsers that don't support this CSS will display the heading (which I guess is what you're after). See this fiddle.
The animation-fill-mode:
specifies how a CSS animation should apply styles to its target before
and after it is executing
Setting it to both in this instance means that your h2 will have a width of 0 before it starts executing, and a width of 400px after.
As the comments already include a solution, perhaps this might be another way of doing it - by using timeouts and setting visibility: hidden at the beginning (For simplification I just used jQuery to set the visiblitiy).
Include the following CSS rule:
.content {
visibility: hidden;
}
As JavaScript you would have:
window.setTimeout(function() {
$('#contentdiv h1').css('visibility', 'visible');
}, 100);
window.setTimeout(function() {
$('#contentdiv h2').css('visibility', 'visible');
}, 3100);
See the jsFiddle
p
{
font:500 22px consolas;
width:20ch;
white-space:nowrap;
overflow:hidden;
animation:type 5s steps(20) infinite;
}
#keyframes type
{
0%{ width:0; }
}
<p>Text Type Animation</p>
Not quite the OP's question, but in case someone else finds this useful:
I wanted to be able to typing-animate a pararaph of text, a single <p> tag which might contain text that would wrap, and produce an unknown number of actual lines. Applying a simple linear animation to the p tag itself wouldn't work, so instead, I took the approach of having several "hider" elements that would cover the paragraph of text, each one line high, and then I would animate each of those so they would shrink away, reveal characters from the line of text beneath them.
The HTML looks like this:
<div class="container">
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap -->
<p class="typing">
This paragraph of text will be animated
with a "typewriter" style effect, and it
will continue to work even if it splits across
multiple lines. Well, in this case, up to a
maximum of 5 lines, but you get the picture.
</p>
<div class="hiders">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
You need a container, and position the .typing element and the .hiders using absolute so that they're on top of each other:
.container {
position: relative;
font-family: Consolas, monospace;
}
.typing {
position: absolute;
top: 0;
margin: 0;
z-index: -1;
}
.hiders {
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
And the animation gets applied to each p inside the .hiders:
.hiders p {
position: relative;
clear: both;
margin: 0;
float: right; /* makes animation go left-to-right */
width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
background: white; /* same as page background */
animation: typing 2s steps(30, end);
animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */
}
.hiders p:nth-child(2) {
animation-delay: 2s;
}
.hiders p:nth-child(3) {
animation-delay: 4s;
/* etc */
Here's the final fiddle:
https://jsfiddle.net/hjwp/514cLzxn/
Original credit for inspiration: Lea Verou