diff --git a/example-1/index.html b/example-1/index.html index a85503d..d7d34a4 100644 --- a/example-1/index.html +++ b/example-1/index.html @@ -3,78 +3,147 @@ Example 1 + -
+
+
+ +
- - - + + + -

Example oh yeah 1

-

This is an example of a simple HTML page.

-
+
+
+

Animate on scroll

+

How to Animate svg lines on scroll.

+ +
+

Text information

+

+ Mauris ultricies nisi nibh, at pretium ipsum porta rutrum. + Pellentesque imperdiet magna viverra enim imperdiet aliquam. + Vestibulum placerat sem et lorem malesuada lacinia. Aenean + porttitor feugiat semper. In sodales eleifend placerat. + Nulla feugiat est nec lorem consectetur sollicitudin. Sed + orci ante, lobortis non varius a, tristique at erat. + Pellentesque gravida iaculis turpis vel porta. Fusce maximus + ullamcorper lectus, sed eleifend urna porta nec. Vestibulum + in risus eleifend, porttitor magna a, volutpat quam. Fusce + faucibus dignissim dignissim. Proin sit amet interdum neque. +

+
+
+

Text information

+

+ Mauris ultricies nisi nibh, at pretium ipsum porta rutrum. + Pellentesque imperdiet magna viverra enim imperdiet aliquam. + Vestibulum placerat sem et lorem malesuada lacinia. Aenean + porttitor feugiat semper. In sodales eleifend placerat. + Nulla feugiat est nec lorem consectetur sollicitudin. Sed + orci ante, lobortis non varius a, tristique at erat. + Pellentesque gravida iaculis turpis vel porta. Fusce maximus + ullamcorper lectus, sed eleifend urna porta nec. Vestibulum + in risus eleifend, porttitor magna a, volutpat quam. Fusce + faucibus dignissim dignissim. Proin sit amet interdum neque. +

+
+
+

Text information

+

+ Mauris ultricies nisi nibh, at pretium ipsum porta rutrum. + Pellentesque imperdiet magna viverra enim imperdiet aliquam. + Vestibulum placerat sem et lorem malesuada lacinia. Aenean + porttitor feugiat semper. In sodales eleifend placerat. + Nulla feugiat est nec lorem consectetur sollicitudin. Sed + orci ante, lobortis non varius a, tristique at erat. + Pellentesque gravida iaculis turpis vel porta. Fusce maximus + ullamcorper lectus, sed eleifend urna porta nec. Vestibulum + in risus eleifend, porttitor magna a, volutpat quam. Fusce + faucibus dignissim dignissim. Proin sit amet interdum neque. +

+
+
+

Text information

+

+ Mauris ultricies nisi nibh, at pretium ipsum porta rutrum. + Pellentesque imperdiet magna viverra enim imperdiet aliquam. + Vestibulum placerat sem et lorem malesuada lacinia. Aenean + porttitor feugiat semper. In sodales eleifend placerat. + Nulla feugiat est nec lorem consectetur sollicitudin. Sed + orci ante, lobortis non varius a, tristique at erat. + Pellentesque gravida iaculis turpis vel porta. Fusce maximus + ullamcorper lectus, sed eleifend urna porta nec. Vestibulum + in risus eleifend, porttitor magna a, volutpat quam. Fusce + faucibus dignissim dignissim. Proin sit amet interdum neque. +

+
+
+

Text information

+

+ Mauris ultricies nisi nibh, at pretium ipsum porta rutrum. + Pellentesque imperdiet magna viverra enim imperdiet aliquam. + Vestibulum placerat sem et lorem malesuada lacinia. Aenean + porttitor feugiat semper. In sodales eleifend placerat. + Nulla feugiat est nec lorem consectetur sollicitudin. Sed + orci ante, lobortis non varius a, tristique at erat. + Pellentesque gravida iaculis turpis vel porta. Fusce maximus + ullamcorper lectus, sed eleifend urna porta nec. Vestibulum + in risus eleifend, porttitor magna a, volutpat quam. Fusce + faucibus dignissim dignissim. Proin sit amet interdum neque. +

