advantagevast.blogg.se - Parallax css

Parallax css code#

Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. webkit-transform: translateZ(-1px) scale(2) Transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg) webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg)

Transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg) webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg) (IE doesn't happen to support transform-style, by the way.)įinally, different scrolling speeds can be achieved by tweaking transform property, like the two img elements of the example.īox-shadow: 0 -1px 10px rgba(0, 0, 0. Moreover, the scrolling effect seems to depend on the setting transform-style: preserve-3d of body to work properly.

scrolling, with transform: translateZ(-1px) scale(2) before the desired element, like #slide1.

fixed, with background-attachment: fixed in the desired element, like #slide2.

The example appears to have two kinds of backgrounds:

Parallax css code#

For the record, I place the source code here, providing support for Chrome, Safari and Opera, too. Searching for parallax pure css and clicking on the first result from CodePen (the second result is the current page :), a nice example is displayed with both fixed and scrolling backgrounds.