I want to load website pages with slide effect
Question
I want to load website pages with slide effect similar abnieh . It means when you are click the menu elements, the page changes with slide effect. I use Umbraco CMS, ASP.NET Web Form and C#.NET. How can I do it?
Please help me.
a part of my main master page is:
<form id="AbniyehMainForm" runat="server">
<div id="MasterMaster" style="width: 100%;">
<div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault">
<div>
<uc1:HeaderControl runat="server" ID="HeaderControl" />
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="aboutUsContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="serviceSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="projectSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="newsSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
<div>
<asp:ContentPlaceHolder runat="server" ID="languagesContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="menuContent">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
1 answers
solution1
1 ACCPTED 2013-09-22 07:02:30
You will need to use a client side javascript effect, Most likely with jQuery and load the pages using ajax then slide the page in after it is loaded. I found this Project that looks like it will do what you want and here is a sample from a tutorial .
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
And here is how you load a page via ajax from the jQuery website .
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$( "#new-nav" ).load( "/ #jq-footerNavigation li" );
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.