+
+ +
+
+ + + + + + + +
diff --git a/example-1/styles.css b/example-1/styles.css index 6d4ab0d..65802d5 100644 --- a/example-1/styles.css +++ b/example-1/styles.css @@ -7,16 +7,8 @@ animation: dash-2 0.5s ease-in-out forwards; } -/* .animation-layer { - animation: dash $timing $easing forwards; - opacity: 1; -} -.animation-out-layer { - animation: dash-2 $timing $easing forwards; -} */ - .icon .animation-layer { - stroke: #fff; //hsl(239, 16%, 63%); + stroke: #fff; animation: dash-out 0.5s ease-in-out forwards; } .icon .animation-out-layer { @@ -25,14 +17,22 @@ transition-delay: 0s; animation: dash-2-out 0.5s ease-in-out forwards; } - -body { - background: hsl(192, 37%, 60%); - padding: 50px; +.svg-timeline { + z-index: -1; +} +.svg-timeline .animation-layer { + stroke: var(--color-blue); + animation: dash linear; + animation-timeline: scroll(); +} +.svg-timeline .animation-out-layer { + animation: dash-2 linear; + animation-timeline: scroll(); } @keyframes dash { to { + stroke: var(--color-beige); stroke-dashoffset: 0; } } diff --git a/example2/index.html b/example2/index.html new file mode 100644 index 0000000..c5edb91 --- /dev/null +++ b/example2/index.html @@ -0,0 +1,99 @@ + + + + Example 1 + + + + + + +
+
+ +
+ + + + + + + + + +
+
+
+ + + + +
+
+ + diff --git a/example2/scripts.js b/example2/scripts.js new file mode 100644 index 0000000..32a1f03 --- /dev/null +++ b/example2/scripts.js @@ -0,0 +1,31 @@ +document.addEventListener("DOMContentLoaded", function () { + // Code to be executed when the DOM is ready + + const animateIn = document.querySelectorAll(".animation-layer"); + const animateOut = document.querySelectorAll(".animation-out-layer"); + for (var item of animateIn) { + if (item.getTotalLength) { + item.style.strokeDasharray = item.getTotalLength(); + item.style.strokeDashoffset = item.getTotalLength(); + } + } + for (var layer of animateOut) { + if (layer.getTotalLength) { + layer.style.strokeDasharray = + "0," + + layer.getTotalLength() + + " " + + 2 * layer.getTotalLength(); + layer.style.strokeDashoffset = layer.getTotalLength(); + } + } + setTimeout(() => { + const active = document.querySelector(".icon").classList.add("active"); + console.log("active", active); + }, 1900); + + // document.body.addEventListener( 'mousemove', (e) => { + // document.documentElement.style.setProperty('--mouse-x', `${e.pageX}px`); + // document.documentElement.style.setProperty('--mouse-y', `${e.pageY}px`); + // }); +}); diff --git a/example2/styles.css b/example2/styles.css new file mode 100644 index 0000000..5b5eae1 --- /dev/null +++ b/example2/styles.css @@ -0,0 +1,33 @@ +.icon { + opacity: 0; +} +.icon.active { + opacity: 1; +} +.icon .animation-layer { + stroke: var(--color-beige); + animation: dash-out 1.9s ease-in-out forwards; +} +.icon.active .animation-layer { + opacity: 1; + animation: dash 1.9s ease-in-out forwards; +} + +.icon.active .layer-2.animation-layer { + animation-delay: 1.8s; +} +.icon .layer-2.animation-layer { + animation-delay: 0s; +} + +@keyframes dash { + to { + stroke-dashoffset: 0; + } +} + +@keyframes dash-out { + from { + stroke-dashoffset: 0; + } +} diff --git a/moderat.woff2 b/moderat.woff2 new file mode 100644 index 0000000..349b4fa Binary files /dev/null and b/moderat.woff2 differ diff --git a/overall.css b/overall.css new file mode 100644 index 0000000..cf819f0 --- /dev/null +++ b/overall.css @@ -0,0 +1,25 @@ +@font-face { + font-family: "Moderat"; + font-style: normal; + font-weight: 400; + src: url("moderat.woff2") format("woff2"); +} + +:root { + --color-blue: #1e1f9f; + --color-beige: #f2cecf; +} + +body { + background: hsl(192, 37%, 60%); + background: var(--color-blue); + font-family: "Moderat", sans-serif; + color: var(--color-beige); + padding: 0 50px; +} +.logo-visible path { + fill: var(--color-beige); +} +.mark path { + fill: var(--color-beige); +}