@@ -10,7 +10,7 @@ const constainerStyle = {
1010 height : '50vh' ,
1111} ;
1212
13- const absolute = {
13+ const absoluteStyle = {
1414 position : 'absolute' ,
1515 top : 0 ,
1616 right : 0 ,
@@ -24,29 +24,61 @@ const ParallaxBanner = ({ children, className, layers, style, disabled }) => {
2424 style = { { ...constainerStyle , ...style } }
2525 className = { 'parallax-banner' + ( className ? ` ${ className } : '' ) }
2626 >
27- { layers . map ( ( layer , i ) => (
28- < Parallax
29- key = { `layer-${ i } }
30- offsetYMax = { layer . amount * 100 + '%' }
31- offsetYMin = { layer . amount * - 1 * 100 + '%' }
32- slowerScrollRate = { layer . slowerScrollRate }
33- styleInner = { absolute }
34- styleOuter = { absolute }
35- disabled = { disabled }
36- >
37- < div
38- className = { `parallax-banner-layer-${ i } }
39- style = { {
40- backgroundImage : `url(${ layer . image } ,
41- backgroundPosition : 'center' ,
42- backgroundSize : 'cover' ,
43- ...absolute ,
44- top : layer . amount * 100 * - 1 + '%' ,
45- bottom : layer . amount * 100 * - 1 + '%' ,
46- } }
47- />
48- </ Parallax >
49- ) ) }
27+ { layers . map (
28+ (
29+ {
30+ image,
31+ amount,
32+ slowerScrollRate,
33+ children,
34+ expanded = true ,
35+ } ,
36+ i
37+ ) => {
38+ // if this is an expanded layer overwrite the top/bottom styles with negative margins
39+ const expandedStyle = expanded
40+ ? {
41+ top : amount * 100 * - 1 + '%' ,
42+ bottom : amount * 100 * - 1 + '%' ,
43+ }
44+ : { } ;
45+ 46+ return (
47+ < Parallax
48+ key = { `layer-${ i } }
49+ offsetYMax = { amount * 100 + '%' }
50+ offsetYMin = { amount * - 1 * 100 + '%' }
51+ slowerScrollRate = { slowerScrollRate }
52+ styleInner = { absoluteStyle }
53+ styleOuter = { absoluteStyle }
54+ disabled = { disabled }
55+ >
56+ { image ? (
57+ < div
58+ className = { `parallax-banner-layer-${ i } }
59+ style = { {
60+ backgroundImage : `url(${ image } ,
61+ backgroundPosition : 'center' ,
62+ backgroundSize : 'cover' ,
63+ ...absoluteStyle ,
64+ ...expandedStyle ,
65+ } }
66+ />
67+ ) : (
68+ < div
69+ className = { `parallax-banner-layer-${ i } }
70+ style = { {
71+ ...absoluteStyle ,
72+ ...expandedStyle ,
73+ } }
74+ >
75+ { children }
76+ </ div >
77+ ) }
78+ </ Parallax >
79+ ) ;
80+ }
81+ ) }
5082 { children }
5183 </ div >
5284 ) ;
@@ -63,7 +95,9 @@ ParallaxBanner.propTypes = {
6395 layers : PropTypes . arrayOf (
6496 PropTypes . shape ( {
6597 amount : PropTypes . number . isRequired ,
66- image : PropTypes . string . isRequired ,
98+ children : PropTypes . oneOfType ( [ PropTypes . node , PropTypes . func ] ) ,
99+ expanded : PropTypes . bool ,
100+ image : PropTypes . string ,
67101 slowerScrollRate : PropTypes . bool ,
68102 } )
69103 ) ,
0 commit comments