I have a graphic image that is placed on an html page. I would like to run an animation which slides the graphic image from the middle of the page on the left border to the middle of the screen. Once the graphic image reaches the center of the screen, I want the animation to slide the graphic image diagonally from the center of the screen to the top left corner of the screen. Is this possible?
This is what I have that slides the image from the left margin to the center of the screen:
#img1 {
bottom: 50%;
display: block;
position: absolute;
animation: linear;
animation-name: image1;
animation-duration: 10s;
}
#-webkit-keyframes image1 {
0% {
left: 0;
transform: translateX(0);
}
100% {
left: 50%;
}
}
Thank you.
If I understand what you are asking, you just need another keyframe in your animation. Your current final frame would be changed to 50% and then adding 1 final frame at 100% would allow you to set the CSS for the final frame (being in the top-left corner).
#img1 {
top: 50%;
display: block;
position: absolute;
animation: image1 10s linear forwards;
}
#-webkit-keyframes image1 {
0% { left: 0; transform: translateX(0); }
50% { left: 50%; top: 50%; }
100% { left: 0; top: 0; }
}
<div id="img1">IMAGE</div>
You may still want to play with timings and such, but that shouldn't be too hard. You can increase the animation time in the CSS and add additional frames to create pauses/etc.
Related
I have img tag set with css:
.bakery-item > img {
content: url('img/art-of-cakes-sprites.png');
object-fit: none;
}
how can I then resize image just like I would with background-size property?
.bakery-item > img {
width: 50%;
/* resize image by 50% */
}
Image is a sprite so I dont want to use cover-like solution. I tried using transform: scale(.5); on element but this doesn't make element shrink in DOM (it still takes the same space).
I couldn't find anwser over the internet.
This code sets the transform origin to the top left corner and scales to half size.
.bakery-item > img {
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
I want to reproduce my mockup : http://imgur.com/ZsR88fe
But I don't know how to skew my background image, only at the bottom. For nom I try the transform skew but all the image is skewed and The top of the page look ugly :
http://imgur.com/TkUgppW
What can I do to fix it ?
Thanks in advance
Skewed or Slanted div, hero or landing pages could be made quickly using the clip-path CSS property with polygon function.
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); //This makes a complete square
The skew could be made reducing the percentage in each angle.
Here's how to make skew on any components.
.skew {
height: 50vh;
width: 100%;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 0px 100%);
background:#0a3;
}
<div class="skew">
<h1> Hey there </h1>
</div>
To make a bottom skew for your image with CSS, you're gonna need a few wrappers:
Content div for all the text
Image wrapper that will create the skew and hide the skewed area
Image div that contains nothing but the hero picture
Then you need to apply the opposite skew to the image div to make it not distorted. After that you have to mess around with positioning to ensure that as much of the image is visible and the top skew is hidden. Maybe there's a more clever solution, I just use hardcoded pixel values.
Here's the demo, and here's the important bits:
HTML
<div class="hero">
<div class="bg-img-wrapper">
<div class="bg-img"></div>
</div>
<div class="hero-content">
<h1>Cool company slogan</h1>
<p>Catchy subslogan</p>
</div>
</div>
SCSS (you can just replace the variables and it will be valid CSS, but they help with readability here)
$skewDeg: 5deg;
$offset: 70px;
.hero {
height: 100vh; // Make the hero area take 100% height
overflow: hidden; // Child's skew will cause overflow, so we hide it here
position: relative; // Children will be positioned absolutely relative to this
}
.bg-img-wrapper {
transform: skewY($skewDeg);
position: absolute;
top: -$offset; // Move the top skew offscreen
bottom: $offset; // Move the skewed area up a bit so more of it is visible
right: 0;
left: 0;
overflow: hidden; // Hide the areas that we skewed away
}
.bg-img {
background: url('https://unsplash.it/1280/720/?random') center no-repeat;
background-size: cover;
position: absolute;
top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen
bottom: -$offset;
right: 0;
left: 0;
transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again
}
.hero-content {
position: relative; // Relative positioning here makes the hero content visible
}
I am trying to move a div from top left corner to bottom right corner using only CSS (this is required for my assignment). Also, I need to see the transition happening (the div sliding to the bottom). I tried using transform:translate() but i can't get my div to go to the bottom corner! Here is what I've done until now: http://codepen.io/ascii-hero/pen/JXEXVB
Tldr;
Solution 1: Using Left/Right/Top/Bottom positioning
In order for your div to move, you will need to set a parent element to relative, and the div to absolute positioning. Note, since the html element is the 'top most' element of the html tree, it is automatically assumed this relative position.
div {
background: red;
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
}
html:hover div {
top: auto;
left: auto;
bottom: 0;
right: 0;
}
<div></div>
Solution 2: Transforms
Using transforms is great, as you can also add transitions for a smooth effect. Just note you'll need to add just a slight alteration to solution 1.
div {
background: red;
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
transition: all 0.4s;
}
html:hover div {
top: 100%;
left: 100%;
transform: translate(-100%, -100%);
}
<div></div>
Explanation of Solution 2
To allow for transforms, the DOM needs to know the start point, the end point, and the duration explicitly. So hence, the start is set to
top:0; left:0;
To represent the top and left vales.
The 'duration' can be set using the transition property. Here I have set this to 0.4s(econds), but this can be altered to any suitable value.
Lastly, and most crucially, you need to set a definitive end point to your transform. Here you will notice the
top:100%;left:100%;
However, as I am sure you are aware in doing that it will put the very top left corner at this position, (100%,100%) so to speak. It is hence the reason for the inclusion for the translate to 'move the box back onto the screen'. The translate property takes two values, the X and Y disposition. By using a % as the unit, it will move a % of the size of either the width or height of the box, depending on the axis you are moving it. In other words, using
transform:translate(-100%, -100%);
will move the box 100% (of itself) to the left, and 100% (of its height) up, hence it can be seen in the bottom right of the page.
try this
#block:hover {
left: 100%;
top: 100%;
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
transform:translate(-100%, -100%);
}
I'm on mobile so I hav t tested it but it /should/ work
So you want to move the div to bottom right corner. In your code you are doing
#block {
background: cornflowerblue;
width: 100px;
height: 100px;
left: 0;
top: 0;
}
so instead of top to be 0, you want bottom to be 0, and instead of left you want right.
I want to make a device-independent animation in HTML5/CSS3. That means I have a background image, specifically drawn so that its edges can be cut off, and I am using it in a div element with background-size: cover, like this:
#main-image {
background: url(intro1-1.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 0;
}
#propeller {
background: url(propeller2.png) no-repeat;
position: relative;
top: 265px;
left: 1080px;
z-index: 10;
background-size: 100% 100%;
width: 18%;
height: 12%;
}
<div id="main-image"><div id="propeller"></div></div>
On top of the background layer, I want to draw the animating layer. Here comes the trouble: how do I position the transparent animating parts to a specific position in the full (non-scaled) background image?
I'd also need to scale the animation layer using the same ratio as the background was scaled. But how do I do that?
SO in effect, I'm looking for a way to load the HD background image, define the HD animating layer on top of it, and then apply the cover to fill the full browser screen.
What is the simplest way to do this?
In my experience this is hard to do in pure CSS. I've made something similar to what you're asking here: http://jsfiddle.net/ahhcE/
Here's the propeller specific code:
#propeller {
background: url(propeller2.png) no-repeat;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -9%;
margin-top: -6%;
z-index: 10;
background-size: 100% 100%;
width: 18%;
height: 12%;
}
I positioned it absolute just for ease, but you're likely going to want it relative if it's positioned relative to the parent div.
(sorry for the colors, my replacement for your images)
The problem is that on the top margin, and height percentages, the browser inherits those values from the width of the window. So you'll notice that if you resize the view window the box doesn't stay perfectly centered. I've usually solved this in the past using javascript. Something like this:
function heightAdjust() {
var windowHeight = $(window).height();
totalMenuHeight = $("#menu").height();
document.getElementById('menu').style.marginTop = windowHeight / 2 - totalMenuHeight / 2 + 'px';
$('.thing').css("height", windowHeight+'px');
}
Hopefully that helps. Centering vertically is really your only issue here, you can also hack this successfully using table styling which is what a few sites use for vertical positioning. More on that, and other solutions here: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
I have been trying to make a simple site like this. The button never does show up as intended. I want #play_button to show up exactly on the play button image in the background. How can it be done?
My CSS code:
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover; /*For covering full page*/
}
#play_button {
position:relative;
transition: .5s ease;
top: 191px;
left: 420px;
right: -420px;
bottom: -191px;
}
#play_button:hover {
-webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
}
Just one thing more, problem occurring is that if I resize the browser window, then the image moves to a new position.
UPDATE:
Problem solved :) Here, in this example, you can see how the button remains in the center of the page even if you resize the browser window.As always, you can tweak the left and top offsets to get the desired results. Here's the code.
Try using absolute positioning, rather than relative positioning
this should get you close - you can adjust by tweaking margins or top/left positions
#play_button {
position:absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
http://jsfiddle.net/rolfsf/9pNqS/
I'd use absolute positioning:
#play_button {
position:absolute;
transition: .5s ease;
left: 202px;
top: 198px;
}
It seems some what center of the screen. So I would like to do like this
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover;
text-align: 0 auto; // Make the play button horizontal center
}
#play_button {
position:absolute; // absolutely positioned
transition: .5s ease;
top: 50%; // Makes vertical center
}
So, the trick here is to use absolute positioning calc like this:
top: calc(50% - XYpx);
left: calc(50% - XYpx);
where XYpx is half the size of your image, in my case, the image was a square. Of course, in this now obsolete case, the image must also change its size proportionally in response to window resize to be able to remain at the center without looking out of proportion.