First, we'll begin with the HTML. Here we'll build the form itself. Copy the following code and paste it in between your "body" tags in your HTML doc. Note that while we're using text fields in this particular example, this tutorial will work on buttons, textareas and dropdowns.
<div class="content"> <!-- div to hold the form -->
<!-- form -->
<form method="post" name="contact-form" id="contact-form" class="contact-form">
<!-- make sure that for and name match -->
<label for="first-name">First Name: </label>
<input id="first-name" name="first-name" type="text" required class="">
<label for="last-name">Last Name: </label>
<input id="last-name" name="last-name" type="text" required>
</form>
</div> <!-- end content -->
Step 2
{ The CSS }
Next, we'll make the forms look good with CSS. Copy the following code and paste it in your stylesheet (make sure to link your stylesheet to your HTML doc). ".current-field" is where we'll put our input field highlight styles. Note that the styles below are specific to this tutorial; if you want a different look to your form, just change up the CSS.
.content {
width: 960px;
margin: 70px auto 0; /* center the form */
}
/* form */
/* general input styles */
input {
font-family: 'Didact Gothic', sans-serif; /* change to your desired font */
color: white;
font-size: 16px;
background-color: #404040;
width: 200px;
min-height: 40px;
border: 2px solid white;
letter-spacing: 3px;
}
.contact-form {
margin: 0 117px;
}
.contact-form label {
margin-right: 20px; /* add some spacing after label name*/
}
.contact-form input {
margin-top: 10px;
margin-bottom: 30px;
padding: 10px;
}
.contact-form input:first-of-type {
margin-right: 40px; /* add some spacing after the first input box */
}
/* highlighted field will take on these styles */
.current-field {
color: #09abba;
-webkit-animation: shadow .5s linear both;
animation: shadow .5s linear both;
text-align: center;
}
/* add the drop shadow animation */
@-webkit-keyframes shadow {
0% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
50% {
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
100% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
}
@-moz-keyframes shadow {
0% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
50% {
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
100% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
}
@keyframes shadow {
0% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
50% {
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
100% {
box-shadow: 0 0 0 rgba(0,0,0,.5);
}
}
Step 3
{ The Javascript }
Finally, we'll implement the Javascript that will link the ".current-field" class to the user's selected field. To do this, we make use of jQuery's "focus" and "blur" methods. If the field is selected, we'll add on the class ".current-field". If the field becomes unselected, we'll remove the class. Note that the script can be placed right before the closing "body" tag or can be linked to an external Javascript file, similar to linking your CSS stylesheet (make sure to remove the "<script>" tags if you're linking to external scripts). Also note that you need to include jQuery library script file before you can implement any other jQuery scripts. You can use the following:
First, we'll begin with the HTML. Here, we'll load all the images that we're going to use for our day to night scrolling effect. You can download the images I used here: Stars /
Clouds /
Sun /
Moon
Now comes the tricky part. Here is where we will be placing all the images around the screen. Absolutely positioning the different image elements requires a lot of guess and check. The following code positions the elements where I liked them, but feel free to mess around with the top and left values for a different look.
To achieve the both the changing background effect and the parallax scrolling effect, we're going to implement two scripts. The first will allow us to change the background color on scroll. The second will give us the parallax effect. You can add both these scripts right before your closing "body" tag or by externally linking them (make sure to remove the "<script>" tags if you're linking to external scripts). Also note that you need to include jQuery library script file before you can implement any other jQuery scripts. You can use the following:
<script>
var scrollPosition = $(window).scrollTop();
var $body = $('body');
$(window).scroll(function(){ // Add a scroll event handler
var pos = $(window).scrollTop(); // position of top of page window
if(pos === 0){
$body.attr('class','white');
}
if(pos > 700){
$body.attr('class','blue'); // as the user scrolls down, we attach a different class to the body
}
if(pos > 8500){
$body.attr('class','purple');
}
if(pos > 13000){
$body.attr('class','black');
}
});
</script>
<script>
$(window).on('scroll', function(){ // As the user scrolls, the function inside will run
// get scrollTop position
var scrollPos = $(window).scrollTop(); // position of top of page window
$('#fg').css('top', 0 - (scrollPos * .25)) // the speed at which our foreground moves as the user scrolls
$('#mg').css('top', 0 - (scrollPos * .3)) // the speed at which our midground moves as the user scrolls
$('#bg').css('top', 0 - (scrollPos * .2)) // the speed at which our background moves as the user scrolls
});
</script>
The HTML is fairly straightfoward in this example. However, you can attach click events to anything the user can click on, including buttons or text. Here we're simply going to set up the lightbulb image and the text below it. This code will go between your "body" tags. You can download the images below: Lightbulb /
Ghost /
Background
<main>
<div class="lightbulb">
<img class="lightbulb-img" src="images/lightbulb.png" width="400" height="400" alt="Lightbulb" />
</div> <!-- end lightbulb -->
<div class="off-on">
<p>Click the lightbulb to turn the lights off</p<
</div> <!-- off-on -->
</main> <!-- end main -->
Step 2
{ The CSS }
Next, we'll add in the CSS. Here we'll add in the background image and some effects to the images. Though the ghost image isn't visible yet, it will be once we add in the script, so you'll want to style that as well. This is good practice in using CSS animations and filter effects. Feel free to mess around with the CSS to create your own look as well. Make sure to link your stylesheet to your HTML file in between your "head" tags
To add the click event and switch between the "lights on" and "lights off" screens, we'll need some Javascript. This script is a modified version of the lightbox script. Note that the script can be placed right before the closing "body" tag or can be linked to an external Javascript file, similar to linking your CSS stylesheet (make sure to remove the "<script>" tags if you're linking to external scripts). Also note that you need to include jQuery library script file before you can implement any other jQuery scripts. You can use the following:
<script>
var $light = $('.lightbulb-img');
$light.click(function(e) { // create a click event handler on our lightbulb image
e.preventDefault();
// Disable all scrollbars on the body
$('body').css('overflow-y', 'hidden')
// Dynamically create an overlay window
$('').css({
'background-color': '#000000',
'position': 'fixed',
'top': 0,
'left': 0,
'width': '100%',
'height': '100%',
'opacity': 1
}).appendTo('body');
// Create a container to contain our image
$('').hide().appendTo('body');
// Load the image into our container
$('')
// set the newly created image's src attribute to the ghost image
.attr('src', 'images/noun_3941.svg')
// load() function fires when the image has finished downloading
.load(function(){
// once the image has loaded run this code
$('.ghost').center().fadeIn();
}) // end load function
// attach a click event handler to the newly added image
.click(function(){
// remove the ghost container from the screen
$('.overlay, .ghost').fadeOut('fast', function(){
// this code will run when the ghost container has faded out
$(this).remove();
$('body').css('overflow-y', 'auto');
}) // end fadeOut function
}) // end click function
// append the image to the ghost container
.appendTo('.ghost'); // end img
}); // end click function
// Adds a center element function to jQuery
jQuery.fn.center = function () {
this.css('position', 'absolute');
this.css('top', ( $(window).height() - this.height() ) / 2 + $(window).scrollTop());
this.css('left', ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft());
return this;
};
</script>