Showcase Slider
This template provides a very elegant way to showcase your work using a WebGL fullscreen slider. Setting up is simple. Please use the following codes:
Code Example:
Your slide number here need to be the same as the slide image which is located into #canvas-slider
Code Example:
Slide
Showcase slide options
Options |
Description |
|---|---|
change-header |
Set this class if you want to invert the header color when this slide is in viewport |
data-slide="1" |
Set slide number which is assigend with the footer counter |
Slide Title
Showcase slide title options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
data-firstline="View" |
Set first text line for mouse cursor on title hover |
data-secondline="Project" |
Set second text line for mouse cursor on title hover |
Showcase Carousel
This template provides another elegant way to showcase your work using a Carousel slider. Setting up is simple. Please use the following codes:
Code Example:
Your slide images should be the same as the images which is located into .thumb-container for fit thumb screen animation
Code Example:
Slide
Carousel slide options
Options |
Description |
|---|---|
change-header |
Set this class if you want to invert the header color when this slide is in viewport |
Slide Title
Carousel slide title options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
data-firstline="View" |
Set first text line for mouse cursor on title hover |
data-secondline="Project" |
Set second text line for mouse cursor on title hover |
Portfolio Grid
This template provides another elegant way to showcase your work using a Portfolio Grid. Setting up is simple. Please use the following codes:
Code Example:
Portfolio Grid Options
Options |
Description |
|---|---|
parallax-three-grid |
Set this class for having a three columns portfolio grid with parallax items |
parallax-two-grid |
Set this class for having a two columns portfolio grid with parallax items |
overlapping-grid |
Set this class for having a two columns portfolio grid with overlapping items |
below-caption |
Set this class for item caption to be displaied below the image |
Portfolio Grid Animations
Options |
Description |
|---|---|
webgl-fitthumbs |
Set this class to animate item thumb image to fullscreen with webgl effects |
scale-fitthumbs |
Set this class to animate item thumb image to fullscreen only with scale effect |
no-fitthumbs |
Set this class to disable the animation effect |
Portfolio item Structure
Code Example:
Portfolio Grid Item Options
Options |
Description |
|---|---|
data-color="#558e2f" |
Set color for mouse cursor on title hover |
data-firstline="View" |
Set first text line for mouse cursor on title hover |
data-secondline="Project" |
Set second text line for mouse cursor on title hover |
Project Page
This page is composed of three section:
Hero
This page section contains the project title, subtitle and image/video.
Code Example:
Hero Caption Options
Options |
Description |
|---|---|
marquee-title |
Set this class to have the caption title displaied as a marquee |
Main Page Content
On this page section contains you can build all the page content.
Code Example:
This section has the following option:
Options |
Description |
|---|---|
content-max-width |
Set this class to have the content maximum width up to 1280px |
content-full-width |
Set this class to have the content width like the viewport |
Next Project Navigation
The section should have the same atributes as the next project hero.
Code Example:
This section has the following options:
Options |
Description |
|---|---|
change-header |
Set this class to change the header color for the next project page: |
data-bgcolor="#171717" |
Set the next project page background color: |
data-color="#838b8a" |
Set the color for Mouse Circle Cursor hovering the next page title url |
data-firstline="Next" |
First word displayed on the Mouse Circle Cursor hovering the next project title url |
data-secondline="Project" |
Second word displayed on the Mouse Circle Cursor hovering the next project title url |
Didn't find what
you were looking for?
If there’s anything unclear or you have some concerns
open a ticket on our forum and we'll get back to you.