File tree Expand file tree Collapse file tree 1 file changed +15
-5
lines changed Expand file tree Collapse file tree 1 file changed +15
-5
lines changed Original file line number Diff line number Diff line change 1
1
<template >
2
- <section v-bind:class =" [sectionClass]" ref =" block" v-bind:style =" { height: sectionHeight + 'vh' }" >
2
+ <div v-bind:class =" [sectionClass]" ref =" block" v-bind:style =" { height: sectionHeight + 'vh' }" >
3
3
<div
4
4
v-bind:class =" [parallax ? parallaxClass : '', fixed ? fixedClass : '', containerClass]"
5
5
ref =" parallax"
6
6
>
7
7
<slot ></slot >
8
8
</div >
9
- </section >
9
+ </div >
10
10
</template >
11
11
12
12
<script >
48
48
fixedClass: {
49
49
type: String ,
50
50
default: ' is-fixed'
51
+ },
52
+ direction: {
53
+ type: String ,
54
+ default: ' up'
51
55
}
52
56
},
53
57
80
84
let animationValue = (window .pageYOffset * this .speedFactor )
81
85
82
86
if (animationValue <= availableOffset && animationValue >= 0 ) {
83
- this .el .style .transform = ` translate3d(0, ${ animationValue * - 1 } px ,0)`
87
+ this .el .style .transform = ` translate3d(0, ${ animationValue * 1 } px ,0)`
84
88
}
85
89
},
86
90
117
121
this .setupListener ()
118
122
}
119
123
}
124
+ },
125
+
126
+ computed: {
127
+ directionValue () {
128
+ return this .direction === ' down' ? + 1 : - 1
129
+ }
120
130
}
121
131
}
122
132
</script >
144
154
height : 100% ;
145
155
max-width : none ;
146
156
width : 100% ;
147
- @include object-fit (cover , bottom );
157
+ @include object-fit (cover , top );
148
158
}
149
159
150
160
& .is-parallax {
158
168
height : 100% ;
159
169
max-width : none ;
160
170
width : 100% ;
161
- @include object-fit (cover , bottom );
171
+ @include object-fit (cover , top );
162
172
}
163
173
}
164
174
You can’t perform that action at this time.
0 commit comments