The rectangles are supposed to move down, the left then the right. But for some reason they just kind of "jump." Can someone please tell me why?
<!DOCTYPE html>
<html>
<body>
<style>
.imgbox
{
position: relative;
float:left;
text-align:center;
width:120px;
height:130px;
border:1px solid gray;
margin:0px;
margin-bottom:8px;
padding:0px;
-webkit-animation-name:drop;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
animation-name:drop;
animation-duration:2s;
animation-timing-function:linear;
animation-play-state:running;
animation-fill-mode:forwards;
}
#-webkit-keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
#keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
</style>
<div class="imgbox" id="stuff1" style="-webkit-animation-delay:1s; animation-delay:1s"></div>
<div class="imgbox" id="stuff2" style="-webkit-animation-delay:2s; animation-delay:2s"></div>
</body>
</html>
Basically I just want one rectangle to undergo the animation and the next to do it as well, just slightly delayed. This is just an example, there is going to be many rectangles hence why I didn't just make separate divs.
Well, that's how things work in HTML - everything is in pixels, so when you're moving something, you can only move by X-number of pixels, or not move it.
You're moving your rectangles for 90 pixels for the duration of 2 seconds and there's just no way to make it smoother than it is.
However, if you're worried about that initial jump, it's because your element has a top value of zero, and when the animation starts it gets increased to 10 pixels right away, and then the animation continues. To avoid it, simply set their top property to 10px.
See it here: http://jsfiddle.net/adePY/
Related
This code, from a Fiddle at http://jsfiddle.net/8gC3D/471/ in an answer at Tooltip with HTML content without JavaScript) should produce an image which, when hovered over, disappears and causes another element to appear elsewhere on the page. But it makes my browser behave unpredictably. Sometimes there is no effect on hover, sometimes a delayed effect, or the effect is only achieved with some additional movement of the mouse etc.
<style>
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}
#hoverme:hover { background-color:green;position:absolute ;left:300px;top:100px;width:40%;height:20%;}
</style>
<body>
<p id="hoverme">
<img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"> </img>
<span id="thistext">LOCATZ!!!!</span>
</p>
</body>
In trying to understand what was happening, by simplification etc (substituting the IDs for CLASSES etc had no effect), I lastly substituted a div, with a red background, in place of the Deviant Art image. The behaviour only became even crazier:-
<style>
.img {
background: red;
width: 50px;
height: 50px; }
.img:hover {visibility:hidden}
.thistext {font-size:22px; color:white}
.thistext:hover {color:black;}
.hoverme {width:50px;height:50px;
}
.hoverme:hover {
background-color:green;
position:absolute;
left:300px;
top:100px;
width:40%;
height:20%;
}
</style>
<body>
<p class="hoverme">
<div class="img"></div>
<span class="thistext">LOCATZ!!!!</span>
</p>
</body>
In my browser (FF) this generates a red square, on the LHS about 82px down the page.
1. Hovering over results in one of three behaviours: a) it disappears; b) it disappears and then reappears; c) the text "LOCATZ!!!!" is displayed beneath it.
2. Variously clicking or hovering on the red square or on the (invisible) red square's position, and then moving the cursor to the top left corner of the page, sometimes, makes the red square disappear, a red square appear in the top left corner, and a green rectangle 100px from the top and 300px from the left. These results seem unpredicatble/erratic.
What is wrong with the code and why does it so confuse the browser?!? I struggle to even get a repeatable behaviour.
UPDATE
Thanks, Joseph Marikle, good to know, but fwiw I'm trying to learn about hover and visibility funcionality rather than to implement the code from Fiddle. I have been fiddling with the code to try and do this but can't see what is "wrong" with it.
i saw an effect in a website and i tried to write the code my self and i could.
you can see it in here:
click to see the effect
as you can see a black and white image becomes colorful but i only used a trick to do that.the code sets the black and white image's height to 0px while the colorful image is hidden behind it and so it is shown as we hover on the black and white image.
my question is that are there any simple ways to do the same thing?
or change it a little bit, for example can the color drop frop the top of image?
here's my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bgimg {
background-image: url("1.png");
background-repeat:no-repeat;
height:190px;
-webkit-transition:0.5s;
}
.main{
height:190px;
-webkit-transition:0.5s;
background-image: url("2.png");
background-repeat:no-repeat;
}
div:hover .bgimg{
height:0px;
}
</style>
</head>
<body>
<div class="main">
<div class="bgimg">
</div>
</div>
</body>
</html>
It looks pretty simple to me as you have it! If you want the colour to come from the top, just swap the image sources and the heights, so the colour image expands down instead of the b&w image shrinking up:
.main {
height:190px;
-webkit-transition:0.5s;
background-image: url("http://kh-salamat-sk.ir/sweep/1.png");
background-repeat:no-repeat;
}
.bgimg {
background-image: url("http://kh-salamat-sk.ir/sweep/2.png");
background-repeat:no-repeat;
height:0px;
-webkit-transition:0.5s;
}
.main:hover .bgimg {
height:190px;
}
<div class="main">
<div class="bgimg"></div>
</div>
Obviously you can use the same trick to do the same from left and right.
If you want to do more complicated transitions such as a checkerboard fade, then CSS alone probably isn't sufficient (although maybe you can do something with gradients) and you will need Javascript and probably canvas.
Fiddle: http://jsfiddle.net/FtQ4d/1/
I'm doing a project for class, and I've made a webpage where there is a title in the center and two images of a left and right hand underneath. Upon hovering over one of the hands, it will move off of the screen revealing a link underneath. I've got the link hidden under the hands, but when the hand moves, the link is not clickable. How can I make it so?
Here are the relevant parts of the html and css:
<body>
<p id="rsm">(view my resume.)</p>
<div id="ind_wrap">
<p id="ind">INDEX.HTML</p>
<img src="r_hand.png" id="r_hand"/>
<img src="l_hand.png" id="l_hand"/>
</div>
</body>
CSS:
#r_hand{
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover{
animation:m_right 4s 1;
}
#l_hand{
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}
#l_hand:hover{
animation:m_left 3s 1;
}
#rsm{
margin-top:40%;
margin-left:20%;
position:absolute;
z-index:-1;
}
So, #rsm is the link underneath that is revealed when the left hand moves out of it's way, but it is not clickable. How can I fix this?
The problem is the z-index value on #rsm. On hover change it to more positive so that it is rendered above all others
As Arun mentioned in his answer, the z-index is responsible for this however a simple hover didn't work (I assume you don't want to use js).
Are you using Firefox or Chrome? This might be somehow related to your problem.
Also if you are centering elements please use margin: 0 auto; instead of manually tinkering with percentages to fit your screen size. I would also recommend you only use percentages for width not height as it may yield unexpected results on different screen dimensions.
Edit:
I hadn't realised the code in the fiddle is different from the one you posted. I also updated my answer.
Fiddle:http://jsfiddle.net/FtQ4d/1/
I'm doing HTML and CSS for one of my classes, and I've created sort of a landing page for my project. I just want it to say INDEX.HTML on the top and have images of a left and right hand on the bottom of the page. I'm using CSS to animate the hands to move independently off the screen when hovered over and return in a few seconds. This is working somewhat well with the left hand, but when I hover over the right hand, both of the hands end up moving down. How can I fix this?
HTML
<html>
<head>
<title>Hand (Working Title)</title>
<link type="text/css" rel="stylesheet" href="handstyle.css"/>
</head>
<body>
<div id="ind_wrap">
<p id="ind">INDEX.HTML</p>
<img src="r_hand.png" id="r_hand">
<img src="l_hand.png" id="l_hand">
</div>
</body>
And here is my CSS:
body {
overflow:hidden;
}
#ind_wrap {
height:100%;
width:100%;
}
#ind {
font-size:1400%;
color:white;
font-family:Lazy Sunday;
text-align:center;
text-shadow: 3px 1px #000000;
margin-top:-2%;
}
#span_e {
color:black;
}
#r_hand {
background-image:url("rhand.png");
margin-top:-28%;
margin-left:50%;
height:100%;
width:35%;
animation:fr_bottom 4s 1;
}
#r_hand:hover {
animation:m_right 4s 1;
}
#l_hand {
margin-top:-52%;
margin-left:8%;
height:100%;
width:35%;
animation:fl_bottom 4s 1;
}
#l_hand:hover {
animation:m_left 3s 1;
}
#keyframes fr_bottom{
0%{margin-top:100%;}
100%{margin-top:-28%;}}
#keyframes fl_bottom{
0%{margin-top:100%;}
100%{margin-top:-52%;}}
#keyframes m_left{
0%{transform:rotate(0deg);margin-left:8%;margin-top:-52%}
100%{transform:rotate(-50deg);margin-left:2%;margin-top:100%;}}
#keyframes m_right{
0%{transform:rotate(0deg);margin-left:50%;margin-top:-28%;}
100%{transform:rotate(50deg);margin-left:52%;margin-top:100%;}}
There are problems with your HTML. The left hand is not REALLY to the left of the right hand, it just looks that way because the line wraps and the hand ends up on the next line. That's why you need margin-top:-52% for the one and margin-top:-28% for the other to get then to line up on the same vertical position on the screen. You should fix that first.
Also, since everything has vertical-align:baseline by default, the two images align themselves to each other's bottoms. That is, if one moves down, the other moves down too. But that is easily fixed by giving them vertical-align:top explicitly.
Now I fiddled a bit with your fiddle, but by the time I was done, I had changed so much, removed so much stuff unnecessary for the demo, that I'm not sure you can still use it. Here it is, just in case.
(I wasn't able to fix some of the problems though. If you hover the mouse near the top of the hand, it will slide down a little bit but then it will no longer be hovered over; and it will disappear from view because the other animation kicks in. The full slide down effect happens only when you have the mouse near the bottom of the window.)
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.