Skip to content

My SVG Parallax Fjord site but built with Svelte for some experimenting.

Notifications You must be signed in to change notification settings

Jimmydalecleveland/svg-parallax-fjord--svelte

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SVG Parallax Fjord - Built with Svelte

https://svelte.parallaxfjord.com/

My first attempt at this site was built with React. Svelte has some great animation centric functionality built into the framework and it works very nicely with SVGs out of the box. I rebuilt the project to get some practice with Svelte and to compare sizes of final output.

Some cool things about the project

  • No animation library added for Parallax effects. It uses svelte's convenient window binding to sync a scrollY variable with everything on the page, including the background transition.
  • Uses CSS variables from a derived value to accomplish background transition. Svelte doesn't currently allow local js variables to be used in CSS, but through this trick you can accomplish that goal.
    • I have since learned that CSS variables do not perform well when being recalculated, particularly when the element it is declared on has a lot of children. I've switched this to simple js variables that are read on the element for better performance
  • Built for up to 2560px resolution.
  • Uses svelte:component to cleanly loop over an array of objects with component values to make the code much more concise but also allows for easy reordering and a central place to update parallax speeds.
  • SVG morphing animations for trees blowing in the wind using snap-svg.

About

My SVG Parallax Fjord site but built with Svelte for some experimenting.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published