does any one know how to make the slide to left effect like in the "Read it Later" app with CSS3 or JS?
onclick --> slide whole div to left and show the div under the one which slides away.
here is an video with the example: READ IT LATER
May be that's you want with css3.
CSS
.parent{
width:300px;
border:1px solid red;
height:100px;
position:relative;
}
.box{
width:40px;
height:40px;
background:green;
display:block;
z-index:0;
}
.slider{
width:300px;
background:#454545;
color:#fff;
font-weight:bold;
font-size:24px;
height:100px;
position:absolute;
top:0;
right:300px;
transition: right 1s ease;
-moz-transition: right 1s ease; /* Firefox 4 */
-webkit-transition:right 1s ease; /* Safari and Chrome */
-o-transition:right 1s ease; /* Opera */
z-index:1;
}
.box:focus + .slider,.box:active + .slider{
right:0;
}
HTML
<div class="parent">
<div class="slider">hello</div>
</div>
Check this http://jsfiddle.net/MhHx2/
UPDATED
http://jsfiddle.net/MhHx2/4/
You can achieve that effect by using a couple of standard techniques.
Create two div elements, one for the one that is going to slide out, and one for the one that is going to get revealed.
Position them using z-index. Please not that the divs have to be positioned using absolute, relative, or fixed for this to work.
You can use jQuery for the effects. I found a decent post here.
That should get you done.
Related
I'm having an issue which seems to be preventing CSS transitions from playing on an element which is simultaneously changing from display:none.
In the following example, the divs have identical CSS, except that hovering over the first one hides the other two. The second div is hidden using visibility:hidden, and the third is hidden using display:none.
When you mouse over the first div, the behaviour is as expected: the first div transitions and the other two are hidden. When you mouse out, the behaviour is different from what I would expect: the first div transitions back to normal, the second div is unhidden then transitions back to normal, but the third div is unhidden and still in the normal state.
I was expecting for the third div to match the behaviour of the second and also be unhidden, then transition back to normal.
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
display:none;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
Since the second div works as expected, it's fairly easy to come up with alternate solutions using visibility:hidden and some positioning CSS, but is it possible to accomplish this in just CSS using display:none? If not, why does display:none affect other transitions in this way?
Note: This seems like something that would be easy to find, but my searches only turned up questions about attempting to transition the display property itself, not its side-effects on other transitions.
A simple explanation of display: none:
Turns off the display of an element (it has no effect on layout); all
descendant elements also have their display turned off. The document
is rendered as though the element did not exist.
(Emphasis mine)
The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.
Workaround
The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50%;
transition: border-radius 1s;
animation: display 1s;
}
#hover:hover,
#hover:hover ~ div {
border-radius: 0%;
}
#hover:hover ~ #hide1 {
visibility: hidden;
}
#hover:hover ~ #hide2 {
display: none;
}
#keyframes display {
0% {
border-radius: 0;
}
100% {
border-radius: 50%;
}
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't (unless I have an animation)</div>
No, you cannot use display:none;
Reason:
When using display:none; - The element will be hidden, and the page will be displayed as if the element is not there. So when you hover over it - the element is totally removed...and border-radius:0%; never gets applied. When you hover away - the element shows immediately as the css tells it to - with border-radius:50%;
visibility:hidden; hides an element, however the element will still take up the same space as before. The element will be hidden, but still affect the layout.
You just can use transition for numerical properties in CSS, So you should use opacity and transition: all 1s to do this:
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: all 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
opacity: 0;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
visibility: hidden;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
This will work. On mouse out third div also have transition.
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
Can anyone explain me this strange css-animation thing in Firefox (41)? If the animation is very fast (e.g. 1s) it stops when opening a window using javascript by onclick. But it does not happen when using the direct link with the href attribute. If the animation is long enough, e.g. 4s the animation play correct if a new tab is openend by javascript. Do anyone know a how to fix this?
<head><style>
.movingBox{
position:absolute;
background-color:#000;
height:100px;
width:100px;
animation: animateThis 1s 0s ease-out 1 forwards;
}
.link{
position:absolute;
height:100%;
width:100%;
}
#keyframes animateThis{
from {left:0px;}
to {left:1000px;}
}
</style></head>
<body><div class="movingBox"></div>
<a class="link" onclick="window.open('www.example.com','_blank')"></a></body>
I having issue to override transition-delay on firefox. Below example works as i expected in Chrome and IE but at Firefox, before animation it is delaying. I am not able to override transition-delay on firefox before animation starts. I believe this is a bug but what is workaround of this problem?
Here is jsfiddle link
Here is Html Codes
<button>move</button>
<div class="box"></div>
Javascript
$('button').click(function(){
$('.box').addClass('move').on('transitionend',function(){
$(this).removeClass('move');
});
});
And CSS
.box{
height:100px;
width:100px;
background-color:yellow;
transition:all 1s ease 1s;
position:absolute;
left:0;
}
.move{
transition-delay:0;
left:500px;
}
You just need to include a unit (seconds in this case):
.move {
transition-delay: 0s;
left: 500px;
}
Updated fiddle
This answer explains why: Units on "0s" Transition in Firefox
I'm building a small website, and i'm having an issue with jQuery animation,
Basically i have placed a small text (one character div) inside a circle (another div), and i want it to grow when the user hovers over it while keeping the inner div (text) at the original position, the circle will shrink back to original size upon mouseleave() event.
The growing/shrinking part is working quite good, the problem is with the inner text which changes position upon mouseenter().
Here's the HTML
<body>
<div class="steps">
<div id="one" class="number">
<div id="num-text">
<p><strong>1</strong>
</p>
</div>
</div>
</div>
</body>
with 'steps' serving as a container and 'number' the actual circle !
Here's a link to the JSFiddle of this question: http://jsfiddle.net/Rockr90/hZSKA/
Thank you !
Edit:
Actually, the flickering only happens on Chrome, the example with CSS3 works on IE and FireFox as expected, maybe it has something to do with webkit ?
This is possible with CSS only! You dont need jQuery for this and I will explain how to do it with this example. I've used display table for the circle so that we can use display table-cell for perfectly centered text
HTML
<div class="circle">
<p>1</p>
</div>
CSS
.circle {
position:relative; //set up a position, not needed, but for example
top:100px;
left:100px; // width and height
width:100px;
height:100px;
display:table; // display table for centered <p> with table-cell
background-color:blue;
border-radius:50%; // make it a circle!
-webkit-transition: all 0.5s; // transition
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.circle:hover {
margin-left:-10px; // on hover we will increase the height and width
margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
width:120px;
height:120px;
}
.circle p {
display:table-cell; // display table-cell magic
vertical-align:middle; // put the text in the middle!
text-align:center;
font-size:2em;
color:white;
}
FIDDLE
http://jsfiddle.net/n6D46/
If you give #num-text a height, you can vertically align it to the center using the absolute positioning you already have on it:
#num-text {
position:absolute;
text-align:center;
color:#eee;
font-size:24px;
width:100%;
height: 24px;
top:50%; margin-top:-12px; }
See fiddle here: http://jsfiddle.net/hZSKA/1/
As a side note, it's probably possible to do this same effect using CSS3 but that may not be backwards compatible with older browsers.
A quick (but rough and tumble) fix would be to also animate #num-text:
function () {
$(this).animate({
height: '-=10px',
bottom: '-=5px',
width: '-=10px'
}, 50);
$('#num-text').animate({'top': '-6px'}, 50)
});
});
JSFiddle: http://jsfiddle.net/hZSKA/5/
Although I'm sure there will be better answers.
EDIT: whoops, linked to the wrong JSFiddle.