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.
Related
I need to transition effect for between the html pages, when clicking menu or submenu's, page will be opened with transition effect.
Please guide me, how to do that, Thanks in advance.
The below link is only have div transition not a page transition. it is possible to the same transition between html pages?
How I can add transitions between two HTML pages?
Here is a solution that requires some knowledge of CSS and Javascript:
In your DOM, where you put your links to the other pages, instead of using <a> tags, use an ordinary <span> and attach an onclick attribute, like this:
<span onclick="transitionToPage('https://www.google.com')"></span>
(You can use <a> and href, but you need to parse out the target href and prevent the default event.)
Then in your Javascript, put this code:
window.transitionToPage = function(href) {
document.querySelector('body').style.opacity = 0
setTimeout(function() {
window.location.href = href
}, 500)
}
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector('body').style.opacity = 1
})
Finally, in your CSS code:
body {
opacity: 0;
transition: opacity .5s;
}
This will have the following effect:
When page loads, the body will fade in over half a second
When you click on a link, the body will fade out and after half a second the browser will go to the next page
Happy coding!
You can always hide content of body and then fade it via JQuery. But that will work only in the case of entering page. If you want to add animation to leaving page then you have to go with Single Page Application, where you can add transitions at both levels.
Here is my fiddle. I would like to achieve 'one page full screen' type of webpage. I have two sections; display one at a time by display:block/none;each section contains content; .content1, .content2 respectively; content div works as a button to fire another section. You can also see a fixed header.
Section .intro contains .content1, section .archive contains .content2.
Now, I would like to build following chain of events on click: (i) .content1 fades out, (ii) .intro gets display:none, .archive gains display:block, (iii) .content2fades in.
The other way around, respectively, on click on .content2: (i) .content2 fades out, (ii) .archive gets display:none, .intro gains display:block, (iii) .content1fades in.
I have some experience with CSS, so I made and checked css transitions for fade in, fade out effects. Up to this point, everything is clear for me.
My problem is, however, I do not know how to build the chains of events. I have googled a lot of similar questions and tried some solutions, but had no luck. I have very little experience with JavaScript, so there might be some obvious mistakes in how I tried to implement the solutions.
I do not attach script in my fiddle; I would like to ask if you could point me in the right direction rather than fix my code, because, you see, I am not sure which solution I should show--so far they all look equally hopeless for me.
Should I go with JavaScript? JQuery? Pure CSS? Could you sketch / write some code how you would handle the problem?
Could you review the idea of displayed/hidden sections for the effect I am trying to achieve?
Using jQuery's fadeIn and fadeOut should be fine:
$(".toarchive").click(function(){
$('.intro').fadeOut();
$(".intro").removeClass("active");
$(".intro").css("display", "none");
$(".archive").fadeIn();
$(".archive").css("display", "block");
$(".archive").addClass("active");
});
However, if you're worried about the wait time between fades, you can use setTimeout:
$(".toarchive").click(function(){
$('.intro').fadeOut();
$(".intro").removeClass("active");
$(".intro").css("display", "none");
setTimeout(testThis, 1000);
});
function testThis(){
$(".archive").fadeIn();
$(".archive").css("display", "block");
$(".archive").addClass("active");
}
Try here
Try this, it automaticallys does what you want and it's cleaner.
Just put class show at page container you want to show first then clicking next will loop through pages.
Or you could set page number yourself and it will show that page.
http://jsfiddle.net/ot2gyxme/
var pages = $('.full'),
len = pages.length,
showing = pages.index($('.full.show'));
$('.next').click(function(){
pages.stop().eq(showing).fadeOut(function(){
setTimeout(function(){
showing = ++showing % len; //set this number to show x page
pages.eq(showing).fadeIn();
},1000); //time logo remains visible in ms.
});
});
I have a page with a form and when I submit it I want to fade it out. When I load the page the form goes to I want to fade it in. So I actually want to simulate ajax and make it look like the page doesn't redirect.
What would be the best way to do this?
Fading out is easy, you just fade out all your content when a user pressed submit and once the animations finishes you load the new page. But fading in a new page is a problem, afaik you need to have the page loaded to perform animations like that. I might be wrong however.
I do have a somewhat hacky solutions for you. You could load each page with a screen filling container, set it's background color to white for example so the screen renders completely white. When the document is ready you just fade that container away with Jquery. This should work the way you want i believe.
Out of my head so just take it as a guideline, there are many more ways to animate things with css and jquery
$(document).ready(function()
{
//Fade out container div
$("#overlay").animate({
visibility: hidden;
});
});
function onSubmit()
{
e.preventDefault(); //Prevents the form from submitting.
$("#overlay").animate({
visibility: visible;
},
{
complete: function()
{
$("#form").submit();
}
}
});
Important! When a user has java disabled he won't see anything at all.
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?
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.