NextJS: Параллакс в NextJS с использованием простого html, css

Я пытаюсь создать эффект параллакса без импорта React и ReactDom. Я использую базовый html и css для создания этого параллакса. У меня нет выбора, кроме как использовать:

      import Image from 'next/image'

Как мне создать этот эффект параллакса? Вот мой код: Папка страниц -> index.js

      import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image'

export default function Home() {
  return (
    <div className={styles.container}>

      <div className={styles.section}>

      <Head>
        <title>Parallax Effect</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Image className={styles.bg}
        src="/../public/bg.jpg"
        width={2049}
        height={2049}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.moon}
        src="/../public/moon.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.mountain}
        src="/../public/mountain.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />
      <Image className={styles.road}
        src="/../public/road.png"
        width={2049}
        height={1152}
        // objectFit="cover"
        // quality={100}
      />

      <h2 className={styles.text}>Moon Light</h2>

      </div>
    </div>
  )
}

папка стилей -> global.css

      html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

папка стилей -> Home.module.css

      .container {
  background: #0a2a43;
  min-height: 1500px;
}
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section > Image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

Эти базовые HTML и CSS легко создают минимум, необходимый для создания фона для параллакса. По какой-то причине NextJS просто не работает, когда я добавляю этот код. Подскажите, пожалуйста, что здесь не так.

Источник

0 ответов

Другие вопросы по тегам