Skip to content

Commit 1efb359

Browse files
committed
Change section to div
1 parent a496903 commit 1efb359

File tree

1 file changed

+15
-5
lines changed

1 file changed

+15
-5
lines changed

src/components/Parallax.vue

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<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' }">
33
<div
44
v-bind:class="[parallax ? parallaxClass : '', fixed ? fixedClass : '', containerClass]"
55
ref="parallax"
66
>
77
<slot></slot>
88
</div>
9-
</section>
9+
</div>
1010
</template>
1111

1212
<script>
@@ -48,6 +48,10 @@
4848
fixedClass: {
4949
type: String,
5050
default: 'is-fixed'
51+
},
52+
direction: {
53+
type: String,
54+
default: 'up'
5155
}
5256
},
5357
@@ -80,7 +84,7 @@
8084
let animationValue = (window.pageYOffset * this.speedFactor)
8185
8286
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)`
8488
}
8589
},
8690
@@ -117,6 +121,12 @@
117121
this.setupListener()
118122
}
119123
}
124+
},
125+
126+
computed: {
127+
directionValue () {
128+
return this.direction === 'down' ? +1 : -1
129+
}
120130
}
121131
}
122132
</script>
@@ -144,7 +154,7 @@
144154
height: 100%;
145155
max-width: none;
146156
width: 100%;
147-
@include object-fit(cover, bottom);
157+
@include object-fit(cover, top);
148158
}
149159
150160
&.is-parallax {
@@ -158,7 +168,7 @@
158168
height: 100%;
159169
max-width: none;
160170
width: 100%;
161-
@include object-fit(cover, bottom);
171+
@include object-fit(cover, top);
162172
}
163173
}
164174

0 commit comments

Comments
 (0)