For a site I am working on I'd quite like to use a similar drop down effect as here http://shop.jack-hughes.com/ when you click info a hidden div drops down.
I can't work out if it uses only CSS3 or Javascript/CSS can anyone point me in the right direction or tell me the name of the effect; pretty simple I guess but for the life of me can't find another example.
combination of CCS3 and js
Here is what is used in the website you refer
js:
Event.observe(window, 'load', function () {
Event.observe('info', 'click', function () {
$('aside').toggleClassName('open');
});
});
Event.observe is from the prototype framework - http://prototypejs.org/doc/latest/dom/Event/observe/
The equivalent in jQuery(http://jquery.com/) for instance would be:
$(document).ready(function () {
$('.info').click(function () {
$('aside').toggleClass('open');
})
});
css:
aside.open {
height: 21.25em;
}
aside {
position: relative;
background-color: #3f4642;
width: 100%;
color: white;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
The HTML element is <aside>....</aside> but it's no difference if you choose div.
They have a small piece of Javascript that does this that can be easily done on any website. Basically you need a hidden div at the top of your page, and upon clicking a link you simply show the div.
The code that they used was:
Event.observe('info', 'click', function(){
$('aside').toggleClassName('open');
});
But if you take a look at jquery then you will see that manipulation of elements is quite easy to do.
One thing that they do use in addition is a CSS3 transition in their open class:
.aside {
transition: all 0.3s ease-out 0s
}
This is what is causing the smooth transition effect. So you can use either jQuery or the CSS3 transition, both give the same effect. I would say that the CSS3 transition is nicer, but then again you will be alienating certain browsers if they do not support transitions.
Probably using jQuery. Something like:
http://api.jquery.com/toggle/
In addition to what Deif discovered they're also using CSS transition
transition: all 0.3s ease-out;
and also make use of the "::selection" pseudo class for their "aside" class, see developer.mozilla.org
Related
I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}
I created this site with a header that transitions using jQuery Ui and twitter bootstrap. The idea is that there are two classes .navbar-transparent and .navbar-white and I use the .switchClass() function that jQuery Ui Effects provides that transitions the change in the two classes when the scroll position of the page isn't at the top.
The problem however, the nav as it is now is, I believe the technical term is "janky". The transition isn't smooth, and when going from transparent to white the none of the font color doesn't transition at all, it just plops into black.
This shopify theme Retina / Austin does a great job of making that transition smooth with a css transition.
.header{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
Here's my javascript code:
mindful_matter.header = function() {
if ($(".navbar-transparent").length == 0) return false;
var callback = function() {
var scrolled_val = $(document).scrollTop().valueOf();
if (scrolled_val > 0) {
$(".navbar").switchClass("navbar-transparent", "navbar-white");
} else {
$(".navbar").switchClass("navbar-white", "navbar-transparent");
}
}
callback();
$(window).scroll(callback);
}
Is there any way I can make the transition smoother? Using the setup I already have? Can I use a css transition when I have two classes that need to be swapped for one another?
.navbar{
transition: background-color 500ms ease;
}
The following code snippet shows how I made popups with CSS and JS. Is there any chance to let it fade when opening/closing it, without changing the way I used to work, I mean just popping up the box by changing its display style?
function lightbox_open(){
window.scrollTo(100,500);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
You could use either use jQuery to do the fading $().fadeIn() or use CSS3 animations if you want to stick to bare JS. In the latter case, set the opacity to 0 by default and change it to 1 via Javascript. You need to add this to your stylesheet:
selector {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
You can use jquery fadein() on open and fadeout() on close, but if you want to do it with pure javascript, i recommend reading this source code. they did it it wonderfully.
You can use jQuery:
.fadeIn()
function lightbox_open(){
window.scrollTo(100,500);
$('#light,#fade').fadeIn();
}
.fadeOut()
function lightbox_close(){
$('#light,#fade').fadeOut();
}
Hi i am having problems with a transition of mine that gets called when a button is pressed. The reason i am confused is because it worked before but then i moved it onto a different div and now its not? when i mean its not working i mean that the function works (as in it does do something) and then runs the callback but when it switches the class' it doesn't 'animate' it. The div just stays there till the animation time is over and then runs the callback which hides it.
So basically it just hides it but doesn't animate the slide out effect that it should do.
the rest of the switchClass functions work fine even the one which makes the page slide back in.
The Code That Isn't Functioning Properly:
function hidepage() {
$( ".PageShow" ).switchClass("PageShow", "PageHide", loadpanel);
// Alternative $( "PageContainer" ).switchClass("PageShow", "PageHide", loadpanel);
};
And the rest of the code that goes with it...
CSS:
#PageContainer {
margin-top:120px;
width:100%;
}
.PageShow {
position:fixed;
-webkit-transform:translate(0px,0px);
-moz-transform:translate(0px,0px);
-ms-transform:translate(0px,0px);
-o-transform:translate(0px,0px);
transform:translate(0px,0px);
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
}
.PageHide {
position:fixed;
-webkit-transform:translate(-100%,0px);
-moz-transform:translate(-100%,0px);
-ms-transform:translate(-100%,0px);
-o-transform:translate(-100%,0px);
transform:translate(-100%,0px);
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
}
If you change your method .switchClass() to .removeClass() and .addClass() it will work. Look at this jsFiddle. There are two functions one is called .hidepage() which is the one with .removeClass and .addClass and the second function is .hidepagetwo() which uses .switchClass()
The real mistake is: there is a }); missing at the end, at least in jsFiddle you code works after adding this.
Looks like you are using switchClass incorrectly. Here is the API doc:
http://api.jqueryui.com/switchClass/
Note that the method takes 2 mandatory params and 3 optional. You can't stuff loadpanel(if that's your callback function) into the 3rd param because it belongs in the 5th. You need to specify values for the 3rd and 4th in this case so your callback function ends up where it's expected.
Also, You have a lot of CSS transition stuff going on, but my understanding is that switchClass does a javascript animation between your two classes. Look how the example is at the above link. You just need to specify the before style in one class and the after style in another. switchClass will interpolate the in-between and do the animation without all the CSS transitions.
Since you have all those CSS animations in place on classes, another approach is to try jQuery's toggleClass which simply turns on/off the classes: http://api.jquery.com/toggleClass/
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.