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.
Related
I made a splash page using jQuery by appending a div on the page load. After a set amount of time, the body of the page fades in, though the appended div still displays itself at the end of the page. Tried to add .remove() at the end of the function to see if that would help, nothing though. I'd like to have it disappear as the rest of the page loads. Let me know if i'm going about this the wrong way.
https://swaybs.github.io/jdphotography/
$(document).ready(function() {
$('html').append('<h1 class="onLoad">loading...</h1>');
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').delay(4000).fadeIn(1000);
$('html').remove('.onload');
You can use the complete callback function of fadeIn() to remove (or fade out the loading message).
Note: Instead of hiding the body, and adding the h1 to the html, it's better to add a use a main element (div or main), you can hide/show.
$('html')
.append('<h1 class="onLoad">loading...</h1>');
$('body').css('display', 'none')
.delay(4000).fadeIn(1000, function() {
$('.onLoad').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm part of the body
You need to work on the CSS. The loading div should have an absolute positioning (and its container should have a relative one), otherwise it will always be pushed down by other elements as they appear.
Im using a few CSS transition to face in content when my homepage load. I start the transition by using a javascript that adds a class to the element with the transitions. Im looking to dynamically load next set of pages, and wonder if I can set a new transition for the second pageload to "reverse" the transition with a fade out on the elements on the current page.
Is this possible?
I'm not sure to understand exactly, but you can :
-use jquery .animate() and then .queue() if you just need a visual fade
$( '.activepage' ).animate({opacity: 0},200).removeClass('activepage').queue(function(){
$( '#mysecondpage' ).addClass('activepage').animate({opacity: 1}, 200);
$(this).dequeue();});
};
please explain exactly what you want to do.
Yes, if you are loading next page using ajax, you can fade out the main container and when the next page html comes from the ajax request, you can first replace the container html, and then execute the fade in on the same container.
If you are using jQuery for example, after the fadeOut finished, your container display will be "none", so when you add the new html, the user will see the empty container until you run the fadeIn and the whole container is showed up again with the effect :)
I created an accordion and trying to add transition effect whenever the user tries to click on the accordion header.
I added height: auto and transitiion to the accordion container, but this effort seems useless here.
var texts = document.getElementsByClassName('text');
[].slice.call(texts).forEach(function (text) {
text.onclick = function () {
text.parentElement.classList.toggle('animate');
}
});
Here is the Fiddle
PS: the height of each content differs and the animation should happen while opening and closing the content.
EDIT:
I tried the possible duplicate question solution, which isn't animating perfecting,
http://jsfiddle.net/9vuor3oo/5/
The animation works only while opening the accordion but not closing it. and also the last accordion doesn't even animate on opening.
I updated your sample: http://jsfiddle.net/9vuor3oo/6/. You need to add the max-hight to .parent .child and then add transition to that.
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 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.