图片页面过渡
Image page transition
有没有人知道如何在不重新加载的情况下将图像转换到另一个页面。 http://nahelmoussi.com/ 上有一个很好的例子。
当您单击案例研究图片时，图片会变大并停留在页面上。
我知道您可以对动画使用 CSS 过渡，但我感到困惑的是您如何加载一个全新的页面（SEO 的不同页面）并使图像永远不会看起来像它重新加载？
history.pushState()
The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.
pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.
和AJAX
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
动画图像后，我们可以通过附加新位置来更新浏览器的历史记录，并使用 AJAX 获取新内容。
操纵 history 允许用户以与使用 传统 方式导航到新位置时相同的方式来回导航。
我们可以使用 AJAX 获取新数据，并可选择更改部分或全部页面内容以显示此新数据。
组合方法的效果是点击图片后：
- 图像展开。
- 其余内容被隐藏或覆盖。
- 获取新数据。
- 显示新数据。
history已更新。- 在用户看来他们已经导航到一个新位置（并且他们的浏览器历史记录会显示他们这样做了），但他们最初点击的图像始终保留在他们的屏幕上。
一个未经提炼的基本演示：
虽然没有完全 功能，但如果由 localhost 提供服务，这将展示流程的基本原理。问题的范围对于狭窄的演示来说太宽了，而足够宽的演示来展示完整的功能将需要构建一个完整的演示网站。
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script async>
( function( W, D ) {
var handlePopstate = function( evt ) {
// handle history navigation through evt.state
console.log( evt.state );
},
getNewContentAndUpdateHistory = function( d, p ) {
// create and call ajax for new content using destination URL
console.log( d );
// update the browser's history and the history.state
history.pushState( { ps: p }, "", d );
// handle history navigation through history.state
console.log( history.state );
},
init = function() {
D.addEventListener( "click", function( evt ) {
var trg = evt.target;
if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
var dest = trg.getAttribute( "data-href" ),
page = /(\d+)/.exec( dest )[ 1 ];
trg.classList.add( "bg", "_" + page );
// load, parse and display new content and update the browser's history
getNewContentAndUpdateHistory( dest, page );
}
}, false );
};
if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
init();
} else {
W.addEventListener( "DOMContentLoaded", init, false );
}
W.addEventListener( "popstate", handlePopstate, false );
} ( window, document ) );
</script>
<style>
html {
font-size: 10px;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
margin: 0;
padding: 0;
}
img {
position: relative;
display: block;
width: 400px;
height: 200px;
cursor: pointer;
transition: width 1s, height 1s;
}
.bg {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
cursor: default;
}
._2 {
z-index: 2;
}
._3 {
z-index: 3;
}
._4 {
z-index: 4;
}
</style>
</head>
<body>
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
</body>
</html>
有没有人知道如何在不重新加载的情况下将图像转换到另一个页面。 http://nahelmoussi.com/ 上有一个很好的例子。
当您单击案例研究图片时，图片会变大并停留在页面上。
我知道您可以对动画使用 CSS 过渡，但我感到困惑的是您如何加载一个全新的页面（SEO 的不同页面）并使图像永远不会看起来像它重新加载？
history.pushState()
The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.
pushState()takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.
和AJAX
AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
动画图像后，我们可以通过附加新位置来更新浏览器的历史记录，并使用 AJAX 获取新内容。
操纵 history 允许用户以与使用 传统 方式导航到新位置时相同的方式来回导航。
我们可以使用 AJAX 获取新数据，并可选择更改部分或全部页面内容以显示此新数据。
组合方法的效果是点击图片后：
- 图像展开。
- 其余内容被隐藏或覆盖。
- 获取新数据。
- 显示新数据。
history已更新。- 在用户看来他们已经导航到一个新位置（并且他们的浏览器历史记录会显示他们这样做了），但他们最初点击的图像始终保留在他们的屏幕上。
一个未经提炼的基本演示：
虽然没有完全 功能，但如果由 localhost 提供服务，这将展示流程的基本原理。问题的范围对于狭窄的演示来说太宽了，而足够宽的演示来展示完整的功能将需要构建一个完整的演示网站。
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script async>
( function( W, D ) {
var handlePopstate = function( evt ) {
// handle history navigation through evt.state
console.log( evt.state );
},
getNewContentAndUpdateHistory = function( d, p ) {
// create and call ajax for new content using destination URL
console.log( d );
// update the browser's history and the history.state
history.pushState( { ps: p }, "", d );
// handle history navigation through history.state
console.log( history.state );
},
init = function() {
D.addEventListener( "click", function( evt ) {
var trg = evt.target;
if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
var dest = trg.getAttribute( "data-href" ),
page = /(\d+)/.exec( dest )[ 1 ];
trg.classList.add( "bg", "_" + page );
// load, parse and display new content and update the browser's history
getNewContentAndUpdateHistory( dest, page );
}
}, false );
};
if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
init();
} else {
W.addEventListener( "DOMContentLoaded", init, false );
}
W.addEventListener( "popstate", handlePopstate, false );
} ( window, document ) );
</script>
<style>
html {
font-size: 10px;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
margin: 0;
padding: 0;
}
img {
position: relative;
display: block;
width: 400px;
height: 200px;
cursor: pointer;
transition: width 1s, height 1s;
}
.bg {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
cursor: default;
}
._2 {
z-index: 2;
}
._3 {
z-index: 3;
}
._4 {
z-index: 4;
}
</style>
</head>
<body>
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
</body>
</html>