News

Create multiple moving backgrounds with HTML and CSS

Inspired bythe World of Swiss site disocver how to create multi-layered background animation

Create-multiple-moving-backgrounds-with-HTML-and-CSS

Create multiple moving backgrounds with HTML and CSS

inspiration: www.world-of-swiss.com

Zurich-based creative agency Hinderling Volkart’s tag line is “Integrated at heart” and its work for Swiss International Air Lines showcases the agency’s commitment to this philosophy in action.

You will have seen many of the effects used here before, from parallax backgrounds to fullscreen video, but where Hinderling Volkart excels is in combining these techniques and integrating them into the story that it is telling on its client’s behalf. This is a website that demands to be explored; it puts you in the shoes of their pilots, aircrew and passengers.

It tells the stories that help express the values of the airline and is so well done that you become fully immersed in the world Hinderling Volkart has created: the World of Swiss.

DOWNLOAD TUTORIAL FILES

HTML first

Skrollr animates your page elements when you assign data attributes to them and specify the animation state that is required for a particular scroll point. The simplest task to set up is any parallax background you may require. Skrollr can handle any size of graphic, including tiled and non-tiled images.

001        <div id=”bg1” data-0=”background-
position:0px 0px;” data-end=”
background-position:-450px 
-10000px;”></div>
002        <div id=”bg2” data-0=”background-
position:0px 0px;” data-end=”
background-position:-250px 
-8000px;”></div>
003        <div id=”bg3” data-0=”background-
position:0px 0px;” data-end=”
background-position: 0px -6000px
;”></div>

Animated <div>s

You animate an element by specifying its position on screen at the first scroll point: here 30% from the top at scroll point 0 (the top of the page) and the final position: top 0% (top of the page) then the page has scrolled up 500px. You can also apply many other transformations. Here, the opacity of the <div> changes from 0.7 to 0 as the page scrolls up.

001    <div id=”intro” data-0=”opacity:0.7; top:30%;” data-500=”opacity:0; top:0%;”>
002            <h1>Multiple Moving         Backgrounds</h1>
003            <h2>Using Skrollr</h2>
004            <p class=”arrow”>▼</p>
005        </div>

Flying in

To create a relatively complex animation using these tools is quite straightforward. This animation makes the <div> appear from nowhere (scale 0) and do a 360-degree rotate. Once the user has had the chance to read the content, it continues to fly towards the user (scale 2), spinning round again and disappearing into thin air. Not bad work for three or four data statements. The empty specification in data-1600 is a code-efficient useful shorthand for saying ‘keep things as they were at the previous scroll point’.

001        <div id=”transform” data-500=”
transform:scale(0) rotate(0deg);” 
data-1000=”transform:scale(1) 
rotate(360deg);opacity:1;” data-
1600=”” data-1700=”transform:
scale(2) rotate(0deg);opacity:0;”>
002            <h2>Parallax</h2>
003            <p>Is only part of it</p>
004        </div>
005        

Content blocks

Skrollr also handles content blocks and here the content is brought into view as the scroll continues, made ‘sticky’ for a few hundred pixels before then scrolling up and off screen again. Skrollr will handle multiple animations concurrently and the range of effects achievable is virtually unlimited.

001        <div id=”properties” data-1700=”
top:100%;” data-2200=”top:0%;” 
data-2300=”display:block;” data-
2500=”top:-100%;display:none;”>
002            <h2>Total control</h2>
003            <p>Anywhere on the page</p>
004        </div>

No surprises in CSS

The CSS is all standard stuff. When using multiple layers you’ll need to use z-index to keep your layers in order – and that’s really all there is to it. However, if you want to stand out from the competition, this tool is so easy to use that you’ll need to work especially hard to create something fresh and original.

001    #intro {
002        position:fixed;
003        left:50%;
004        width:500px;
005        margin-left:-266px;
006        background: rgba(255,255,255,0.7);
007        text-align:center;
008        z-index:49;
009    }

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×