当有人点击链接时，我希望发生三件事：
1） 内容淡出，只留下背景图像
2） 背景图像渐变为超链接后面页面的背景图像
3） 加载新的背景图像后，继续超链接事件，并将用户切换到新页面（新内容将在其中淡入）。
我认为这会产生很好的连续性效果，但我在获取链接背景图像的url时遇到了问题。我可以使用.load来更改的内容，但还没能为CSS属性找到这样做的方法。
PS：忽略｛%tags%｝：我使用Django模板标签来引用URL，这些标签运行良好（…目前：）
{% load staticfiles %}
<html>
<head>
{% block title %}<title>Title Goes Here</title>{% endblock %}
<link rel='stylesheet' type='text/css' href='{% static 'css/style.css' %}'>
<style>
body{
background: url("{% block bgImage %} {% static 'images/backgroundimages/Cactus.JPG' %} {% endblock %}");
background-size: cover;
background-repeat: no-repeat;
}
</style>
<script src='{% static 'js/jquery.js' %}'></script>
<script>
$(document).ready(function(){
$('body').css('display', 'none');
$('body').fadeIn(1000);
$(".navLink").click(function(event){
event.preventDefault();
var targetLink = $(this).attr('href');
***Do something to get the URL of the background image of the page pointed at by targetLink***
});
});
</script>
</head>
<body>
{% block nav %}
<nav>
<a href='{% url 'home' %}' class='navLink'>Home</a>
<a href='{% url 'about' %}' class='navLink'>About</a>
<a href='{% url 'services:services' %}' class='navLink'>Services</a>
<a href='{% url 'portfolio:portfolio' %}'class='navLink'>Portfolio</a>
<a href='{% url 'projects:projects' %}' class='navLink'>Projects</a>
<a href='{% url 'contact' %}' class='navLink'>Contact</a>
</nav>
{% endblock %}
<div id='wrapper'>
{% block content %}
Content Goes Here
{% endblock %}
</div>
</body>
提前感谢您的指导！
我认为如果不使用AJAX和历史记录，就无法实现持续平稳的转换。PushState。但只是为了好玩…
首先，您应该将背景图像放在带有与页面相关联的类的全局style.css中。并将转换添加到css中，而不是jQuery中。
CSS
body {
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
transition-delay: 1s;
}
.home-page {
background-image: url(bg-home.jpg);
}
.about-page {
background-image: url(bg-about.jpg);
}
.content {
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.fade-in {
opacity: 1;
}
然后使用jQuery添加和删除类以启动转换和处理导航页面。
jQuery
$(function () {
$body = $("body");
$content = $(".content");
setTimeout(function () {
$content.addClass("fade-in");
}, 200);
function onTransitionEnd(href) {
$content.on('webkitTransitionEnd otransitionend oTransitionEnd transitionend',
function (event) {
event.stopPropagation();
});
$body.on('webkitTransitionEnd otransitionend oTransitionEnd transitionend',
function () {
window.location = href;
});
};
function pageTransition(toPageLink, toPageClass) {
event.preventDefault();
$body.removeClass().addClass(toPageClass);
$content.removeClass("fade-in");
onTransitionEnd(toPageLink);
};
$(".home-link").on("click", function (event) {
pageTransition($(this).attr('href'), 'home-page')
});
$(".about-link").on("click", function (event) {
pageTransition($(this).attr('href'), 'about-page')
})
});
然后，页面的标记将在正文和链接上具有类。
HTML
主页示例
<body class="home-page">
<nav>
<a href="home.html" class="home-link">Home</a>
<a href="about.html" class="about-link">About</a></nav>
<div class="content">
Content goes here
</div>
</body>
关于页面示例
<body class="about-page">
<nav>
<a href="home.html" class="home-link">Home</a>
<a href="about.html" class="about-link">About</a></nav>
<div class="content">
Content goes here
</div>
</body>
否则，您可以尝试这个插件，它可以使用ajax获取内容、进行转换并更新url：http://weblinc.github.io/jquery.smoothState.js/