Introduce

mxm-full-parallax is a package to achieve full-page scroll and parallax background animation effects.

the init class expected a HTMLElement , and an optional config, the HTMLElement must be constructed with an specific form, example as below

::the scroll behavior are different (reversed) in window and Mac system::

Usage

import MxmFullPage from '@mxmweb/full-page'
import '@mxmweb/full-page/dist/style.css'



  const el = document.getElementById('anyname') as HTMLElement;
  const pages = new MxmFullPage(el)

    <div id="anyname">
      <div class="mxm-page">pageOne</div>
      <div class="mxm-page">pageTwo</div>
      <div class="mxm-page">pageThree</div>
      <div class="mxm-page">pageFour</div>
    </div>

  const mxmFullParallax = new MxmFullParallax(document.querySelector("#container")
, {
    scrollIntensity: 190,
    indicator: {
      show: true,
      dots: {
        color: "#14D70E",
        activedColor: "#D70E0E",
        size: 8,
        round: "full",
      },
    },
	  parallax:[
		{
			pageIndex:number,
			url:string,
			setting:{
				orientation:'up',
//right, down, left, up left, up right, down left or down right
				scale:1.3,
				overflow:false,
				delay:0.6,
				transition:'cubic-bezier(0,0,0,1)'
		}
	  ]
  });

config variable

scrollIntensity

• type: number
• default: 320

indicator

• type:object
• default:true

indicator.dots

• type:object
• default: { color: string size:number activedColor: string round: round | none | full }

indicator.show

• type:boolean
• default: true

actions

• type:object

actons.beforePageChange

• type:Function

actions.afterPageChage

• type:Function