https://github.com/fujiharuka/page-slider

https://github.com/fujiharuka/page-slider

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/fujiharuka/page-slider
• Owner: FujiHaruka
• Created: 2016-07-05T13:29:09.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-05T13:42:42.000Z (almost 9 years ago)
• Last Synced: 2025-01-08T04:12:58.507Z (5 months ago)
• Language: HTML
• Size: 2.93 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Page Slider (JavaScript)

Web サイトのページ遷移に左右のスライドアクションをつける JavaScript ライブラリ。

## 使い方

HTML ファイル内で `page_slider.js` を読み込んで、クラスを指定するだけ。

#### 1. HTML ファイル内で読み込む

head 要素内に以下を書く。

```html

```

#### 2. リンクのページ遷移アクションをつける

a 要素のクラスを "page-slider-to-left" または "page-slider-to-right" にする。

```html

右のページヘ

左のページヘ

```

ページ遷移アクションの対象となる要素のクラスを "page-slider-sliding-section" にする。

```html



  ここに挟まれたすべての要素が、ページ遷移時にスライドする。



```


#### 3. ページのロード時のページ遷移アクションをつける

アクションをつけたい要素のクラスを "page-slider-from-right" または "page-slider-from-left" にする。

```html



  ここに挟まれたすべての要素が、ページのロード時に右から来る。



```


```html



  ここに挟まれたすべての要素が、ページのロード時に左から来る。



```


## デモ

[デモページ](https://FujiHaruka.github.io/page-slider/demo/left.html)