CSS/JavaScript slide DIV out and slide DIV in - javascript

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time.
My HTML code is like this:
<body>
<div id="content">
<div id="page1">
<!-- Content Area 1 -->
</div>
<div id="page2">
<!-- Content Area 1 -->
</div>
</div>
</body>
Currently I am using
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";
to switch between the pages, but I would like to have the transition as smooth as possible.
Is there a way I can do this, without jQuery and preferably just in CSS?
If not, how can I do it in jQuery?

Yes you can do it with pure css by using animation keyframes.
HTML
<div id="content">
<div id="page1" class="page">
<!-- Content Area 1 -->
</div>
<div id="page2" class="page">
<!-- Content Area 1 -->
</div>
</div>
CSS
html,body {
height: 100%;
overflow: hidden;
}
#content {
position: relative;
height: 100%;
}
.page {
position: absolute;
top:0;
height: 100%;
width: 100%;
}
#page1 {
background: #d94e4e;
left:-100%;
-webkit-animation: left-to-right 5s linear forwards;
animation: left-to-right 5s linear forwards;
}
#page2 {
background: #60b044;
left:0;
-webkit-animation: right-to-left 5s linear forwards;
animation: right-to-left 5s linear forwards;
}
#-webkit-keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#-webkit-keyframes right-to-left{
from{left:0}
to{left:100%}
}
#keyframes left-to-right{
from{left:-100%}
to{left:0}
}
#keyframes right-to-left{
from{left:0}
to{left:100%}
}
However there is one huge limitation to this method. CSS can't handle any real events. So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript.
Demo jsFiddle
Edited
Now the left one enters and the right one exits at the same time.
UPDATE
The same example using translate3d => jsFiddle

here's an (almost) full CSS solution:
If you can be more specific about what you want I can happily tweak or guide you through the code to help you.
It relies on using translate3d:
transform: translate3d(-200px, 0, 0);
DEMO

using jQuery
http://jsfiddle.net/5EsQk/
<div id="content">
<div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
Content Area 1
</div>
<div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
Content Area 1
</div>
</div>
$(document).ready(function() {
$('#page1').animate({
marginLeft: "+=90"
}, 5000);
$('#page2').animate({
marginRight: "+=90"
}, 5000);
});
edited fiddle => http://jsfiddle.net/5EsQk/1/

Very much possible without jQuery, using only CSS and CSS transitions.
You can set up your CSS so that if <div id="content"> has no class .showPage2, it shows page 1. If it does have .showPage2, it shows page 2.
The transition is then only triggered by toggling the class using (native) Javascript. The animation is handled by CSS transitions. This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; only not with the fancy transition. CSS3 transitions are generally very smooth.
This is what the CSS would look like:
#content
{
position: relative;
overflow: hidden;
}
#content #page1
{
position: absolute;
left: 0%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content #page2
{
position: absolute;
left: 100%;
width: 100%;
height: 100%;
transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
}
#content.showPage2 #page1
{
left: -100%;
}
#content.showPage2 #page2
{
left: 0%;
}
And the Javascript could look something like this:
function showPage1()
{
document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
document.getElementById("content").setAttribute("class", "showPage2")
}
I hope this handles it in a way that fits your needs.

Related

HTML - Second IMG hover issue

I have 2 semicircles stuck next to each other forming a circle. When I hover on the left semicircle, the right one lowers it's opacity (which is what is supposed to do) but when I hover on the right one, the opacity doesn't change at all.
HTML:
<div id="animation-components">
<img src="leftball.svg" alt="" class="animation-item-01">
<img src="rightball.svg" alt="" class="animation-item-02">
</div>
CSS:
#animation-components {}
.animation-item-01 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(631px,80px);
height: 320px;
transition: opacity ease 0.5s;
}
.animation-item-02 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(627px,80px);
height: 320px;
transition: opacity ease 0.5s;
}
.animation-item-01:hover + .animation-item-02{
opacity: 50%;
}
.animation-item-02:hover + .animation-item-01{
opacity: 50%;
}
What can I alter to make this work?
The issue is that you can only select the next sibling with the adjacent sibling selector.
.element-1 + .element-2 /* good */
.element-2 + .element-1 /* not so good */
Since .animation-item-02 comes after .animation-item-01, there is no way to select the previous .animation-item-01 from .animation-item-02
Doing the following will fix the issue:
#animation-components:hover > div {
opacity: 50%;
}
#animation-components > div:hover {
opacity: 100%;
}
CSS Combinators can't be used to apply styles to elements before target element.
The adjacent sibling selector (+) will aply to all adjacent elements, not to it's opposite elements.
CSS It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.
To achieve the desired, you can do the folowwing:
#animation-components:hover img {
opacity: .5;
}
#animation-components img:hover{
opacity: 1;
}
<div id="animation-components">
<img src="https://via.placeholder.com/150.png/ff0000" alt="" class="animation-item-01">
<img src="https://via.placeholder.com/150.png/ff0000" alt="" class="animation-item-02">
</div>
It might just be me but I find it heaps easier to throw in just a little bit of javascript and avoid messy css combinators. Heres my fix, script goes anywhere in your html file, I put it after the closing body tag.
<script>
function fadeOut(obj) {
document.getElementById(obj).style.animationName = "fadeOut";
}
function fadeIn(obj) {
document.getElementById(obj).style.animationName = "fadeIn";
}
</script>
#item1 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(631px,80px);
height: 320px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#item2 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(627px,80px);
height: 320px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0%{opacity: 1;}
100%{opacity: 0.5;}
}
#keyframes fadeIn {
0%{opacity: 0.5;}
100%{opacity: 1;}
}
<div id="animation-components">
<img src="leftball.svg" alt="" id="item1" onmouseover="fadeOut('item1')" onmouseout="fadeIn('item1')">
<img src="rightball.svg" alt="" id="item2" onmouseover="fadeOut('item2')" onmouseout="fadeIn('item2')">
</div>
Also its just a me thing, but you have class attributes where id attributes should be. If your applying seperate styles to two completely seperate elements its a good idea to use id, but if your applying same style to two elements

