スクロールで画像の横方向スライド
![](https://www.i-mndks.info/digital/wp-content/webpc-passthru.php?src=https://www.i-mndks.info/digital/wp-content/uploads/2023/07/R0001906-1-700x467.jpeg&nocache=1)
スクロールアップさせると画像左へ移動する効果
反対にスクローダウンすると反対方向へ移動
設定方法は下の通り
設定
![スクロールスライド](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/scrolling_slide-700x579.webp)
画像を編集のウイジェットに画像を入れて、
その画像をスクロールさせると見えるように調整してみた。
- 画像を編集
- 高度な設定
- モーション効果
- Scrolling Effects ON
- Horizontal Scroll
- To Left
- Effects Relative To Viewport
Tips
同様の効果には、
Vertical Scroll などがあり、色々と試してみる価値はある。
モーション効果の例
モーション効果を以下を複数合わせて
- Vertical Scroll
- Horizontal Scroll
- Scale
実際のサイトには、ちょっとウザい動きになるが、やり方によっては面白いかもしれない。
![](https://www.i-mndks.info/digital/wp-content/webpc-passthru.php?src=https://www.i-mndks.info/digital/wp-content/uploads/2023/07/R0001906-1-700x467.jpeg&nocache=1)
重なりを制御
レイヤーという概念があって、z-index の数値で制御します。
各ウイジェットの「高度な設定」項目の中にあります。
下の3色のカードには、z-index 1-3 が設定しました。
z-index の重なった時の理解を深めてください。
z-index の数値の大きいレイヤーが前面にくる。
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index1.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index2.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/z-index3.webp)
関連記事
![scrolling effects sample page](https://www.i-mndks.info/digital/wp-content/uploads/2023/08/scrolling_sample-300x300.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/sticky_eye-300x300.webp)
![](https://www.i-mndks.info/digital/wp-content/uploads/2023/07/scrolling_effect_trance-300x300.webp)
![toc_nomatche](https://www.i-mndks.info/digital/wp-content/uploads/2022/08/toc_nomatche-300x300.webp)
Table of Contents 見出しクリックで位置ずれ
2022-08-07
コメントはまだありません
Table of contents の見出しをクリックすると本文のセクションまでスクロールする.ヘッダーメニュー固定で位置がずれる.解決策は