When my grid of post loads, the posts load at position zero. Then translate3d/width grab their values and they go to right place: http://www.marianoshoes.com/the-journal/
How can I disable this weird javascript/css animation, using css?
Thanks!
Seems to me that it doesn't do any animation but that the sequence is just off, like the CSS is added after the items are already drawn on screen.
If you're adding the CSS classes to the elements using JS you could fix this by defaulting the display property to none, and at last change it to block (This will make it take a little longer for it to display the information, but at least it's in the correct format.
Else you can change this by making sure your CSS is going to be one of the first things to get loaded into the page, and make sure your JS is getting run only after the document is fully loaded.
You can't stop the js from moving the blocks into their right place, but you can fade in the element after your js.
Your css:
.post-grid {
opacity: 0;
transition: opacity 0.5s;
}
.post-grid.loaded {
opacity: 1;
}
Your js:
$(document).ready(function() {
var $postGrid = $('.post-grid');
.... do stuff to post grid
$postGrid.addClass('loaded')
});
Related
I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.
I use jQuery for it, with this little code:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...and more code...
As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.
As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.
Any ideas how I can retime the whole thing?
I put the JS in the <head> tag and I made sure it is the first code to be fired.
If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.
Bit more about ready vs load:
jQuery - What are differences between $(document).ready and $(window).load?
I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've got:
HTML:
<div id="feed"></div>
JS:
var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
++wIndex;
if (wIndex >= myCars.length) {
wIndex = 0;
}
$('#feed').removeClass('animated slideInLeft');
$('#feed').addClass('animated fadeOut').addClass('hidden');
$('#feed').text(myCars[wIndex]);
$('#feed').removeClass('animated fadeOut').removeClass('hidden');
$('#feed').addClass('animated slideInLeft');
}, 3000);
http://jsfiddle.net/tjfo/5a3SL/
The initial change from the first element in the array to the second works properly, fade out, slide in. All the following transitions just change the text in the div with no fade out, slide in. Animate.css is the preferred method for completing this task. Can anyone help figure out how to make it work properly?
Thanks!
I think you're looking to remove the animated and slideInLeft classes prior to applying subsequent classes. Maybe remove those classes right off, then in a timeout of say, 25ms, do the rest of the logic.
Here's a demo: http://jsfiddle.net/5a3SL/3.
When animating with CSS this is a fairly common thing since you need to give the browser time to calculate the new layout without those classes before applying new classes, otherwise the correct state won't exist in the layout for the new class to properly animate.
Also, that honestly seems like too much CSS for a simple animation... the trickiest thing about animations is having to re-write your CSS declarations for 4 different vendor prefixes as well as the standard declaration.
Another way to handle this would be to set a timeout at the end of the loop that is at least as long as the animation (the slide-in) and remove the unnecessary classes then.
I'm looking to achieve a page transition whereby a link to another page will, instead of loading the page, slide the next page in over the next one. Something like the MOVE transitions on this demo site: http://tympanus.net/Development/PageTransitions/
Although this isn't quite right as this is all one page (i.e. the url doesn't change), they need to be transitions between separate pages.I got as far as something like this:
HTML:
<body>
<div class="container">
Link
TEXT GOES HERE
</div>
</body>
jQuery:
$(function(){
// hide the div on page load and use a slidedown effect
$('div.container').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.container').slideUp(500, function(){
window.location = $href;
});
});
});
But this isn't quite right as this method slides the current page upwards, before sliding the next page downwards, but the url change here is good. Any suggestions would be greatly appreciated!
If I get this correctly, you want to slide something, but instead of just sliding an arbitrary div, you want to slide in a whole new web page?
What you could do is use AJAX. So basically, make an ajax request then when you receive the data, change your #next-page.html() to the data you received.
You'll have to cycle them now though, so setting an '#active-page' is probably better.
Here is the site where I used that. http://cs75.heliohost.org/ When you click a link, a slide animation is shown, but if I edited my slide's html I could have put the new page on that sliding rectangle.
Here are the things you need:
Two 'Pages'. You will be reusing these as you go.
When a user clicks a link, make an ajax call, then replace the
'inactive-Page' with the data you receive.
Make the 'inactive-Page' active and then apply your animation.
Turn the replaced page as 'inactive-Page'
Feel free to ask if there was anything vague in my answer.
You can set the query string to ?animate=true and animate downwards in next-page.html
$(function() {
if (location.search.match(/animate=true/)) {
$('body').hide().slideDown();
}
});
You can also hide the body using html so it will be hidden before DOM ready.
and the link would be
Link
Regarding the animation:
If you want both to slide up, you have to tell both to slide up. So instead of your "slideDown", use "slideUp".
If you look at the page's source, you'll see they're actually using CSS animations to do most of the work. This allows them to easily run two animations at once and allows the browser to use hardware acceleration to handle the animation (jQuery, and JS in general, tend to queue them by default, but you can add queue:false to make them run at the same time, and JavaScript doesn't yet have access to hardware acceleration).
The keystone of these animations are in the animations.css file. Notice the named keyframes at the bottom and how they work:
#-webkit-keyframes moveToTop {
to { -webkit-transform: translateY(-100%); }
}
#-moz-keyframes moveToTop {
to { -moz-transform: translateY(-100%); }
}
#keyframes moveToTop {
to { transform: translateY(-100%); }
}
You don't need to make them keyframes like that, you can just build them into the elements (or classes) themselves. I think they use named keyframes because they use a lot of the same animations over and over again. The transforms, though, are what makes them move up (or any other direction you want).
Regarding the URL changes:
Instead of trying to write the functionality yourself, you might want to look into Pjax. It's the library that makes GitHub do the page slide thing that you're looking for. If nothing else, you can look at the source and see how they do it.
How it works is by combining AJAX with PushState (hence the name). When you click a link, the JavaScript overrides the default click behavior and makes an AJAX call to get the new content. It then activates a PushState call, which updates the browser's URL (this is the key to the "different pages" thing), and animates in the new content. In browsers that don't support PushState, the pages just load like any other site.
I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help
skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations
Simply added a class on hover, and removed the class on mouse off.
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!