I am trying to achieve a color effect that looks like a color sliding across a viewport area that cannot have scroll bars. So it looks like a linear transition from one color to another from either the left or the right. For illustration (of color 1 being replaced by color 2 from the right):
+----------+ +----------+ +----------+
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
+----------+ +----------+ +----------+
In order to attempt this before, I had a div that was larger than the viewport (500%) and it had 5 child divs (each 20% width). I was then using jquery to scroll the larger viewport and the resulting scroll gave the illusion of my wanted color transition. However, I am trying to do a similar process with variable color (the user can enter the color and then choose whether or not it enters from the left or right). So a static-scrolling setup will no longer work. I have tried something below:
+-----+-----+-----+
|Left | View|Right|
| | | |
| Area|Area | |
| | |Area |
+-----+-----+-----+
The View area is 100% of the viewport, the left and right areas are not present. When the user selects a color and a side from which to transition from, I then use jquery to insert a new div into the container with that requested background color. I give it the css values of either {left: 100%}, putting it in the right area) or {left: -100%}, putting it in the left area. However, because my view area takes up 100% of the width of my viewport, css puts whatever I insert below my viewing area. I have attempted a few combinations of css in order to fix this, but none have worked.
#area-container {
overflow: hidden;
width: 100%;
height: 100%;
float: left;
position: relative;
}
.color-areas{
width: 100%;
height: 100%;
position: relative;
float: left;
display: inline-block;
}
Anybody willing to suggest an alternative means for this animation or help me with this css issue?
EDIT: Jsfiddle: https://jsfiddle.net/jm8j8ghh/6/
EDIT2: SOLVED IT. All I had to do was make the container have a relative position and the areas inside of it an absolute position. As discussed in an answer here: Prevent floated divs from wrapping to new line
Final jsfiddle: https://jsfiddle.net/jm8j8ghh/7/
