Category: Web
Random-generated landscapes with parallax scrolling
I have seen parallax scrolling landscapes on some websites in the past and I always found this effect quite astonishing. So with the help of some Perlin-Noise one could make such generated landscapes relatively easy, I was thinking.
https://codepen.io/Grilly86/pen/brdBjO/
I’m fairly happy with the result, of course you can tweak the values for mountain height and frequencys. (just fork the pen https://codepen.io/Grilly86/pen/brdBjO/)
Maybe i will include a SVG export function in the future, because right now the drawing is not very performant. Right now with p5.js im Rendering the whole landscape in every frame (60 times a second).
SVG the most versatile image format
Inlined SVG (scalable vector graphics) elements are probably the most flexible way for including graphical elements of all kinds on a web page. The code of the SVG is directly inlined in a svg element. With this method you can even target and edit g or path elements of the image with Javascript and CSS. I have prepared some examples to show its flexibility.
Animating SVG
This SVG consists of one single path with an animated color-gradient as stroke-attribute as SVG animation. The d-attribute which describes the way of the path is then added and animated with Javascript. Within the requestAnimationFrame-Loop the attribute is set every new frame.
Character animation with SVG
For this example I used the free and open source vector software Inkscape to create the graphic.
I have created two sepearate layers for the different look of the eyes and the eyebrows. I cleaned up the saved SVG file a bit and pasted it into the HTML document.
The actual animation then is purely made with CSS. Styling the :hover state the named layers are being hidden or shown.
This example is more a proof-of-concept than a full-fledged character creation, that’s why the graphic is kept rather simple.
SVG in layout
The most practical usage of SVG in website is probably for general layout elements. Curvy or skewed layouts were only possible with background-images until recently. With SVG any kind of shapes are doable without any problems.
Thanks to its versatility even responding to media queries is possible. That way a graphic can be totally dependent on the features of the displaying device.
Changing perspective on scroll
I wanted to achieve an effect: while scrolling an 3D-elements perspective should change depending the position inside the viewport. For this you only have to set the CSS-property perspective on the body element and be sure that the content is scolling inside of the body element with overflow-y:auto;.
Implementation
The following code creates this effect:
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
overflow: auto;
perspective: 500px;
}
The full code can be seen in the codepen example.