Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server by sargoon

View this thread on steempeak.com
utopian-io · @sargoon · (edited)
$89.82
Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server
#### Welcome to the sixth Video Tutorial of the Materialize CSS! This tutorial video about "Creating Parallax Website using Materialize CSS Library and jQuery JavaScript Library with XAMPP Localhost Server From Scratch" I hope you enjoy this tutorial video!

![](http://i63.tinypic.com/jt49p4.jpg)

#### What Will I Learn?

- You will learn how to create **Parallax Website** using with **Materialize CSS (full package)**, **jQuery Javascript Ajax Library,** **Materialize CSS Minified Library** and **jQuery 3.3.1 (minified)** from **scratch**.
- You will learn a few **special codes** and **division classes** about creating **Parallax Website**.
- You will learn how to create **Parallax Website** with **NavBar** codes for **Parallax Website** without using **Bootstrap CDN**.
- You will learn how to create **Parallax Website** **in the same line** with **Navigation Menu Bar (NavBar)**.



#### Requirements

- Materialize Full Package 1.0.0-beta version (CSS and JS [minified and unminified]).
- Materialize JavaScript Ajax Library (1.0.0-beta version).
- Microsoft Visual Studio Code. (or another text editor).
- jQuery 3.3.1 Compressed (minified version).
- jQuery Ajax Library (with CDNjs).
- A Standard Computer.
- A Standard Browser.
- XAMPP Control Panel Server.
- A few images.

#### Difficulty

- Intermediate

#### Description
Hello everyone, welcome to the sixth episode of the **Materialize CSS** Education Series. In this tutorial video I showed you how to create **Parallax Website** with using **Materialize CSS Full Package**, **jQuery JavaScript Ajax Library**, **Materialize Minified CSS Library** and **Materialize Minified JavaScript Library**. Also I used **XAMPP Control Panel Server** in this video for work with a **localhost server**. I showed and I explained you how to define **parallax-container** with using ```div``` command. And also I explained you how to and why we use ```parallax```, ```parallax-container```, **Materialize Ajax CSS (full package)**, **jQuery 3.3.1 Minified Library**, **Materialize Minified CSS**, **Materialize JS Ajax Library** for example; **"row container"**, ```parallax```, **"parallax section"**, **"section"**, **"header"** and more for creating **Parallax Website** with using ```$('.parallax').parallax();``` script (jQuery). Also I explained in detail all the commands used when creating **Parallax Website**. In this tutorial video, we used **Materialize package** instead of **CDN Bootstrap**.
Also I gave technical information about codes, classes, script, about **Materialize** and **jQuery** libraries and all operations. Our Materialize education series will progress from basic - intermediate to advanced. All the programs described in the video **Materialize Full CSS Package** (1.0.0-beta version), **Visual Studio Code**, **Materialize Minified JavaScript Library**, **jQuery 3.3.1 Minified Library**,**XAMPP Control Panel Server**, **jQuery Ajax JS Minified Library**) are open source and are all included in the links section of the **GitHub** repositories (Except XAMPP Control Panel Server). If you wish, you can access the web pages of these programs and download links for Windows from the links section.

#### Some Additional Steps About Paralllax Website Tutorial


#### STEP 1:

