【React】Mapのようにスワイプ移動できるページを実装する
10432 ワード
概要
Google Mapのようにドラッグ操作でスワイプできるページを実装します。
ドラッグ操作には、Framer Motionを使用します。
スタイリングには、emotion/css(CSS in JS)を使用しています。
実装
下図は実装のイメージです。
screenが移動するのではなく、paperだけが移動すると考えてください。
- screenは、ブラウザの表示領域(1vw・1vhの範囲)です。
- 今回は縦横がscreenの2倍を領域をもつマップを作成したので、paperは2vw・2vhになっています。
-
containerは、paperの可動域です。screenに表示されるのが、
#44B3C2
パネルの左上から、#5D4C46
パネルの右下までにしたいので、3vw・3vhとなっています。
import { motion } from 'framer-motion';
import React, { useRef, VFC } from 'react';
import { css } from '@emotion/css';
export const MapPage: VFC = () => {
const containerRef = useRef<HTMLDivElement>(null)
return (
<motion.div ref={containerRef} className={styles.container}>
<motion.div className={styles.paper} drag dragPropagation dragConstraints={containerRef}>
<div className={styles.panel('#44B3C2')}>
<div className={styles.text}>Panel 1</div>
</div>
<div className={styles.panel('#F1A94E')}>
<div className={styles.text}>Panel 2</div>
</div>
<div className={styles.panel('#E45641')}>
<div className={styles.text}>Panel 3</div>
</div>
<div className={styles.panel('#5D4C46')}>
<div className={styles.text}>Panel 4</div>
</div>
</motion.div>
</motion.div>
)
}
const styles = {
container: css`
position: relative;
width: 300vw;
height: 300vh;
/* (300 - 100) / 2 */
transform: translate(-100vw, -100vh);
display: flex;
justify-content: center;
align-items: center;
`,
paper: css`
position: absolute;
width: 200vw;
height: 200vh;
display: flex;
flex-wrap: wrap;
/* start page1 */
top: 100vh;
left: 100vw;
`,
panel: (bgColor: string) => css`
width: 50%;
height: 50%;
background-color: ${bgColor};
display: flex;
justify-content: center;
align-items: center;
`,
text: css`
color: white;
font-size: 3rem;
`
}
paper(styles.paperを割り当ててるdiv)要素をスワイプさせたいので、ドラッグに関するプロパティを割り当てます。
- drag:要素をドラッグできるようにする
- dragPropagation:親要素をドラッグしたときに子要素も移動するようにする
-
dragConstraints:ドラッグできる領域を決める。今回はcontainer要素を可動域にしたいので、
containerRef
を割り当てています。
Framer MotionのDragについて詳しく知りたい方は、以下を参照してください。
成果物
Author And Source
この問題について(【React】Mapのようにスワイプ移動できるページを実装する), 我々は、より多くの情報をここで見つけました https://qiita.com/nemutas/items/f0357971df921906dbc1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .