Make Tween Animating Lines From Inside Out - javascript

I have an image of lines, as depicted in the small photo below, that I would like to animate with a Tween to make it appear as though it is being drawn from the middle outwards.
I have come up with a good way of doing this, at least theoretically. I have set up my image dimensions and absolute position to be where I want it at the end. I have contained it inside a small absolute positioned div with auto margins and zero width/height that increases with a Tween, so that it expands outwards from the middle slowly and therefore as the container expands it looks like the image is being "drawn" outwards.
However, I have a problem, as demonstrated by the image below. The lines image is positioned relative to the containing div, in the centre, rather than the body (and I understand that this is because they are both absolute positioned). How do I position the child element in the container relative to the body rather than the container, without removing it as a child (there are other layers of my background that would be covered by this div expanding)?
Here is my code:
<div id='cover'><div id='child'></div></div>
CSS:
#cover {
background-image: url('/images/slide21/bg_layer3.png');
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: none;
height: 46vh;
width: 78.5vw;
z-index: -8;
position: absolute;
top: 0vw; // these are coordinates that should
right: 0; // be positioned relative to the
left: -0.5vw; // body not container
opacity: 1;
}
#container {
width: 0; // as animation occurs, width and
height: 0; // height increase to 100%
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow: hidden;
z-index: -5;
opacity: 1;
}
Thanks.

Related

CSS to put the game player in its position

I'm making a game using React.js, and the player element is a simple image with sprite images implemented in CSS:
.player {
position: absolute;
height: 32px;
width: 32px;
object-fit: none;
transform-origin: 50% 50%;
transform: scale(calc(var(--factor) / 2)) rotate(0.02deg);
image-rendering: pixelated;
}
How would I add the translate() function to make the player's top left corner exactly at (0, 0)?
If you want to be all the way at the top, no matter what else is on the page, position it absolute. This ignores everything up to the next highest positioned element That means it has a position other than the default. You can do that like this.
position: absolute;
top: 0;
left: 0;
/// You might need to adjust for your transform here though
oops... just saw that you already had it absolute. You were 90% of the way there.
For this .player needs a wrapped element with position: relative, and we don't need transform-origin or transform styles:
.parentOfPlayer {
position: relative;
}
.player {
position: absolute;
top: 0;
left: 0;
}

re-center div when content change

I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Surround a responsive image with divs

I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.
I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}

Repeating images followed by another image inside a DIV

Just wanted to say thanks in advance.
First I have a single div that is Height: 100% and Width: 130px I have a 130x5px image that i want to repeat vertically until i get to 75% of the screen height. Then i want to place another image directly underneath it. I know how to repeat the image vertically. But i am not sure how to attach another image directly below it.
P.S. I want it to all be in the same div so that i can use JQuery to control the div and not just the individual elements inside of it.
How about something like this:
div.snocavotia {
background: url(http://lorempixel.com/130/5/) repeat;
z-index: 100;
height: 100%;
width: 130px;
position: relative;
}
div.snocavotia:after {
background: url(http://lorempixel.com/130/30/) repeat;
z-index: 1;
content: '';
position: absolute;
top: 75%;
right: 0;
bottom: 0;
left: 0;
}
Example: http://cssdesk.com/h2XGc

Centered div with a transparent background with jQuery

How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.

Categories