Howdy, folks. Easter's a-coming, so get ready for the traditional
TeochewThunder Easter web tutorial!
Today's web tutorial will be center around creating a Parallax website. We'll use text content from
http://www.wikipedia.org to populate placeholders.
What is a Parallax website?
In very simple terms, a Parallax website is a site whose background changes as you scroll through it, providing a multi-dimensional effect. We did something akin to this last
Christmas!
Let's get started...
First, we get the basic HTML up. It'll consist of three main div blocks, each with a nested div containing text content.
<!DOCTYPE html>
<html>
<head>
<title>Easter 2017</title>
</head>
<body>
<div>
<div>
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead, described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus, preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
</div>
<div>
<div>
<h1>Easter Eggs</h1>
<p>
The practice of decorating eggshells as part of spring rituals is ancient, with decorated, engraved ostrich eggs found in Africa which are 60,000 years old. In the pre-dynastic period of Egypt and the early cultures of Mesopotamia and Crete, eggs were associated with death and rebirth, as well as with kingship, with decorated ostrich eggs, and representations of ostrich eggs in gold and silver, were commonly placed in graves of the ancient Sumerians and Egyptians as early as 5,000 years ago. These cultural relationships may have influenced early Christian and Islamic cultures in those areas, as well as through mercantile, religious, and political links from those areas around the Mediterranean.
</p>
<p>
The Christian custom of Easter eggs, specifically, started among the early Christians of Mesopotamia, who stained eggs with red colouring "in memory of the blood of Christ, shed at His crucifixion". The Christian Church officially adopted the custom, regarding the eggs as a symbol of the resurrection of Jesus, with the Roman Ritual, the first edition of which was published in 1610 but which has texts of much older date, containing among the Easter Blessings of Food, one for eggs, along with those for lamb, bread, and new produce. The blessing is for consumption as a food, rather than decorated.
</p>
<p>
Sociology professor Kenneth Thompson discusses the spread of the Easter egg throughout Christendom, writing that "use of eggs at Easter seems to have come from Persia into the Greek Christian Churches of Mesopotamia, thence to Russia and Siberia through the medium of Orthodox Christianity. From the Greek Church the custom was adopted by either the Roman Catholics or the Protestants and then spread through Europe." Both Thompson, as well as British orientalist Thomas Hyde state that in addition to dying the eggs red, the early Christians of Mesopotamia also stained Easter eggs green and yellow.
</p>
</div>
</div>
<div>
<div>
<p>
T___T wishes all readers a happy and promise-filled Easter!
</p>
</div>
</div>
</body>
</html>
This is what you should have now - a very bare-bones layout.
Let's start styling. Make the following changes. The
content CSS class styles the div to have ample spacing at the top and bottom. We then set all divs within elements styled using
content, to have a width of 80% of its parent and positioned in the center.
<html>
<head>
<title>Easter 2017</title>
<style>
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
.content div
{
width:80%;
margin:0 auto 0 auto;
}
</style>
</head>
<body>
<div
class="content">
<div>
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead, described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus, preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
</div>
<div
class="content">
<div>
<h1>Easter Eggs</h1>
<p>
The practice of decorating eggshells as part of spring rituals is ancient, with decorated, engraved ostrich eggs found in Africa which are 60,000 years old. In the pre-dynastic period of Egypt and the early cultures of Mesopotamia and Crete, eggs were associated with death and rebirth, as well as with kingship, with decorated ostrich eggs, and representations of ostrich eggs in gold and silver, were commonly placed in graves of the ancient Sumerians and Egyptians as early as 5,000 years ago. These cultural relationships may have influenced early Christian and Islamic cultures in those areas, as well as through mercantile, religious, and political links from those areas around the Mediterranean.
</p>
<p>
The Christian custom of Easter eggs, specifically, started among the early Christians of Mesopotamia, who stained eggs with red colouring "in memory of the blood of Christ, shed at His crucifixion". The Christian Church officially adopted the custom, regarding the eggs as a symbol of the resurrection of Jesus, with the Roman Ritual, the first edition of which was published in 1610 but which has texts of much older date, containing among the Easter Blessings of Food, one for eggs, along with those for lamb, bread, and new produce. The blessing is for consumption as a food, rather than decorated.
</p>
<p>
Sociology professor Kenneth Thompson discusses the spread of the Easter egg throughout Christendom, writing that "use of eggs at Easter seems to have come from Persia into the Greek Christian Churches of Mesopotamia, thence to Russia and Siberia through the medium of Orthodox Christianity. From the Greek Church the custom was adopted by either the Roman Catholics or the Protestants and then spread through Europe." Both Thompson, as well as British orientalist Thomas Hyde state that in addition to dying the eggs red, the early Christians of Mesopotamia also stained Easter eggs green and yellow.
</p>
</div>
</div>
<div
class="content">
<div>
<p>
T___T wishes all readers a happy and promise-filled Easter!
</p>
</div>
</div>
</body>
</html>
Looking better already.
So next, we'll add some graphics. For this example, we'll use the following two Easter-y images.
The first two divs are given ids -
home and
eastereggs. Then we add styling to give them background images, and set their heights and widths to 100%.
<html>
<head>
<title>Easter 2017</title>
<style>
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
.content div
{
width:80%;
margin:0 auto 0 auto;
}
#home
{
background:url(bg_rainbow.jpg) no-repeat center center;
height:100%;
width:100%;
background-size:cover;
}
#eastereggs
{
background:url(bg_eggs.jpg) no-repeat center center;
height:100%;
width:100%;
background-size:cover;
}
</style>
</head>
<body>
<div class="content"
id="home">
<div>
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead, described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus, preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
</div>
<div class="content"
id="eastereggs">
<div>
<h1>Easter Eggs</h1>
<p>
The practice of decorating eggshells as part of spring rituals is ancient, with decorated, engraved ostrich eggs found in Africa which are 60,000 years old. In the pre-dynastic period of Egypt and the early cultures of Mesopotamia and Crete, eggs were associated with death and rebirth, as well as with kingship, with decorated ostrich eggs, and representations of ostrich eggs in gold and silver, were commonly placed in graves of the ancient Sumerians and Egyptians as early as 5,000 years ago. These cultural relationships may have influenced early Christian and Islamic cultures in those areas, as well as through mercantile, religious, and political links from those areas around the Mediterranean.
</p>
<p>
The Christian custom of Easter eggs, specifically, started among the early Christians of Mesopotamia, who stained eggs with red colouring "in memory of the blood of Christ, shed at His crucifixion". The Christian Church officially adopted the custom, regarding the eggs as a symbol of the resurrection of Jesus, with the Roman Ritual, the first edition of which was published in 1610 but which has texts of much older date, containing among the Easter Blessings of Food, one for eggs, along with those for lamb, bread, and new produce. The blessing is for consumption as a food, rather than decorated.
</p>
<p>
Sociology professor Kenneth Thompson discusses the spread of the Easter egg throughout Christendom, writing that "use of eggs at Easter seems to have come from Persia into the Greek Christian Churches of Mesopotamia, thence to Russia and Siberia through the medium of Orthodox Christianity. From the Greek Church the custom was adopted by either the Roman Catholics or the Protestants and then spread through Europe." Both Thompson, as well as British orientalist Thomas Hyde state that in addition to dying the eggs red, the early Christians of Mesopotamia also stained Easter eggs green and yellow.
</p>
</div>
</div>
<div class="content">
<div>
<p>
T___T wishes all readers a happy and promise-filled Easter!
</p>
</div>
</div>
</body>
</html>
Still a little (OK, a
lot) ugly at this point. Let's remove the top margins.
Add this to the CSS. This ensures that the html and body tags don't have any extra spaces at the tops and sides. At the same time, we'll just set the default font to Verdana and the default background color to a lovely
yellow.
html,body
{
margin:0;
padding:0;
}
body
{
background-color:#FFFF00;
font-family:verdana;
}
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
Now we're getting somewhere.
See how the footer changes color? That's because we never specified a background for it.
You'll notice that the text content clashes with the pictorial backgrounds. Let's fix that. We set the nested divs in the divs with pictorial backgrounds, to the class of
highlighted. Then we create a CSS class
highlighted, to have round borders and a translucent
white background. And a bit of padding.
<html>
<head>
<title>Easter 2017</title>
<style>
html,body
{
margin:0;
padding:0;
}
body
{
background-color:#FFFF00;
font-family:verdana;
}
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
.content div
{
width:80%;
margin:0 auto 0 auto;
}
.highlighted
{
border-radius:1em;
padding:2em;
background-color:rgba(200,200,200,0.8);
}
#home
{
background:url(bg_rainbow.jpg) no-repeat center center;
height:100%;
width:100%;
background-size:cover;
}
#traditions
{
background:url(bg_eggs.jpg) no-repeat center center;
height:100%;
width:100%;
background-size:cover;
}
</style>
</head>
<body>
<div class="content" id="home">
<div
class="highlighted">
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead, described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus, preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
</div>
<div class="content" id="eastereggs">
<div
class="highlighted">
<h1>Easter Eggs</h1>
<p>
The practice of decorating eggshells as part of spring rituals is ancient, with decorated, engraved ostrich eggs found in Africa which are 60,000 years old. In the pre-dynastic period of Egypt and the early cultures of Mesopotamia and Crete, eggs were associated with death and rebirth, as well as with kingship, with decorated ostrich eggs, and representations of ostrich eggs in gold and silver, were commonly placed in graves of the ancient Sumerians and Egyptians as early as 5,000 years ago. These cultural relationships may have influenced early Christian and Islamic cultures in those areas, as well as through mercantile, religious, and political links from those areas around the Mediterranean.
</p>
<p>
The Christian custom of Easter eggs, specifically, started among the early Christians of Mesopotamia, who stained eggs with red colouring "in memory of the blood of Christ, shed at His crucifixion". The Christian Church officially adopted the custom, regarding the eggs as a symbol of the resurrection of Jesus, with the Roman Ritual, the first edition of which was published in 1610 but which has texts of much older date, containing among the Easter Blessings of Food, one for eggs, along with those for lamb, bread, and new produce. The blessing is for consumption as a food, rather than decorated.
</p>
<p>
Sociology professor Kenneth Thompson discusses the spread of the Easter egg throughout Christendom, writing that "use of eggs at Easter seems to have come from Persia into the Greek Christian Churches of Mesopotamia, thence to Russia and Siberia through the medium of Orthodox Christianity. From the Greek Church the custom was adopted by either the Roman Catholics or the Protestants and then spread through Europe." Both Thompson, as well as British orientalist Thomas Hyde state that in addition to dying the eggs red, the early Christians of Mesopotamia also stained Easter eggs green and yellow.
</p>
</div>
</div>
<div class="content">
<div>
<p>
T___T wishes all readers a happy and promise-filled Easter!
</p>
</div>
</div>
</body>
</html>
Better.
Way better.
Now you'll realize by now we haven't started making this site Parallax yet. The background scrolls as per normal and it's a bit boring. Change your CSS slightly. Rerun the code. See the difference?
html,body
{
height:100%;
width:100%;
margin:0;
padding:0;
}
body
{
background-color:#FFFF00;
font-family:verdana;
}
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
.content div
{
width:80%;
margin:0 auto 0 auto;
}
.highlighted
{
border-radius:1em;
padding:2em;
background-color:rgba(200,200,200,0.8);
}
#home
{
background:url(bg_rainbow.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
#eastereggs
{
background:url(bg_eggs.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
Now that html and body tags have been set to 100% height, any div with height set to 100% will fill the entire screen. And since your
background properties were set to
fixed it creates a very nice scrolling effect!
Let's add a nav bar to the page.
<body>
<div id="nav">
<a href="#home">Home</a> |
<a href="#eastereggs">Easter Eggs</a>
</div>
<div class="content" id="home">
The links should direct you to whatever section they indicate. But it's pretty ugly right now...
Style the nav bar. The styling for the links is purely cosmetic. It's the CSS for the
navbar div itself that bear watching. The
position and
z-index properties keep it floating in front and at the top, while the translucent
black background and
white text ensures that the text is legible.
.highlighted
{
border-radius:1em;
padding:2em;
background-color:rgba(200,200,200,0.8);
}
#nav
{
background-color:rgba(0,0,0,0.8);
height:auto;
width:100%;
position:fixed;
color:#FFFFFF;
z-index:100;
text-align:center;
}
#nav a{color:#FFFFFF;text-decoration:none}
#home
{
background:url(bg_rainbow.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
Now, no matter where you scroll, the nav bar follows! Sweet, eh?
Let's implement a special effect!
Add another div between the
home and
eastereggs divs. Let's give it an id of
about. Don't forget to add that to the nav bar!
<div id="nav">
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#eastereggs">Easter Eggs</a>
</div>
<div class="content" id="home">
<div class="highlighted">
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead, described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus, preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
</div>
<div class="content" id="about">
<div>
</div>
</div>
<div class="content" id="eastereggs">
<div class="highlighted">
<h1>Easter Eggs</h1>
<p>
The practice of decorating eggshells as part of spring rituals is ancient, with decorated, engraved ostrich eggs found in Africa which are 60,000 years old. In the pre-dynastic period of Egypt and the early cultures of Mesopotamia and Crete, eggs were associated with death and rebirth, as well as with kingship, with decorated ostrich eggs, and representations of ostrich eggs in gold and silver, were commonly placed in graves of the ancient Sumerians and Egyptians as early as 5,000 years ago. These cultural relationships may have influenced early Christian and Islamic cultures in those areas, as well as through mercantile, religious, and political links from those areas around the Mediterranean.
</p>
<p>
The Christian custom of Easter eggs, specifically, started among the early Christians of Mesopotamia, who stained eggs with red colouring "in memory of the blood of Christ, shed at His crucifixion". The Christian Church officially adopted the custom, regarding the eggs as a symbol of the resurrection of Jesus, with the Roman Ritual, the first edition of which was published in 1610 but which has texts of much older date, containing among the Easter Blessings of Food, one for eggs, along with those for lamb, bread, and new produce. The blessing is for consumption as a food, rather than decorated.
</p>
<p>
Sociology professor Kenneth Thompson discusses the spread of the Easter egg throughout Christendom, writing that "use of eggs at Easter seems to have come from Persia into the Greek Christian Churches of Mesopotamia, thence to Russia and Siberia through the medium of Orthodox Christianity. From the Greek Church the custom was adopted by either the Roman Catholics or the Protestants and then spread through Europe." Both Thompson, as well as British orientalist Thomas Hyde state that in addition to dying the eggs red, the early Christians of Mesopotamia also stained Easter eggs green and yellow.
</p>
</div>
</div>
It'll appear
yellow because we didn't specify a background. But that's OK, we don't intend to. However, we need to set the
overflow property to
hidden. I'll explain why soon.
Here's the styling.
#home
{
background:url(bg_rainbow.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
#about
{
overflow:hidden;
}
Now, we're going to add some content. This time, there'll be two different nested divs within the div, both styled using
highlighted and styled using
left and
right respectively. They also have ids of
about_left and
about_right respectively.
<div class="content" id="about">
<div>
<div class="highlighted left" id="about_left">
<h2>Western</h2>
<p>
In Western Christianity, Easter is preceded by Lent, a period of fasting and penitence in preparation for Easter, which begins on Ash Wednesday and lasts forty days (not counting Sundays). The week before Easter, known as Holy Week, is very special in the Christian tradition. The Sunday before Easter is Palm Sunday, with the Wednesday before Easter being known as Spy Wednesday. The last three days before Easter are Maundy Thursday, Good Friday and Holy Saturday (sometimes referred to as Silent Saturday).
</p>
</div>
<div class="highlighted right" id="about_right">
<h2>Eastern</h2>
<p>
In Eastern Christianity, the spiritual preparation for Easter begins with Great Lent, which starts on Clean Monday and lasts for 40 continuous days (including Sundays). The last week of Great Lent (following the fifth Sunday of Great Lent) is called Palm Week, and ends with Lazarus Saturday. The Vespers which begins Lazarus Saturday officially brings Great Lent to a close, although the fast continues through the following week. After Lazarus Saturday comes Palm Sunday, Holy Week, and finally Easter itself, and the fast is broken immediately after the Paschal Divine Liturgy.
</p>
</div>
</div>
</div>
This is what it looks like now.
Style the divs. We'll use the
float properties to ensure that they align correctly. The
margin properties are set here because we'll be altering them via JavaScript later. The
transition property is set as well because we're planning for some animation.
#about
{
overflow:hidden;
}
.left,.right
{
width:35%;
position:relative;
transition:all 1s;
}
.left
{
float:left;
margin-left:0%;
}
.right
{
float:right;
margin-right:0%;
}
Uh oh, what happened here?
This is because all div elements within the CSS class
content are styled a certain way. Let's create an exception using the not pseudoselector.
.content div:not(.left):not(.right)
{
width:80%;
margin:0 auto 0 auto;
}
There you go!
Now make this change to your HTML. We'll set up the
scrolling() function soon.
<body onscroll="scrolling();">
Now for some JavaScript. The
scrolling() function first runs the
isScrolledTo() function.
<style>
html,body
{
height:100%;
width:100%;
margin:0;
padding:0;
}
body
{
background-color:#FFFF00;
font-family:verdana;
}
.content
{
z-index:10;
padding-top:2em;
padding-bottom:2em;
}
.content div:not(.left):not(.right)
{
width:80%;
margin:0 auto 0 auto;
}
.highlighted
{
border-radius:1em;
padding:2em;
background-color:rgba(200,200,200,0.8);
}
#nav
{
background-color:rgba(0,0,0,0.8);
height:auto;
width:100%;
position:fixed;
color:#FFFFFF;
z-index:100;
text-align:center;
}
#nav a{color:#FFFFFF;text-decoration:none}
#home
{
background:url(bg_rainbow.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
#about
{
overflow:hidden;
}
.left,.right
{
width:35%;
position:relative;
transition:all 1s;
}
.left
{
float:left;
margin-left:0%;
}
.right
{
float:right;
margin-right:0%;
}
#eastereggs
{
background:url(bg_eggs.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
</style>
<script>
function scrolling()
{
if (isScrolledTo("about"))
{
}
else
{
}
}
function isScrolledTo(elementid)
{
}
</script>
isScrolledTo() takes in a string parameter. In this case, the id of the element, which is
about, is passed in as an argument. It checks the number of pixels the window is scrolled by, and subtracts that from the number of pixels that the
about div is from the top of the document. If the result is less than 0, that means you have scrolled to that element.
function isScrolledTo(elementid)
{
return (document.body.scrollTop-document.getElementById(elementid).getBoundingClientRect().top)>0;
}
So if you've scrolled to that
about div, set the
margin properties of the
about_left and
about_right divs. If not, set them to appear outside of the screen's boundaries.
function scrolling()
{
if (isScrolledTo("about"))
{
document.getElementById("about_left").style.marginLeft="0%";
document.getElementById("about_right").style.marginRight="0%";
}
else
{
document.getElementById("about_left").style.marginLeft="-100%";
document.getElementById("about_right").style.marginRight="-100%";
}
}
function isScrolledTo(elementid)
{
return (document.body.scrollTop-document.getElementById(elementid).getBoundingClientRect().top)>0;
}
Now alter the CSS.
.left
{
float:left;
margin-left:-100%;
}
.right
{
float:right;
margin-right:-100%;
}
Presto! They're gone! That's because for the about div,
overflow is set to
hidden, and with their margins set to be outside of the parent div, that renders them effectively invisible.
Scroll to the
about div. And they appear back in! That's one of the things about Parallax design - the content is supposed to change as you scroll.
Let's implement another special effect!
Create the basket div inside the home div. Put in some content.
<div class="content" id="home">
<div class="highlighted">
<h1>Easter</h1>
<p>
Easter, also called Pascha (Greek/Latin) or Resurrection Sunday, is a festival and holiday celebrating the resurrection of Jesus from the dead,
described in the New Testament as having occurred on the third day of his burial after his crucifixion by the Romans at Calvary c. 30 AD. It is the culmination of the Passion of Jesus,
preceded by Lent (or Great Lent), a forty-day period of fasting, prayer, and penance.
</p>
<p>
Most Christians refer to the week before Easter as "Holy Week" - it contains the days of the Easter Triduum, including Maundy Thursday, commemorating the Maundy and Last Supper, as well as Good Friday, commemorating the crucifixion and death of Jesus. In Western Christianity, Eastertide, or the Easter Season, begins on Easter Sunday and lasts seven weeks, ending with the coming of the fiftieth day, Pentecost Sunday. In Eastern Christianity, the season of Pascha begins on Pascha and ends with the coming of the fortieth day, the Feast of the Ascension.
</p>
<p>
Easter and the holidays that are related to it are moveable feasts which do not fall on a fixed date in the Gregorian or Julian calendars which follow only the cycle of the sun; rather, its date is determined on a lunisolar calendar similar to the Hebrew calendar. The First Council of Nicaea (325) established two rules, independence of the Jewish calendar and worldwide uniformity, which were the only rules for Easter explicitly laid down by the council. No details for the computation were specified; these were worked out in practice, a process that took centuries and generated a number of controversies. It has come to be the first Sunday after the ecclesiastical full moon that occurs on or soonest after 21 March, but calculations vary.
</p>
</div>
<div id="basket">
<div>
<h2>The Easter Bunny</h2>
<p>
The Easter Bunny is a folkloric figure and symbol of Easter, depicted as a rabbit bringing Easter eggs.
</p>
</div>
</div>
</div>
As expected...
Now style the div.
#eastereggs
{
background:url(bg_eggs.jpg) no-repeat center center fixed;
height:100%;
width:100%;
background-size:cover;
}
#basket
{
height:200px;
width:100%;
}
#basket div
{
width:70%;
padding:1em;
float:right;
}
The width is set to 70% and floated right. We're leaving that space for something.
Now let's use a cute bunny image with a transparent background.
Style the
basket div like so.
#basket
{
background:url(bg_basket.png) no-repeat;
background-position:right bottom;
height:200px;
width:100%;
background-size:contain;
z-index:50;
position:absolute;
bottom:0;
margin-bottom:-6em;
transition:all 1s;
}
#basket div
{
width:70%;
padding:1em;
float:right;
}
The div's
background-position property is set to the right. The
background-size is set to
contain so that you'll see the image fill the height. The
position and
bottom properties are set so that the div is stuck at the bottom of the
home div. The
transition property, again, is used to plan for some animation. And the
margin-bottom property is set so that it'll appear to overlap the
about div.
Now alter the CSS so that the text is totally transparent.
#basket
{
background:url(https://2.bp.blogspot.com/-
MUSzI9EHNp8/WNaTviuixrI/AAAAAAAACDM/6Ees3nwsExY2aARdqAQCVHhJzOS7Xah_wCLcB/s1600/easter2017_04.png) no-repeat;
background-position:right bottom;
height:200px;
width:100%;
background-size:contain;
z-index:50;
position:absolute;
bottom:0;
margin-bottom:-6em;
color:rgba(0,0,0,0);
transition:all 1s;
}
So far so good...
Add to the
scrolling() function. We'll use the
isScrolledTo() function to see if the
basket div has been scrolled to.
if (isScrolledTo("basket"))
{
}
else
{
}
if (isScrolledTo("move_in"))
{
document.getElementById("about_left").style.marginLeft="0%";
document.getElementById("about_right").style.marginRight="0%";
}
else
{
document.getElementById("about_left").style.marginLeft="-100%";
document.getElementById("about_right").style.marginRight="-100%";
}
And if it has, set the text to 100% transparency... (and if not, set it to 0%)
if (isScrolledTo("basket"))
{
document.getElementById("basket").style.color="rgba(0,0,0,1)";
}
else
{
document.getElementById("basket").style.color="rgba(0,0,0,0)";
}
And shift the background of the
basket div to the far left! (far
right if not)
if (isScrolledTo("basket"))
{
document.getElementById("basket").style.backgroundPosition="left bottom";
document.getElementById("basket").style.color="rgba(0,0,0,1)";
}
else
{
document.getElementById("basket").style.backgroundPosition="right bottom";
document.getElementById("basket").style.color="rgba(0,0,0,0)";
}
Scroll to the bunny, and the bunny moves left and the text appears!
Now for the final special effect!
We'll be using the following images, again with transparent backgrounds.
Alter your HTML with the addition of four div elements. Each of these will use the styling
jumper, and have its own unique id.
<div id="basket">
<div>
<h2>The Easter Bunny</h2>
<p>
The Easter Bunny is a folkloric figure and symbol of Easter, depicted as a rabbit bringing Easter eggs.
</p>
</div>
</div>
</div>
<div class="jumper" id="jumper0">
</div>
<div class="jumper" id="jumper1">
</div>
<div class="jumper" id="jumper2">
</div>
<div class="jumper" id="jumper3">
</div>
Style these divs. Each div will have the
position property set to
fixed, with
z-index of 20 to make them float on top of the screen content. Many
background properties will be the same as well. However, the
top,
left,
width,
height,
z-index and
transition properties will vary.
#basket div
{
width:70%;
padding:1em;
float:right;
}
.jumper
{
position:fixed;
z-index:20;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}
#jumper0
{
background-image:url(00.png);
left:80%;
top:5%;
transition:all 1s;
width:80px;
height:120px;
}
#jumper1
{
background-image:url(01.png);
left:70%;
top:5%;
transition:all 2.5s;
width:150px;
height:150px;
}
#jumper2
{
background-image:url(02.png);
left:80%;
top:5%;
transition:all 3s;
width:150px;
height:250px;
}
#jumper3
{
background-image:url(03.png);
left:75%;
top:5%;
transition:all 1.5s;
width:160px;
height:300px;
}
Ta-da...
Of course, we want the jumpers to be out of sight, so adjust the
top properties...
#jumper0
{
background-image:url(00.png);
left:80%;
top:200%;
transition:all 1s;
width:80px;
height:120px;
}
#jumper1
{
background-image:url(01.png);
left:70%;
top:200%;
transition:all 2.5s;
width:150px;
height:150px;
}
#jumper2
{
background-image:url(02.png);
left:80%;
top:200%;
transition:all 3s;
width:150px;
height:250px;
}
#jumper3
{
background-image:url(03.png);
left:75%;
top:200%;
transition:all 1.5s;
width:160px;
height:300px;
}
Now go on to your JavaScript and update the
scrolling() function with a
For loop that iterates through each element styled by the
jumper CSS class.
function scrolling()
{
var jumper=document.getElementsByClassName("jumper");
var scollPercentage = (document.body.scrollTop/window.innerHeight)*100;
var jumperTop;
var inc;
for (var i=0;i<jumper.length;i++)
{
}
if (isScrolledTo("basket"))
{
document.getElementById("basket").style.backgroundPosition="left bottom";
document.getElementById("basket").style.color="rgba(0,0,0,1)";
}
else
{
document.getElementById("basket").style.backgroundPosition="right bottom";
document.getElementById("basket").style.color="rgba(0,0,0,0)";
}
if (isScrolledTo("move_in"))
{
document.getElementById("about_left").style.marginLeft="0%";
document.getElementById("about_right").style.marginRight="0%";
}
else
{
document.getElementById("about_left").style.marginLeft="-100%";
document.getElementById("about_right").style.marginRight="-100%";
}
}
Use JavaScript to update the
top property of these divs relative to the scrolling position.
var jumper=document.getElementsByClassName("jumper");
var scollPercentage = (document.body.scrollTop/window.innerHeight)*100;
var jumperTop;
var inc;
for (var i=0;i<jumper.length;i++)
{
jumperTop=jumper[i].style.top.replace("%","");
inc=50-scollPercentage;
jumper[i].style.top=(0+inc)+"%";
}
Now when you scroll, the jumpers jump! Since we set the transition property of each div differently, they'll jump at different speeds. Well, OK...
soar, more like.
Conclusion
This concludes the Easter web tutorial. Hope you had fun.
Happy Easter! Let the good times (sc)roll!
T___T