![](http://i63.tinypic.com/2vxogo3.png)

Firstly we entered the addresses of the **libraries** we need between the ```head```commands. **Materialize Full Package CSS**, **Materialize Minified CSS**, **jQuery JS Ajax libraries**, **jQuery 3.3.1 Minified**, **Materialize Minified JavaScript** and **Materialize Icons Family (via Google Fonts)** used in this video.

#### STEP 2:

![](http://i66.tinypic.com/15hlunr.png)

In this section, we entered **navigation menu** for a look better. We took advantage the past video tutorial (Navigation Menu Bar [**NavBar**]). We used of these codes but it is not very important.

#### STEP 3:

![](http://i64.tinypic.com/29ophqu.png)


First of all, we defined the ```div class``` as **parallax-container**, this means, the images defined for **parallax** will appear in **full screen**.On the bottom line we defined another division class for first **parallax** image with ```<div class="parallax"><img src="images/utopian1.png"></div>```this command.
In this step, we entered ```div class``` as **section** this means, **section div class** allows us area for **Parallax Images**. And then we defined the **color** of **Parallax First Images** text area with ```div class``` as **section black** . On the bottom line we wrote a header for our first text under the parallax image with ```h1 class```, we used **h1 class** because we want **header** to appear as **blue**. Lastly we defined ```p class``` for our text under the header. We defined **p class** as ```white-text``` because we want our text to appear as **white** and we wrote our text as **Utopian io for project owners!**
We followed the same ways for other **headers** and **texts**.


#### STEP 4:

![](http://i68.tinypic.com/9i46jd.png)

This step about **writing parallax script**, we started with ```$(document).ready(function(){``` command as usual and we used ```$('.parallax').parallax();``` **script function to run parallax properly** and we wrote this script to **scrolling the images while scrolling the mouse manually**.


#### Codes Used in This Video

``` <!DOCTYPE html>
  

<head>
                
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </head>

  <nav>

      <div class="nav-wrapper grey">
          <a href="https://utopian.io" class="brand-logo">
          <object id="logo" type="image" data="images/utopianlogo.png"></object></a>


  </nav>

  <div class="parallax-container">
    <div class="parallax"><img src="images/utopian1.png"></div>
  </div>

  <div class="section black">
    <div class="row container">
      <h1 class="header blue-text"> Open Source Economy </h1>
      <p class="white-text"> Utopian.io for project owners! </p></div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="images/utopian2.png"></div>
  </div>
  <div class="section black">
    <div class="row container">
      <h1 class="header blue-text"> Categories </h1>
      <p class="white-text"> Utopian.io has 12 categories! </p></div>
  </div>

  <div class="parallax-container">
    <div class="parallax"><img src="images/utopian3.png"></div>
  </div>

  <div class="section black">
    <div class="row container">
      <h1 class="header blue-text"> About Payments! </h1>
      <p class="white-text"> Utopian.io pays for open source contributions! </p></div>
  </div>
  <script>
  $(document).ready(function(){
    $('.parallax').parallax();
  });



  </script>

```

#### My Operating System

![](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5dtpz2pJV8RJE35cmaTM5CCtqMFTjL_1680x8400)

#### Video Tutorial

https://youtu.be/rEEcH-b3aWw


#### Links

- [Materialize Github Repo](https://github.com/Dogfalo/materialize)
- [Materialize Web Site](http://materializecss.com/)
- [Materialize Package Download for Windows](https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip)
- [Materialize Minified Ajax CSS Library ](https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css)
- [Materialize Minified Ajax JavaScript Library](https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js)
- [jQuery GitHub Repo](https://github.com/jquery/jquery)
- [jQuery Minified Ajax Library (version 3.3.1)](https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
- [Visual Studio Code (VSCode) GitHub Repo](https://github.com/Microsoft/vscode)
- [Visual Studio Code Web Site](https://code.visualstudio.com/)
- [Visual Studio Code Download Link for Win x64](https://go.microsoft.com/fwlink/?Linkid=852157)
- [XAMPP Server Web Site](https://www.apachefriends.org/en/)
- [XAMPP Server(For Windows) Download Link](https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe)

#### Curriculum
You can follow the other parts of the materialize education series here! :)

- [PART 1: Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn)
- [PART 2: Materialize Education Series Part #2: How to Create a Full Screen Image Slider Using Carousel with XAMPP Localhost Server From Scratch](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-2-how-to-create-a-full-screen-image-slider-using-carousel-with-xampp-localhost-server-from)
- [PART 3: Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp)
- [PART 4: Materialize Education Series Part #4: How to Create Top Navigation Menu (Navbar) using Materialize CSS with XAMPP Localhost Server](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-4-how-to-create-top-navigation-menu-navbar-using-materialize-css-with-xampp-localhost-server)
- [PART 5: Materialize Education Series Part #5: How to Create a Scrollspy Menu using Materialize CSS and jQuery Library with using XAMPP Localhost Server](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-5-how-to-create-a-scrollspy-menu-using-materialize-css-and-jquery-library-with-using-xampp)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-6-how-to-create-parallax-scrolling-image-website-using-materialize-css-and-jquery-library-with">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 167 others
properties (23)
post_id45,587,632
authorsargoon
permlinkmaterialize-education-series-part-6-how-to-create-parallax-scrolling-image-website-using-materialize-css-and-jquery-library-with
categoryutopian-io
json_metadata"{"staff_pick": null, "platform": "github", "config": {"questions": [{"question": "How many substantial concepts does this tutorial address?", "answers": [{"answer": "4-5 substantial concepts covered in the tutorial.", "value": 10, "answer_id": "vtuts-1-a-1"}, {"answer": "2-3 substantial concepts covered in the tutorial.", "value": 7, "answer_id": "vtuts-1-a-2"}, {"answer": "1 substantial concept covered in the tutorial.", "value": 2, "answer_id": "vtuts-1-a-3"}, {"answer": "More than 5 substantial concepts covered in the tutorial.", "value": 0, "answer_id": "vtuts-1-a-4"}], "question_id": "vtuts-1"}, {"question": "How informative is the content included alongside the video?", "answers": [{"answer": "Exceptionally good text and, when applicable, images for concepts covered.", "value": 20, "answer_id": "vtuts-2-a-1"}, {"answer": "Thorough text and, if applicable, images for concepts covered.", "value": 18, "answer_id": "vtuts-2-a-2"}, {"answer": "Minimal text and images.", "value": 10, "answer_id": "vtuts-2-a-3"}, {"answer": "No or very little text and images.", "value": 0, "answer_id": "vtuts-2-a-4"}], "question_id": "vtuts-2"}, {"question": "Is the video clearly prepared and structured?", "answers": [{"answer": "Both the presenter and the video are exceptionally organized, structured and presented", "value": 20, "answer_id": "vtuts-3-a-1"}, {"answer": "Presenter is prepared and video concepts are structured.", "value": 16, "answer_id": "vtuts-3-a-2"}, {"answer": "Presenter has moments when he/she seems unprepared and/or the content seems to be unstructured.", "value": 8, "answer_id": "vtuts-3-a-3"}, {"answer": "Presenter seems unprepared and/or video is unstructured.", "value": 0, "answer_id": "vtuts-3-a-4"}], "question_id": "vtuts-3"}, {"question": "Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?", "answers": [{"answer": "Contributor provided exceptional supplementary resources.", "value": 5, "answer_id": "vtuts-4-a-1"}, {"answer": "Contributor provided good supplementary resources.", "value": 4, "answer_id": "vtuts-4-a-2"}, {"answer": "Contributor provided minimal supplementary resources.", "value": 1.5, "answer_id": "vtuts-4-a-3"}, {"answer": "No supplementary resources were provided.", "value": 0, "answer_id": "vtuts-4-a-4"}], "question_id": "vtuts-4"}, {"question": "How would you describe the sound quality of the video?", "answers": [{"answer": "Sound quality is excellent and sounds professionally produced.", "value": 10, "answer_id": "vtuts-5-a-1"}, {"answer": "The sound is clear and understandable with complimenting background music / sounds.", "value": 8, "answer_id": "vtuts-5-a-2"}, {"answer": "Low quality of sound and/or mildly distracting background noise.", "value": 3, "answer_id": "vtuts-5-a-3"}, {"answer": "Distracting background noise and/or very low quality recording.", "value": 0, "answer_id": "vtuts-5-a-4"}], "question_id": "vtuts-5"}, {"question": "Does the presenter speak clearly and is easy to understand?", "answers": [{"answer": "Yes, presenter\u2019s speech is highly engaging and professional.", "value": 10, "answer_id": "vtuts-6-a-1"}, {"answer": "Yes, the voice-over is easy to understand.", "value": 8, "answer_id": "vtuts-6-a-2"}, {"answer": "Only some of the voice-over was comprehensible.", "value": 4, "answer_id": "vtuts-6-a-3"}, {"answer": "The voice-over was impossible to understand / not included at all.", "value": 0, "answer_id": "vtuts-6-a-4"}], "question_id": "vtuts-6"}, {"question": "Are the title of the tutorial and the concepts being covered present on the video in text overlay form?", "answers": [{"answer": "Title and concepts covered are present in the video at all times in a non-disruptive way.", "value": 5, "answer_id": "vtuts-7-a-1"}, {"answer": "Title and concepts covered appear temporarily when they are addressed.", "value": 4.5, "answer_id": "vtuts-7-a-2"}, {"answer": "Only the title is presented and the concepts shown are not addressed in overlay text.", "value": 2, "answer_id": "vtuts-7-a-3"}, {"answer": "Neither title nor concepts covered are presented in the video text overlay.", "value": 0, "answer_id": "vtuts-7-a-4"}], "question_id": "vtuts-7"}, {"question": "How would you describe the formatting, language and overall presentation of the post?", "answers": [{"answer": "The quality of the post is fantastic.", "value": 10, "answer_id": "c-1-a-1"}, {"answer": "The post is of very good quality.", "value": 7, "answer_id": "c-1-a-2"}, {"answer": "The post is poorly written and/or formatted, but readable.", "value": 3, "answer_id": "c-1-a-3"}, {"answer": "The post is really hard to read and the content is barely understandable.", "value": 0, "answer_id": "c-1-a-4"}], "question_id": "c-1"}, {"question": "How would you rate the overall value of this contribution on the open source community and ecosystem?", "answers": [{"answer": "This contribution brings great and impactful value, and can be used for applications outside the specific project.", "value": 20, "answer_id": "c-2-a-1"}, {"answer": "This contribution adds significant value to the open source community and ecosystem, or is of critical importance to the specific project.", "value": 18, "answer_id": "c-2-a-2"}, {"answer": "This contribution adds some value to the open source community and ecosystem or is only valuable to the specific project.", "value": 11, "answer_id": "c-2-a-3"}, {"answer": "This contribution adds no value to the open source community and ecosystem or the specific project.", "value": 0, "answer_id": "c-2-a-4"}], "question_id": "c-2"}]}, "pullRequests": [], "users": ["sargoon"], "questions": null, "app": "utopian/1.0.0", "score": null, "type": "video-tutorials", "links": ["https://github.com/Dogfalo/materialize", "http://materializecss.com/", "https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js", "https://github.com/jquery/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js", "https://github.com/Microsoft/vscode", "https://code.visualstudio.com/", "https://go.microsoft.com/fwlink/?Linkid=852157", "https://www.apachefriends.org/en/", "https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe", "https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn", "https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-2-how-to-create-a-full-screen-image-slider-using-carousel-with-xampp-localhost-server-from", "https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp", "https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-4-how-to-create-top-navigation-menu-navbar-using-materialize-css-with-xampp-localhost-server", "https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-5-how-to-create-a-scrollspy-menu-using-materialize-css-and-jquery-library-with-using-xampp"], "moderator": {"time": "2018-04-27T03:42:55.391Z", "pending": false, "reviewed": true, "flagged": false, "account": "rosatravels"}, "community": "utopian", "tags": ["utopian-io", "en", "video-tutorials", "css", "materialize"], "total_influence": null, "repository": {"full_name": "Dogfalo/materialize", "owner": {"login": "Dogfalo"}, "id": 23974149, "fork": false, "html_url": "https://github.com/Dogfalo/materialize", "name": "materialize"}, "format": "markdown"}"
created2018-04-26 22:45:15
last_update2018-04-27 03:42:54
depth0
children3
net_rshares16,164,409,821,934
last_payout2018-05-03 22:45:15
cashout_time1969-12-31 23:59:59
total_payout_value65.388 SBD
curator_payout_value24.429 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length10,388
author_reputation59,035,209,817,935
root_title"Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server"
beneficiaries
0.
weight1,500
accountutopian.pay
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (231)
@rosatravels ·
$0.73
Thank you for your contribution.
It has been reviewed and scored.

----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
👍  ,
properties (23)
post_id45,619,306
authorrosatravels
permlinkre-sargoon-materialize-education-series-part-6-how-to-create-parallax-scrolling-image-website-using-materialize-css-and-jquery-library-with-20180427t034535269z
categoryutopian-io
json_metadata"{"app": "utopian/1.0.0", "community": "utopian", "tags": ["utopian-io"]}"
created2018-04-27 03:45:39
last_update2018-04-27 03:45:39
depth1
children1
net_rshares182,041,031,708
last_payout2018-05-04 03:45:39
cashout_time1969-12-31 23:59:59
total_payout_value0.734 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length307
author_reputation446,683,592,150,961
root_title"Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server"
beneficiaries
0.
weight1,500
accountutopian.pay
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (2)
@sargoon · 
Thank you for moderating my contribution again.
properties (22)
post_id45,720,027
authorsargoon
permlinkre-rosatravels-re-sargoon-materialize-education-series-part-6-how-to-create-parallax-scrolling-image-website-using-materialize-css-and-jquery-library-with-20180427t172253480z
categoryutopian-io
json_metadata"{"app": "steemit/0.1", "tags": ["utopian-io"]}"
created2018-04-27 17:22:54
last_update2018-04-27 17:22:54
depth2
children0
net_rshares0
last_payout2018-05-04 17:22:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length47
author_reputation59,035,209,817,935
root_title"Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io · 
### Hey @sargoon! Thank you for the great work you've done!
We're already looking forward to your next contribution!
#### Fully Decentralized Rewards
We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.
#### Utopian Witness!
<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a> We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

**Want to chat? Join us on Discord https://discord.me/utopian-io**
properties (22)
post_id45,920,538
authorutopian-io
permlinkre-sargoon-materialize-education-series-part-6-how-to-create-parallax-scrolling-image-website-using-materialize-css-and-jquery-library-with-20180428t230042594z
categoryutopian-io
json_metadata"{"app": "utopian/1.0.0", "community": "utopian", "tags": ["utopian-io"]}"
created2018-04-28 23:00:42
last_update2018-04-28 23:00:42
depth1
children0
net_rshares0
last_payout2018-05-05 23:00:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length687
author_reputation152,913,012,544,965
root_title"Materialize Education Series Part #6: How to Create Parallax (Scrolling Image) Website using Materialize CSS and jQuery Library with using XAMPP Localhost Server"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
Help/Feedback