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; // align-items: auto;
background: url('./assets/wave.footer.svg') bottom no-repeat; background: url('./assets/wave.footer.svg') bottom no-repeat;
background-size: 100% 4vw; background-size: 100vw auto;
overflow: hidden; overflow: hidden;
} }
</style> </style>

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

@ -2,21 +2,21 @@
<!-- Created with Inkscape (http://www.inkscape.org/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <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" width="420.00018mm"
height="20.821516mm" height="20.821516mm"
viewBox="0 0 420.00018 20.821516" viewBox="0 0 420.00018 20.821516"
version="1.1" version="1.1"
id="svg2775" id="svg2775"
sodipodi:docname="wave.invert.1.svg" 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 <defs
id="defs2769"> id="defs2769">
<linearGradient <linearGradient
@ -52,16 +52,16 @@
borderopacity="1.0" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageopacity="0.0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="1.4142136" inkscape:zoom="0.50001213"
inkscape:cx="706.05076" inkscape:cx="1379.9665"
inkscape:cy="109.92134" inkscape:cy="465.98869"
inkscape:document-units="mm" inkscape:document-units="mm"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="false" showgrid="false"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1016" inkscape:window-height="1011"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="34" inkscape:window-y="37"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:object-paths="false" inkscape:object-paths="false"
inkscape:snap-intersection-paths="true" inkscape:snap-intersection-paths="true"
@ -70,7 +70,8 @@
fit-margin-right="0" fit-margin-right="0"
fit-margin-bottom="0" fit-margin-bottom="0"
inkscape:snap-midpoints="true" inkscape:snap-midpoints="true"
inkscape:object-nodes="true" /> inkscape:object-nodes="true"
inkscape:pagecheckerboard="0" />
<metadata <metadata
id="metadata2772"> id="metadata2772">
<rdf:RDF> <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/) --> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <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" width="420.00018mm"
height="20.821516mm" height="20.821516mm"
viewBox="0 0 420.00018 20.821516" viewBox="0 0 420.00018 20.821516"
version="1.1" version="1.1"
id="svg2775" id="svg2775"
sodipodi:docname="wave.invert.2.svg" 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 <defs
id="defs2769"> id="defs2769">
<linearGradient <linearGradient
@ -52,16 +52,16 @@
borderopacity="1.0" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageopacity="0.0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="0.5" inkscape:zoom="1.0230171"
inkscape:cx="532.26558" inkscape:cx="867.04315"
inkscape:cy="-66.114037" inkscape:cy="141.73761"
inkscape:document-units="mm" inkscape:document-units="mm"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="false" showgrid="false"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1016" inkscape:window-height="1011"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="34" inkscape:window-y="37"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:object-paths="false" inkscape:object-paths="false"
inkscape:snap-intersection-paths="true" inkscape:snap-intersection-paths="true"
@ -71,7 +71,8 @@
fit-margin-bottom="0" fit-margin-bottom="0"
inkscape:snap-midpoints="true" inkscape:snap-midpoints="true"
inkscape:object-nodes="true" inkscape:object-nodes="true"
inkscape:snap-page="true" /> inkscape:snap-page="true"
inkscape:pagecheckerboard="0" />
<metadata <metadata
id="metadata2772"> id="metadata2772">
<rdf:RDF> <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"> <style scoped lang="scss">
$banner-size: 14rem; $banner-size: 14rem;
$icon-size: 9rem; $icon-size: 9rem;
$wave-height: 5rem; $wave-height: 6.3rem;
$mq-noresize: 1250px; $mq-noresize: 1250px;
$mq-noicon: 940px; $mq-noicon: 940px;
@ -82,7 +82,7 @@
color: #fff; color: #fff;
font-size: 1rem; font-size: 1rem;
font-family: 'Roboto'; font-family: 'Fira Code';
font-weight: 300; font-weight: 300;
white-space: nowrap; white-space: nowrap;
@ -90,12 +90,7 @@
@keyframes wave { @keyframes wave {
from{ background-position-x: 0; } from{ background-position-x: 0; }
to{ background-position-x: 1000%; } to{ background-position-x: 100vw; }
}
@keyframes sink {
from{ background-position-y: 0; }
to{ background-position-y: #{$wave-height/2}; }
} }
.wave { .wave {
@ -103,24 +98,18 @@
position: absolute; position: absolute;
top: calc( 100% - #{$wave-height} ); top: calc( 100% - #{$wave-height} );
left: 0; left: 0;
// waves are too "bumpy" on mobile width: 100vw;
min-width: 40rem; height: #{$wave-height};
width: 100%;
height: calc( #{$wave-height} + 1px );
/* OPTI ? */// will-change: background-position; background-image: url('../assets/wave.invert.1.svg');
background-repeat: repeat-x;
background: url('../assets/wave.invert.1.svg') repeat-x; background-size: 100vw auto;
background-position: 0 0;
background-size: 200% 100%;
animation: 200s linear wave infinite;
animation: 100s linear wave infinite;
&.w2{ &.w2{
background-image: url('../assets/wave.invert.2.svg'); background-image: url('../assets/wave.invert.2.svg');
background-size: 150% 100%; animation: 100s linear wave infinite reverse;
animation: 100s linear wave infinite reverse;//, 2s ease sink infinite alternate;
} }
} }