32

Starry Night Animated Page Background

I do not claim credit for this concept as it is directly inspired by the starfield background on the following pen:

Isometric Map Editor by Karl (@zerratar)

This pen is mostly focused on isolating the starfield animation and fixing a few of the minor issues with the original.

Beyond this, this pen also contains the CSS and code required to use the starfield as a full page animated background, as well as introducing a few minor stylistic tweaks and parameterisation options.

The rest of the content in this box is simply filler to demonstrate how the background behaves when the page scrolls. On all tested browsers it remains fixed in position with the animation uninterrupted.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat lacus a risus convallis, at volutpat leo mattis. Praesent luctus pretium lorem porttitor luctus. Donec eget semper tellus. Pellentesque semper laoreet ultrices. Nam posuere mauris vitae lacus dignissim interdum. Cras porttitor malesuada lorem, et feugiat est ultricies sit amet. Sed placerat mi nibh, et gravida nulla dapibus eu. Cras a augue sollicitudin, pretium erat ac, dictum erat. Aliquam facilisis justo sed iaculis aliquet. Ut elit ipsum, accumsan a dignissim vel, mollis a neque. Donec iaculis dolor a tempor venenatis. Quisque blandit dictum ligula, sit amet lobortis sapien.

Sed libero nisi, posuere et rhoncus et, tempor tristique ex. Mauris sollicitudin pellentesque libero, eu posuere augue volutpat vel. Etiam sed diam ipsum. Curabitur ac enim euismod, vulputate velit ac, vestibulum lacus. Sed mollis tincidunt aliquam. Phasellus interdum dictum luctus. Nullam gravida ultricies bibendum. Nullam lacinia fringilla urna at dictum. Suspendisse felis arcu, posuere vel ipsum et, pulvinar tempus lorem.

Aliquam porttitor a mi in consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sem ante, ultrices sit amet tempor eget, aliquet at diam. Sed eu pharetra mi. Mauris fermentum, nibh non lobortis bibendum, lacus sem tempor sem, in iaculis turpis mauris sit amet tortor. Suspendisse tempor est sed enim tempor, ut viverra ante interdum. Duis vel ex a est feugiat sollicitudin. Mauris fermentum purus at mi varius, eu faucibus metus tincidunt. Vestibulum neque magna, pellentesque suscipit diam id, iaculis rhoncus mi. Nunc rutrum luctus lorem, vel elementum turpis vulputate vitae. Etiam eget nisl ac turpis fermentum porttitor. Cras nec ipsum ultricies, varius erat a, lacinia leo. Sed efficitur velit dolor, et blandit arcu interdum ut.

Duis a laoreet eros. Aliquam in mattis risus. Ut rutrum risus euismod dictum iaculis. Proin lacinia libero ut luctus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia tempus ultrices. Cras ultrices leo sit amet mauris congue interdum. Mauris consequat justo pharetra massa rutrum, ac elementum magna imperdiet. Praesent dapibus justo id consequat dignissim. Pellentesque tincidunt nisi at ornare suscipit.

Donec rhoncus, ipsum eu tempus gravida, augue tellus cursus neque, eu imperdiet mauris augue eget ex. Mauris ligula justo, mollis sed placerat non, facilisis a justo. Nullam aliquam accumsan mauris, mollis pulvinar ligula imperdiet sit amet. Etiam non ullamcorper risus. Vivamus sed erat aliquam, iaculis risus non, semper tellus. Morbi blandit aliquam augue vel semper. Pellentesque tempus viverra nunc, quis consectetur lacus sagittis non. Donec et malesuada ligula. Quisque vitae quam blandit, rutrum odio vel, condimentum nisl. Sed pretium, elit lacinia dignissim ultrices, diam tellus rhoncus diam, vitae malesuada lectus elit sit amet velit. Aenean non erat mattis, vulputate velit vitae, sagittis ipsum. Nam pellentesque metus quis tristique faucibus. Suspendisse vulputate libero id neque cursus lobortis. Nunc pharetra tristique eros non pharetra.

Donec semper ornare lorem. Nulla sed eros diam. Sed ac dui ornare, maximus nisl in, porta purus. Aliquam porta mauris lectus, et finibus enim tristique non. Curabitur pellentesque dignissim lorem, non bibendum magna pharetra vel. Sed lorem nunc, congue sed risus in, vestibulum tristique libero. Suspendisse commodo eros eget est maximus, eu viverra quam tempus. Nunc fringilla lectus et aliquam aliquet. Nulla consequat euismod tortor, vel aliquam justo hendrerit ac. Vivamus mauris tellus, dignissim eu vehicula at, finibus quis eros. Pellentesque ullamcorper justo id nulla fermentum fermentum. Duis a neque rhoncus, eleifend nisl sagittis, consequat sem.

Aenean porta, risus a vestibulum eleifend, nisi ante interdum diam, sed auctor ipsum diam ac risus. Praesent eleifend imperdiet tristique. Mauris quis diam elementum, facilisis arcu sed, egestas diam. Fusce at neque viverra, mollis enim sed, mollis diam. Nulla ut mauris nec sem vestibulum iaculis ac ut magna. Etiam id erat non sapien tempor lacinia at ut dolor. Maecenas erat justo, interdum vel volutpat et, convallis ac dui. Praesent vehicula feugiat posuere. Aenean eget neque condimentum, consectetur tortor in, vulputate mauris. Aliquam felis metus, luctus quis elit at, egestas facilisis augue.