xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: waves

This commit is contained in:
Adrien Marquès 2021-06-28 20:53:18 +02:00
parent 1fa9a8a7d7
commit d827582cc4
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
4 changed files with 43 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -38,9 +38,8 @@ export default class App extends Vue {
// align-items: auto;
background: url('./assets/wave.footer.svg') bottom no-repeat;
background-size: 100% 4vw;
background-size: 100vw auto;
overflow: hidden;
}
</style>

31
src/assets/wave.invert.1.svg
View File

@ -2,21 +2,21 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="420.00018mm"
height="20.821516mm"
viewBox="0 0 420.00018 20.821516"
version="1.1"
id="svg2775"
sodipodi:docname="wave.invert.1.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2769">
<linearGradient
@ -52,16 +52,16 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="706.05076"
inkscape:cy="109.92134"
inkscape:zoom="0.50001213"
inkscape:cx="1379.9665"
inkscape:cy="465.98869"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="false"
inkscape:snap-intersection-paths="true"
@ -70,7 +70,8 @@
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-midpoints="true"
inkscape:object-nodes="true" />
inkscape:object-nodes="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata2772">
<rdf:RDF>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

31
src/assets/wave.invert.2.svg
View File

@ -2,21 +2,21 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="420.00018mm"
height="20.821516mm"
viewBox="0 0 420.00018 20.821516"
version="1.1"
id="svg2775"
sodipodi:docname="wave.invert.2.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2769">
<linearGradient
@ -52,16 +52,16 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.5"
inkscape:cx="532.26558"
inkscape:cy="-66.114037"
inkscape:zoom="1.0230171"
inkscape:cx="867.04315"
inkscape:cy="141.73761"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="false"
inkscape:snap-intersection-paths="true"
@ -71,7 +71,8 @@
fit-margin-bottom="0"
inkscape:snap-midpoints="true"
inkscape:object-nodes="true"
inkscape:snap-page="true" />
inkscape:snap-page="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata2772">
<rdf:RDF>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

31
src/components/Banner.vue
View File

@ -59,7 +59,7 @@
<style scoped lang="scss">
$banner-size: 14rem;
$icon-size: 9rem;
$wave-height: 5rem;
$wave-height: 6.3rem;
$mq-noresize: 1250px;
$mq-noicon: 940px;
@ -82,7 +82,7 @@
color: #fff;
font-size: 1rem;
font-family: 'Roboto';
font-family: 'Fira Code';
font-weight: 300;
white-space: nowrap;
@ -90,12 +90,7 @@
@keyframes wave {
from{ background-position-x: 0; }
to{ background-position-x: 1000%; }
}
@keyframes sink {
from{ background-position-y: 0; }
to{ background-position-y: #{$wave-height/2}; }
to{ background-position-x: 100vw; }
}
.wave {
@ -103,24 +98,18 @@
position: absolute;
top: calc( 100% - #{$wave-height} );
left: 0;
// waves are too "bumpy" on mobile
min-width: 40rem;
width: 100%;
height: calc( #{$wave-height} + 1px );
width: 100vw;
height: #{$wave-height};
/* OPTI ? */// will-change: background-position;
background: url('../assets/wave.invert.1.svg') repeat-x;
background-position: 0 0;
background-size: 200% 100%;
animation: 200s linear wave infinite;
background-image: url('../assets/wave.invert.1.svg');
background-repeat: repeat-x;
background-size: 100vw auto;
animation: 100s linear wave infinite;
&.w2{
background-image: url('../assets/wave.invert.2.svg');
background-size: 150% 100%;
animation: 100s linear wave infinite reverse;//, 2s ease sink infinite alternate;
animation: 100s linear wave infinite reverse;
}
}