Micro-learnings / Parallax-web-effects

Parallax-web-effects

Parallax effects made with vanilla JS + VivusSVG plugin

FYI

• data-attributes can store any information on the DOM, retrieving their values with the .dataset JS property.
• .getBoundingClientRect() method with its porperty .top returns the difference between the element top and the viewport top.
• ìsInViewport() function checks whether the argumented element is inside the viewport.
• Vivus SVG accepts a second optional argument: a callback that will trigger after the drawing process finishes (plugin docs)
• Smooth transition effect made by the final CSS rule (yay!):

.parallax {
   transition: transform 10s cubic-bezier(0,1,.5,1)
}

External resources

• VivusSVG: self-drawing plugin for SVG: https://github.com/maxwellito/vivus
• Liniea IO iconset (SVG icons taken from the SVG directory): https://github.com/linea-io/Linea-Iconset