Materialize Tutorial

Materialize is a Javascript/CSS framework, similar to Bootstrap, based on Google's Material Design

Material Design is a design philosophy that creates a "metaphor" between technology and real life, by having the elements of the design mimic real world materials like ink and paper. the Elements are made to look like they have depth and texture by using familiar patterns of movement and shadow.

Learn more about Materialize

Learn more about Material Design


Parallax is a visual effect that creates the illusion that an element is floating above another element, closer to the viewer.
While scrolling, the element "closer" to the viewer scrolls by quicker than the element behind it, giving the illusion of depth to the page.
the effect can be achieved very easily using Materialize

parallax-container: adding this class name to the div makes it a parallax element
parallax: this element is where you will place the image itself, Materialize will create a separation between the elements below and above the image and automatically create the parallax effect.

The Parallax effect must be initialized inside a JQuery document.ready function before it will appear on your webpage.

Sample Code
genji background Parallax Example


Materializes Carousel is an Image slider with a much more robust customization than its Parallax.
Each image can also be a link that can open a new page or a "modal", and The Carousel is also touch-enabled, which makes it a nice addition to mobile web pages.

carousel: including this class name tells Materialize that this div is the Carousel
carousel-item: elements with this class name will be placed inside the carousel as carousel items. These are the actual images which will "spin" around the carousel

Customization Options
time_constant: changes how long it takes for the carousel to spin to the next element.
dist: changes the "perspective zoom", ie how much of a difference in size there is from the element in the center to the elements on either side. a Negative number makes the side elements smaller, a Positive Number makes them larger.
shift: the distance between the center element from the side elements.
padding: similar to css padding-left/right, this changes the distance between the elements.
full_width: Changes whether or not the Carousel simulates having circular depth or takes up the width of the carousel linearly.
indicators: changes whether or not indicators are shown below the Carousel. Indicators will show which element in the carousel is centered and how many elements there are in the carousel.
no_wrap: changes whether the carousel is circular, or simply scrolls from the from the first element to the last one without wrapping back around.

Default Carousel

Full-Width Carousel

Sample Code Carousel Examples

Auto-Scrolling Carousel with Navigation Buttons

Materializes Carousel comes with two JQuery functions that can be called in the script, next and previous
Using these two functions, and taking advantage of the Carousels time_constant customization option, we can create a Carousel that continuously scrolls on it's own.
To make the auto-scrolling Carousel easy to use, we can have it stop when the mouse hovers over its elements by using jquery's mouseenter and mouseleave functions to temporarily pause the auto-scrolling until the mouse leaves the carousel.

fast_rewind fast_forward
Carousel in with Javascript and JQuery

I attempted to recreate the basic functionality of the Materialize Carousel using Javascript and Jquery

First, I created an array that stored the id of each item of the carousel.

Then I set the variable to determine the size of the carousel div and also the "overflow" width (the width at which the elements of the carousel would wrap back around to the beginning). The overflow width is the width of the carousel element multiplied by the number of elements.

The move() function takes two parameters, the index of the element in the array and the speed at which the element will be moved.
The Initialization of the carousel is called when the document loads, and simply calls the move function with a speed of 0 (making the movement instant) until every element has been moved into its starting position in the carousel.

from that point on, pressing the button will call the move function for every element in the carousel in a loop, moving each element forward one place at a default speed of 100 milliseconds.

When an element of the carousel is moved outside the width of the carousel, its width becomes 0 and its opacity it set to 0 until it wraps back around to the start of the carousel.

genji portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
mccree portrait
Spin Carousel

W3Schools Jqeury .css()
W3Schools Jquery .length()


Materialize Modals are small windows within the document that open up when you click on a Modal Trigger, and are useful for things like Dialog boxes or Confirmation messages.
I've been using Modals throughout this document to display the code, the trigger in these cases being the Materialize wave Buttons.

Materialize Offers a few different types of Modals to better facilitate a wider range of uses.

Standard Modal Modal with Fixed Footer Bottom Sheet Modal

Materialize.css Modal Examples