grow element size using javascript

I'm working on a project where I hover over an image and a hidden element with info about my image appears . I perform this functionality using javascript . However I would like the image size to gracefully grow from very small to the normal size when I hover over my image .
I have a small code demo with a text instead of an image below :
function showinfo(){
document.getElementById("hidden").style.visibility="visible";
}
function noinfo(){
document.getElementById("hidden").style.visibility="hidden";
}
#hidden{
width:100px;
height:100px;
background-color:green;
visibility:hidden;
}
<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !</p>
<div id ="hidden">
I am the hidden text !
</div>
I would appreciate your help with guiding me through this small task . Thank you in advance .
function showinfo() {
document.getElementById("hidden").style.visibility = "visible";
}
function noinfo() {
document.getElementById("hidden").style.visibility = "hidden";
}
#hidden {
width: 0;
height: 100px;
background-color: green;
visibility: hidden;
padding: 10px;
transition: width 2s;
color:#fff;
font-size:20px;
}
#hover:hover~#hidden {
width: 100%
}
<p id="hover" onmouseover="showinfo()" onmouseout="noinfo()">
Hover over me !
</p>
<div id ="hidden">
I am the hidden text !
</div>
You can achieve this one by css.
#hidden_text {
transform: scale(0);
transform-origin: 50 50;
transition: transform 2s 0s;
width:100px;
height:100px;
background-color:green;
}
#hover:hover ~ #hidden_text {
transform: scale(1);
}
<p id="hover">Hover over me !</p>
<div id="hidden_text">
I am the hidden text !
</div>
no need foor JS for such simple task. You can simply do it with the :hover tag with CSS and add a transition tag to get your wanted animation of growing slowly.
.image {
width: 200px;
height: 100px;
background-color: blue;
}
.image:hover {
width: 500px;
height: 250px;
background-color: blue;
transition: width 2s, height 2s;
}
<div class="image">I'm an Image</div>

Fire Javascript during CSS/JS animation (vanilla JS)

