I have an image sticking out of the bottom of the screen. I want to slide up the image using a CSS animation.
The problem is the image dimensions vary depending on the size of the window. Thus I do not know initially how much of the image is sticking out of the screen.
Simply what I want to do is move the image to bottom: 0%
So the code would look similar to this except that I don't know the starting percentage (I don't know it's -35%).
#-moz-keyframes moveUpImage
{
0% { bottom: -35% }
100% { bottom: 0% }
}
Is there a way to tell CSS that I want the animation to go from starting/current position to bottom: 0% ?
If you want to do a css animation from the current position of the element to the bottom use css transitions, doing it that way you just need to apply the bottom position and the animation will take place. (probably using position absolute).
Related
Knowing full well that it's deprecated, I fooled around with the MARQUEE tag and got the exact result I was looking for: a single transparent png image of a ship travelling at a steady speed across the viewport on an infinite loop. This was beautiful as it was so simple and gave me the required result with very little code and without any headaches whatsoever! As we all know (or quickly find out!), sadly the MARQUEE tag is not advisable on a working website.
However, what I don't know and now need to know is how to replicate the same thing without using those MARQUEE tags? Can it be done solely with HTML & CSS? I have searched online and find many differing and confusing answers.
Can anyone fulfill this challenge?
You can use an infinite CSS animation.
To move from right to left first position the ship just off the viewport to the right, this can be done by translating it 100vw.
Then to move it over to the left translate it by -100%. 100% in a translateX is 100% of the element's own width so the ship disappears off to the left.
.ship {
width: 30px;
height: 20px;
background: blue;
animation: move 10s linear infinite forwards;
position: fixed;
top: 0;
left: 0;
}
#keyframes move {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
}
}
<div class="ship"></div>
I want to animate some sort of floating div.
When the div is in the status 'close' , most of it is hidden on the right of the screen, with only 20px still visible.
When I click on the visible part, the div move to the center of the screen, revealing itself.(it's what I call the status open)
My issue are:
I only know how center a div with margin:auto, which do weird stuff when I animate it
when the div is 'closed', the 'hidden' part create an overflow who add a scrolling. I don't want that
the div have a width who change a lot, depending of the case. Consequently, I cannot use a lot of hard coded value in CSS.
Any idea how to do this?
Even a partial solution would help me.
Edit : the solution (thanks to #sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}
Its too open question to be able to help with 2,3 points, its hard even to say what is the objective and without code, who knows...
Centering div like that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
you can easly animate those properties.
I am looking for a (CSS only) solution to position an image (a background-image on a <div>) based on a percentage value of the image dimensions, not the dimensions of the element.
For example if I use the following: background-position: 50% 50% this will center the image in the <div>, but what I really want to do is have the the 50% mark of the image for both x and y axis (middle of the image) at the left and top of the <div> respectively. This works as expected when doing background-position: 0% 0% as this will align the left of the image with the left of the <div> (and top of image with top of <div>). But as detailed here there appears to be some interesting calculations going on when interpreting those percentage values for background-position.
Here are some examples:
Not what I want:
https://jsfiddle.net/j4etsg8w/
The result I want (but should use percentages not absolute pixel values):
https://jsfiddle.net/qgp4sfdm/
This is only an example and the images I am using will not always have a 1:1 scale ratio to the <div>. For example, this is what it should look like with a 2000x1000 image: https://jsfiddle.net/uxvjgtra/
I know I can do this using JS by requesting the actual size of the image, then figuring out how it's been scaled to fit the <div> then manually positioning accordingly - but the problem is that I want to be able to apply this transformation before the image loads (to avoid a jarring image transformation when the page loads), and I won't have access to the actual image dimensions until the image does load...so that's why I want to use CSS.
Any ideas as to how to accomplish this? Maybe some trick with CSS calc()?
If I understand the end goal, you could apply the background to a pseudo element of the parent, make the pseudo element match the size of the parent, then use translate() to move it up/left 50% of it's own width/height.
.myImage {
width: 500px;
height: 500px;
position: relative;
}
.myImage::before {
content: '';
background: url(http://via.placeholder.com/1000x1000) 0 0 no-repeat / cover;
transform: translate(-50%,-50%);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
body {
background-color: #fff;
}
<div class="myImage">
</div>
I am trying to bring two objects (a cable and a cable cover) together in the center of the screen using CSS animation (ultimately showing the cover going over the cable).
The animation should be this: the cable will fade in and slide in from the right of a responsive (100% width) div, and the cover will fade in and slide in from the left; the cover will be assigned a higher z-index so that it sits on top of the cable end, giving the appearance that it has covered the cable.
Ideally, the animation would be triggered by a button click, since the experience needs to be the same on desktop and mobile. The two objects would have to come together (and slightly overlap) in the center of the div (no matter its current width). The animation is not required to reverse itself once completed.
Does anybody have any leads on how this might be achievable? I, for the life of me, can't wrap my head around how this would be accomplished. I appreciate any help here!
The basic idea would be to start by positioning one element off the left side of the screen: right: 100%
and the other element off the right side of the screen: left: 100%
When the user triggers the change, bring both elements to the center of the screen by setting left/right to 50%.
As an example, here is a rudimentary (and webkit specific) version:
html:
<button id="doit">show me</button>
<div class="cover">cover</div>
<div class="cable">cable</div>
CSS:
.cover, .cable {
position: absolute;
top: 100px;
width: 100px;
height: 25px;
color: white;
-webkit-transition: all .5s ease;
}
.cover {
right: 100%;
background-color: green;
}
.cable {
left: 100%;
background-color: red;
}
javascript:
var doit = document.querySelector('#doit');
doit.addEventListener('click', function() {
var cover = document.querySelector('.cover');
var cable = document.querySelector('.cable');
cable.style.left = "50%";
cover.style.right = "50%";
});
jsfiddle demo
In terms of animations, CSS3 transitions work best in my opinion, as they are far faster and easier to do, however the drawback is that you can only use one animation at a time. A good jQuery library to manage these is http://ricostacruz.com/jquery.transit/. If you need more functionality (and can sacrifice some speed) look at http://julian.com/research/velocity/.
jQuery button clicks are really easy to do:
$('#btnid').click(function() {
// Stuff happens here
});
More information on this can be found at http://api.jquery.com/click/.
Finally, for the CSS. I imagine that this will be the hardest part. You can set the cable images using background-image (http://www.w3schools.com/cssref/pr_background-image.asp). I recommend that you set both elements to position: absolute and then set the one on top to z-index: 99999 (never just use 1). Finally, you can fiddle around with the top, left, and margin CSS attributes if there are some problems with alignment. You may have to put both images in a parent div.
Hope this helps!
I have a div (tab) that I rotate 270 degrees like so:
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotate(270deg);
(Example here: http://users.telenet.be/prullen/align.html)
When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story.
It appears I need to calculate this with jquery like so:
$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight())
(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )
I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps?
(Note that I need to keep the same div structure I have now)
Ideally it'd be as easy as setting bottom to: 3px (the border thickness)
Thanks.
When you want to put the tab at the top of the sticky, apply the class .tab-top to the .sticky-tab element.
.tab-top {
transform-origin: 100% 0%;
transform: rotate(270deg);
top: 5px; /*Border Size*/
right: 5px; /*Border Size*/
}
When you want to put the tab at the bottom of the sticky, apply the class .tab-bottom to the .sticky-tab element.
.tab-bottom {
transform-origin: 100% 100%;
transform: rotate(270deg) translateX(100%);
bottom: 0;
right: -18px; /*Height (appearing as width once rotated) of the tab*/
}
Essentially you want to change the transform origin to be at the bottom right-hand corner of the element and then attach the element to the bottom of its parent. This will place the element exactly below the .sticky. Then use the translateX(100%) to force the bottom of the .sticky-tab to align with the bottom of the .sticky.