Webseite Mit Interactive Background - Pages From WbDsgnrss2572017 - AvxHome - Se-3

Mt.
Cuba Center
http://mtcubacenter.org
Designer: Drexler www.drxlr.com
Development technologies WordPress, jQuery, GSAP, Modernizr
22 ___________________________________________________________________ lightbox
This eye-catching visitor

site blends stunning natural
photography with an immersive
virtual tour
#8A74B2
#92B259
#89744C
#DF917D
Above
Above
Austin Light font, by designer Paul Barnes, provides the

classic typeface used across headings and paragraphs
Founders Grotesk, by Klims Kris Sowersby, appears across

the subsequent subheadings in both Regular and Bold
lightbox ___________________________________________________________________ 23
LightBox
Mt. Cuba Center
Create an interactive
background navigation
Offer visitors a way to access additional design content through an interactive background component
1. Page document
Create the page document using the standard HTML
framework setup. This defines the HTML document,
which contains the head and body section. The head
section is used to include descriptive information and any
resources required. In this case, the CSS stylesheet and
some JavaScript are contained in the head section. The
body is used to contain any visual content components.
<!DOCTYPE html>
<html>
<head>
<title>Background Change</title>
<link rel=stylesheet type=text/css
href=styles.css />
<script>
*** STEP 3
</script>
</head>
<body>
*** STEP 2
</body>
</html>
2. Navigation content
The background options are presented through a
navigation container holding a series of links. These links
use a # for their href attribute to avoid the browser
loading another page. The important part in these links is
the data-body-class attribute, which is used by JavaScript
in the next step to modify the document body.
<nav>
<a href=# data-bodyclass=alpha>Alpha</a>
<a href=# data-bodyclass=bravo>Bravo</a>
<a href=# data-bodyclass=charlie>Charlie</a>
</nav>
3. Body change
JavaScript is used to detect when a link with a databody-class attribute has been clicked. When this
happens, the document body is selected and has its
class attribute overwritten to be the same value as the
Maximise space
One way that this feature can be useful is in

presenting visual content without requiring the
use of extra space.
24___________________________________________________________________ lightbox
selected links data-body-class attribute value. Its

important to note that this can only work when the page
has fully loaded hence it all being contained inside the
load event of the main window.
window.addEventListener(load,function(){
var nodes = document.
querySelectorAll([data-body-class]);
for(var i=0; i<nodes.length; i++){
nodes[i].addEventListener(click,functi
on(){
document.querySelector(body).className =
this.getAttribute(data-body-class);
}
);
}
}
);
4. Initiate CSS file

The HTML and JavaScript components are now
complete, so now its time to define the visual
presentation rules. Create a new document called styles.
css and enter this steps rules to define how the
document HTML container and body should appear.
The important parts here are making sure that they
cover the full screen and also that their background
size should be set to cover, allowing the background to
be resized to fit the window.
html,body
{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: rgb(21, 34, 47);
background-size: cover;
transition: background 1s;
}
5. Navigation presentation
The navigation container is to be presented with a visible
border, while its links are to appear as buttons. This is
achieved by setting padding, margins and colours for
both the background and text colours of the links.
Displaying the links as inline-blocks helps to make sure
that the navigation container wraps around them.
nav
{
display: block;
padding: 1em;
border: 3px solid #000;
margin: 0;
}
nav a
{
display: inline-block;
padding: 1em;
margin-left: 1em;
font-size: 1.5em;
border: 3px solid #fff;
background: #333;
color: #fff;
}
6. Navigation hover
Its important to indicate to the user that the navigation
links are interactive. This can be achieved by changing
the link colours when the mouse pointer hovers over
them. CSS offers the :hover selector, allowing us to define
new presentation rules when this is the case. We invert
the colours to have a grey border, white background and
grey text.
nav a:hover
{
border-color: #333;
background: #fff;
color: #333;
}
7. Background images
The JavaScript we previously created changes the
class attribute applied to the document body. This
means we can specify unique background images
within the CSS rules. Using this approach gives us the
flexibility to add as many different background images
through HTML and CSS without the need to modify
any JavaScript.
.alpha {
background-image: url(img/background1.
jpg);
}
.bravo
{
jpg);
}
.charlie{
jpg);
}

Webseite Mit Interactive Background - Pages From WbDsgnrss2572017 - AvxHome - Se-3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Webseite Mit Interactive Background - Pages From WbDsgnrss2572017 - AvxHome - Se-3

Transféré par

Droits d'auteur :

Formats disponibles

Mt.

Development technologies WordPress, jQuery, GSAP, Modernizr

This eye-catching visitor

Austin Light font, by designer Paul Barnes, provides the

Founders Grotesk, by Klims Kris Sowersby, appears across

One way that this feature can be useful is in

selected links data-body-class attribute value. Its

4. Initiate CSS file

Vous aimerez peut-être aussi