mirror of https://github.com/IoTcat/sakura2.git
parent
227c3afe77
commit
5e09efb551
7 changed files with 129 additions and 124 deletions
@ -1,46 +1,69 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html> |
<html> |
||||||
<head> |
|
||||||
<title>Sakura v2</title> |
|
||||||
<link rel="stylesheet" href="./dist/bundle.css"> |
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="root"><!--page main content (async container)--> |
|
||||||
<div class="header-container"> |
|
||||||
<header id="nav-header" class="mdc-top-app-bar mdc-top-app-bar--dense"><!--nav mune--> |
|
||||||
<div class="mdc-top-app-bar__row"> |
|
||||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> |
|
||||||
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button> |
|
||||||
<span class="mdc-top-app-bar__title">Title</span> |
|
||||||
</section> |
|
||||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> |
|
||||||
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button> |
|
||||||
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button> |
|
||||||
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</header> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="header-top"><!--index cover image--> |
|
||||||
<figure id="cover-img-container"> |
|
||||||
<img src="https://view.moezx.cc/images/2019/10/17/vector-flying-plane-sunny-blue-sky_79451-230.jpg"> |
|
||||||
</figure> |
|
||||||
<div class="cover-video-container"></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="site-content"> |
|
||||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
||||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
||||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
||||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
|
<head> |
||||||
|
<title>Sakura v2</title> |
||||||
|
<link rel="stylesheet" href="./dist/bundle.css"> |
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
<!--page main content (async container)--> |
||||||
|
<div class="header-container"> |
||||||
|
<header id="nav-header" class="mdc-top-app-bar mdc-top-app-bar--dense"> |
||||||
|
<!--nav mune--> |
||||||
|
<div class="mdc-top-app-bar__row"> |
||||||
|
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> |
||||||
|
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button> |
||||||
|
<span class="mdc-top-app-bar__title">Sakura</span> |
||||||
|
</section> |
||||||
|
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> |
||||||
|
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" |
||||||
|
aria-label="Download">file_download</button> |
||||||
|
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" |
||||||
|
aria-label="Print this page">print</button> |
||||||
|
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" |
||||||
|
aria-label="Bookmark this page">bookmark</button> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</header> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<script src="./dist/bundle.js" async></script> |
<style> |
||||||
</body> |
#img-view { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
#img-view img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<div class="header-top"> |
||||||
|
<!--index cover image--> |
||||||
|
<figure id="cover-img-container"> |
||||||
|
<div id="img-view" data-depth="0.2"> |
||||||
|
<img id="cover-img" src="https://view.moezx.cc/images/2019/10/17/vector-flying-plane-sunny-blue-sky_79451-230.jpg"> |
||||||
|
</div> |
||||||
|
</figure> |
||||||
|
<div class="cover-video-container"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="site-content"> |
||||||
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
||||||
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
||||||
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
||||||
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script src="./dist/bundle.js" async></script> |
||||||
|
</body> |
||||||
|
|
||||||
</html> |
</html> |
@ -1,65 +1,34 @@ |
|||||||
let scrollAction = {x: undefined, y: undefined}, scrollDirection |
let scrollAction: { |
||||||
|
x: number, |
||||||
export default function () { |
y: number, |
||||||
if (typeof scrollAction.x == 'undefined') { |
d: string |
||||||
scrollAction.x = window.pageXOffset |
} = { |
||||||
scrollAction.y = window.pageYOffset |
x: undefined, |
||||||
} |
y: undefined, |
||||||
let diffX = scrollAction.x - window.pageXOffset |
d: undefined |
||||||
let diffY = scrollAction.y - window.pageYOffset |
|
||||||
if (diffX < 0) { |
|
||||||
// Scroll right
|
|
||||||
scrollDirection = 'right' |
|
||||||
} else if (diffX > 0) { |
|
||||||
// Scroll left
|
|
||||||
scrollDirection = 'left' |
|
||||||
} else if (diffY < 0) { |
|
||||||
// Scroll down
|
|
||||||
scrollDirection = 'down' |
|
||||||
} else if (diffY > 0) { |
|
||||||
// Scroll up
|
|
||||||
scrollDirection = 'up' |
|
||||||
} else { |
|
||||||
// First scroll event
|
|
||||||
} |
|
||||||
scrollAction.x = window.pageXOffset |
|
||||||
scrollAction.y = window.pageYOffset |
|
||||||
return scrollDirection |
|
||||||
} |
} |
||||||
|
|
||||||
// export class scrollDirection {
|
export default function (direction: string) { |
||||||
// scrollActionX: any
|
if (scrollAction.x == undefined) { |
||||||
// scrollActionY: any
|
scrollAction.x = window.pageXOffset |
||||||
// scrollDirection: string
|
scrollAction.y = window.pageYOffset |
||||||
// constructor() {
|
} |
||||||
// this.scrollActionX = undefined
|
let diffX = scrollAction.x - window.pageXOffset |
||||||
// this.scrollActionY = undefined
|
let diffY = scrollAction.y - window.pageYOffset |
||||||
// }
|
if (direction == 'x' || direction == 'X' ) { |
||||||
// scrollDrictionX() {
|
if (diffX < 0) { |
||||||
// if (typeof this.scrollActionX == 'undefined') {
|
scrollAction.d = 'right' |
||||||
// this.scrollActionX = window.pageXOffset
|
} else if (diffX > 0) { |
||||||
// }
|
scrollAction.d = 'left' |
||||||
// if (this.scrollActionX > window.pageXOffset) {
|
} |
||||||
// // Scroll right
|
} else { |
||||||
// this.scrollDirection = 'right'
|
if (diffY < 0) { |
||||||
// } else {
|
scrollAction.d = 'down' |
||||||
// // Scroll left
|
} else if (diffY > 0) { |
||||||
// this.scrollDirection = 'left'
|
scrollAction.d = 'up' |
||||||
// }
|
} |
||||||
// this.scrollActionX = window.pageXOffset
|
} |
||||||
// return this.scrollDirection
|
scrollAction.x = window.pageXOffset |
||||||
// }
|
scrollAction.y = window.pageYOffset |
||||||
// scrollDrictionY() {
|
return scrollAction.d |
||||||
// if (typeof this.scrollActionY == 'undefined') {
|
} |
||||||
// this.scrollActionY = window.pageYOffset
|
|
||||||
// }
|
|
||||||
// if (this.scrollActionY > window.pageYOffset) {
|
|
||||||
// // Scroll right
|
|
||||||
// this.scrollDirection = 'down'
|
|
||||||
// } else {
|
|
||||||
// // Scroll left
|
|
||||||
// this. scrollDirection = 'up'
|
|
||||||
// }
|
|
||||||
// this.scrollActionY = window.pageYOffset
|
|
||||||
// }
|
|
||||||
// }
|
|
Loading…
Reference in new issue