Bringing multiple objects together using CSS transform - html

Question

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!

Answer 1

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

Answer 2

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!