components#Parallax TypeScript Examples

The following examples show how to use components#Parallax. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MenuComp.tsx    From vignette-web with MIT License 4 votes vote down vote up 
MenuComp = () => {
  const size = useWindowSize()
  const mobile = size.width < 1024

  return (
    <motion.div
      transition={{ duration: 0.2 }}
      initial={{ opacity: 0.2 }}
      animate={{ opacity: 1 }}
      className=""
    >
      <div className="z-40 py-8 sm:relative sm:mt-4 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:pt-8">
        <div className=" hidden sm:block">
          <Parallax
            offset={20}
            className="absolute inset-y-0 left-1/2 z-40 mt-3 w-screen rounded-l-3xl  bg-gray-100 dark:bg-zinc-800 lg:left-80 lg:right-0 lg:w-full"
          />
          <Parallax offset={30} className="relative z-50">
            <svg
              className="absolute right-1/2 top-4  -mr-3 lg:left-0 lg:m-0"
              width="404"
              height="392"
              fill="none"
              viewBox="0 0 404 392"
            >
              <defs>
                <pattern
                  id="837c3e70-6c3a-44e6-8854-cc48c737b659"
                  x="0"
                  y="0"
                  width="20"
                  height="20"
                  patternUnits="userSpaceOnUse"
                >
                  <rect
                    x="0"
                    y="0"
                    width="4"
                    height="4"
                    className="text-gray-200 transition duration-100 dark:text-neutral-600"
                    fill="currentColor"
                  ></rect>
                </pattern>
              </defs>
              <rect
                width="404"
                height="392"
                fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
              ></rect>
            </svg>
          </Parallax>
        </div>
        <Container
          parallax
          noMargin
          offset={mobile ? 20 : 50}
          className="relative z-50 -mr-40 mt-6 px-12 pb-8 sm:mx-auto lg:mt-14"
        >
          <div className="hidden w-full rounded-[2em] shadow-xl ring-opacity-5 lg:inline-flex lg:h-full lg:w-auto lg:max-w-none lg:shadow-2xl">
            <Image
              className=""
              priority
              src={menucomp}
              alt=""
              layout="fixed"
              width={1386}
              height={686}
              quality={90}
            />
          </div>
          <div className=" inline-flex w-full rounded-[1em] shadow-xl ring-opacity-5 lg:hidden lg:shadow-2xl">
            <Image
              className=""
              priority
              src={menucomp}
              alt=""
              width={1386}
              height={686}
              quality={90}
            />
          </div>
        </Container>
      </div>
    </motion.div>
  )
}