Edit: this is an example of what I'm trying to do: http://codepen.io/anon/pen/OVzOjW
(Note that the menu and nav don't perfectly align, as the nav transition is being controlled by the CSS, and the menu delay is being controlled by the JS.)
I'm trying to create a slideout menu that fires some JS during the slide animation.
On page load, nav is fixed hidden to the right of the viewport and menu is fixed to the top right of the viewport. nav is wider than menu. On menu click fires the slideout animation of nav. I want to add a namespace class to nav that changes the CSS properties of menu. I want to do this the moment the visible portion of the nav becomes equal in width to the width of the menu, at which point the menu will just become part of the nav for the rest of the slideout.
I need to do this with some combination of CSS3 and vanilla JS (jQuery is unavailable). I can do the nav animation with CSS or JS easy enough, but timing the CSS property changes on menu is what I can't figure out.
I've tried to write a loop that constantly evaluates the right property value of nav to see if it's >= the width of menu (using CSS to do the transition), but that seems to fire the entire loop right away.
I'm not picky over a CSS vs JS solution for the animation itself, but I'd prefer CSS as I feel it's easier to control the transition settings and it runs smoother.
Relevant code below. Any help would be greatly appreciated!
HTML:
<nav id="nav">
<a id="menu" href="#">Menu</a>
Foo
Foo
Foo
</nav>
CSS:
#nav {
position: fixed;
right: -100px;
top: 0;
width: 100px;
}
#nav.expanded-nav {
right: 0;
}
#nav.expanded-menu #menu {
position: absolute;
right: auto;
top: auto;
width: 100%;
}
#menu {
position: fixed;
right: 0;
top: 0;
width: 50px;
}
You can do that with CSS animation chaining or animation-delay or simple setTimeout of Vanilla JavaScript
Check out the below code for CSS way..
$("#go").click(function() {
$(".container").addClass("demo");
});
.container {position: relative;}
#nav, #menu {
height: 100px;
width: 100px;
position: absolute;
}
#nav {
top: 10px;
left:-100px;
background: #000;
}
#menu {
top: 150px;
left:200px;
background: #f00;
}
.demo #nav {
-webkit-animation: demo 1s, demo1 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-timing-function: ease-in-out;
}
.demo #menu {
-webkit-animation: demo1 2s;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes demo {
0% {
left: -100px;
}
100% {
left: 200px;
}
}
#-webkit-keyframes demo1 {
0% {
left: 200px;
}
100% {
left: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
<div id="nav"></div>
<div id="menu"></div>
</div>
This was actually way easier than I initially thought. It can actually rather easily be solved by setting a min-width on menu and allowing it to "grow" to the full length of the parent `nav' when it slides out. Demo here: http://codepen.io/anon/pen/EjobEJ

Recreating a text animation (source within)

I would like to recreate the text animation seen in this screen video I did of this website theme: http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276
Here is the video to show you the animation:
https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing
I am unsure of where to begin and cannot find anything like it through my search so far, I am open to anything to create this such as jQuery. Thank you for any help!
I'd do this with two absolute positioned texts, one gray (or semi transparent) second one, on top set to overflow:hidden. Then I'd just animate the width of the second container.
How do You like the idea? :)
edit:
little tweaking, but idea the same - fiddle for You: http://jsfiddle.net/Lr4PQ/
quite important CSS rule:
white-space: nowrap;
to prevent breaking lines when width of text node is smaller than text's.
edit 2:
Of course, idea behind lets You to achieve the result using pure CSS, jQuery's role is just animating width.
HTML:
<div class="container">
<div class="text upper">You`re the boss</div>
<div class="text ">You`re the boss</div>
</div>
CSS:
body {
background:#000;
}
.container {
position:absolute;
left:30%;
top:20%;
width:auto;
/*position container as You wish*/
}
.text {
text-transform:uppercase;
font-family:sans-serif;
color:#FFF;
opacity:.2;
white-space: nowrap;
font-size:30px;
}
.text.upper {
position:absolute;
opacity:1;
overflow:hidden;
width:0%;
}
jQuery:
$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);
The animation is achieved in pure CSS3:
jsBin demo
HTML:
<div class="modal">
<h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS:
.modal h1 {
color: #626161;
font-size: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
position: absolute;
text-align: center;
top: 50%;
}
.modal h1:before {
animation: 5s ease 0s normal none 1 loading;
-o-animation: 5s ease 0s normal none 1 loading;
-ms-animation: 5s ease 0s normal none 1 loading;
-moz-animation: 5s ease 0s normal none 1 loading;
-webkit-animation: 5s ease 0s normal none 1 loading;
color: #E2E2E2;
content: attr(data-content);
max-width: 100%;
overflow: hidden;
position: absolute;
white-space:nowrap;
}
#keyframes loading {
0% { max-width: 0%; }
}
#-o-keyframes loading {
0% { max-width: 0%; }
}
#-ms-keyframes loading {
0% { max-width: 0%; }
}
#-moz-keyframes loading {
0% { max-width: 0%; }
}
#-webkit-keyframes loading {
0% { max-width: 0%; }
}
One of the reason they used a single h1 instead of overlaying two h1 elements and animating the second's one width is simply cause for a better SEO a page should contain only one h1 element. Also using content: attr(data-content); is quite fun so...

Slide floated divs after hiding an element

I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?
You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});
I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.
Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery

Categories