Author: | ksksoft |
---|---|
Views Total: | 13,829 views |
Official Page: | Go to website |
Last Update: | May 19, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS approach to creating Twitter-like header background parallax scrolling effects using CSS, CSS3 transforms and :before
pseudo element.
How to use it:
Create a parallax header for your web page.
<header> <h1>Parallax header</h1> </header>
The basic CSS styles.
html { height: 100%; overflow: hidden; } body { color: #fff; margin: 0; padding: 0; -webkit-perspective: 1px; perspective: 1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; }
The core CSS / CSS3 styles for the parallax header.
header { box-sizing: border-box; min-height: 40vw; padding: 30vw 0 5vw; position: relative; -webkit-transform-style: inherit; transform-style: inherit; width: 100vw; } header, header:before { background: 50% 50% / cover; } header::before { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; display: block; background-color: #8a8; background-image: url(background.jpg); background-size: cover; -webkit-transform-origin: center center 0; -webkit-transform: translateZ(-1px) scale(2); transform-origin: center center 0; transform: translateZ(-1px) scale(2); z-index: -1; min-height: 100vh; }
How would you go about adding a fixed nav menu on this?
it’s like a sticky background image, but the pralax has a much better effect
how do you add a nav menu to blogger?