Documentation by “WebGraphicArt”

Artik - Creative Agency and Portfolio TEMPLATE

Thank you so much for purchasing our item from Templatemonster.


  • Created: 13 May, 2023
  • Update: Coming Soon

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /html folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • html/assets - Contains all of the assets referenced
      • html/assets/css - Stylesheet files
      • html/assets/fonts - Fonts files
      • html/assets/img - Images files
      • html/assets/js - Javacript files
    • html/dark/index-1.html - Homepage (Light version)
    • html/light/index-1.html - Homepage (Dark version)
  3. You should upload all or specific HTML files as per your need.
  4. You are good to go for adding your content now!

HTML Structure

Artik follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework and a robust JavaScript toolset like GSAP 3

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Your Title, Description, Author, Stylesheets -->

</head>

   <body>

      <!-- Preload -->
      <div class="loader-bg">
         .....
      </div>

      <!-- Header -->
      <header>

         <!-- Toolbar -->
         <div class="header-toolbar">
            .....
         </div>

         <!-- Menu Navigation -->
         <nav class="nav-container js-submenu-view">
            .....
         </nav>

      </header>
      <!-- Header End -->

      <!-- Document Wrapper -->
      <main id="smooth-wrapper">

         <!-- Content -->
         <div id="smooth-content"> 

           <!-- Footer -->
           <footer>
              <div class="footer-1 js-parallax-section cover-bg bg-ol-dark-7"> 
                 ...... 
              </div>
           </footer>
           <!-- Footer end --> 

         </div>
         <!-- Content --> 

      </main>
      <!-- Document Wrapper end --> 

   <!-- JavaScript -->
   </body>
   
</html>

If you need more information, please visit Bootstrap site: https://getbootstrap.com


Color Schemes

You can change your Website's Color Scheme in an instant. We have build 2 Color css file for change template primary color.

  • dark.css - Dark Color
  • light.css - Light Color

For Example:

<!-- Dark Version -->
            
<head>
   ....
   <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
   <link rel="stylesheet" type="text/css" href="assets/css/dark.css" />
</head>

Navbar

Documentation and examples for powerful responsive navigation header

  • This page section is always fixed on top and contain the fullscreen navigation.
<nav class="nav-container js-submenu-view">
   <div class="submenu-close" data-magnetic data-cursor="-opaque">
      <div class="submenu-close-img js-submenu-close">
         <img src="../assets/img/arrow-w-l.png" alt="arrow-left" />
      </div>
   </div>
   <div class="nav-v">
      <div>
          <!-- Start Menu -->
         <div class="nav-link-out js-submenu-open">
            <div class="nav-link-in nav-menu-link submenu-hidden">
               <div class="nav-link-in-out" data-cursor="-exclusion -sm">
                  <a href="#">Home </a>
               </div>
            </div>
             <!-- Start Submenu -->
            <div class="nav-v submenu js-submenu">
               <div data-cursor="-exclusion -sm">
                  <div class="nav-link-out">
                     <div class="nav-link-in nav-submenu-link">
                        <div class="nav-link-in-out">
                           <a href="index-1.html">Home 1 </a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
             <!-- End Submenu -->
         </div>
          <!-- End Menu -->
      </div>
   </div>
</nav>
  • If you wish, you can change the color of the background and text in the .css file
/* Stylesheet */

.nav-container {
   overflow: hidden;
   width: 100%;
   height: 100vh;
   min-height: 100vh;
   margin: 0;
   padding: 0;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9;
   pointer-events: none;
   background-color: var(--dark-3);  // Change the color of the background
   transform: scaleY(0);
   transform-origin: bottom;
   transition: all 1.2s cubic-bezier(0.86, 0, 0.1, 1);
   transition-delay: 1.2s;
}

.nav-v .nav-link-in.nav-menu-link a {
   font-size: clamp(3.06rem, 7.5vw + 0.19rem, 6.19rem);
   text-transform: uppercase;
   line-height: 1.2;
   color: var(--light-1)  // Change the color of the text
}

Icons Fonts

Fonts Themify Icons icon sets are used in this Theme.

<i class="ti-check-box"></i>
<i class="ti-plus"></i>
<i class="ti-world"></i>
<i class="ti-shift-left-f"></i>

Please go to their official documentation pages for a full list of Icons: Fonts Themify Icons


Image Lightbox

GLightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.

For example:

  • Show image popup when click on image.
<a href="../assets/img/img-184.jpg" class="glightbox-1">
   <img src="../assets/img/img-184.jpg" alt="Image" /> 
</a>
  • You can add videos with optional autoplay for Vimeo, Youtube and self Hosted Videos.
<a href="https://www.youtube.com/watch?v=CHSnz0bCaUk" class="glightbox-vid">
   <img src="../assets/img/img-184.jpg" alt="Image" /> 
</a>
  • Simple Image Gallery.
<a href="../assets/img/img-195.jpg" class="glightbox-1">
   <img src="../assets/img/img-195.jpg" alt="Image" /> 
</a>
<a href="../assets/img/img-184.jpg" class="glightbox-1">
   <img src="../assets/img/img-184.jpg" alt="Image" /> 
</a>
  • You can add Title and Descriptions to your slides.
<a href="../assets/img/img-184.jpg" class="glightbox-1" data-glightbox="title: My title; description: this is the slide description">
   <img src="../assets/img/img-184.jpg" alt="Image" /> 
</a>
  • Image with Advanced Description.
<a href="../assets/img/img-184.jpg" class="glightbox-1" data-glightbox="title: My title; description: .desc-1">
   <img src="../assets/img/img-184.jpg" alt="Image" /> 
</a>
<div class="glightbox-desc desc-1"> 
   <p>The content of this div will be used as the slide description></p> 
   <p>You can add links and any HTML you want></p> 
</div> 
  • You can specify some options to each individual slide, the available options are:
    • title, alt, description, descPosition, type, effect, width, height, zoomable, draggable
<!-- One line config -->
<a href="large.jpg" data-glightbox="title: Your title; description: description here; descPosition: left; type: image; effect: fade; width: 900px; height: auto; zoomable: true; draggable: true;"></a>

<!-- Multiple data attributes / You can use the options as separated data attributes -->
<a
  href="large.jpg"
  data-title="My title"
  data-description="description here"
  data-desc-position="right"
  data-type="image"
  data-effect="fade"
  data-width="900px"
  data-height="auto"
  data-zoomable="true"
  data-draggable="true"
></a>

GSAP 3 Animation

Welcome! In this guide we’re going to cover GSAP's core fundamentals and animate some HTML elements. For more information on how it works, read the documentation at this link Greensock, and I recommend subscribing to the forum. Also I advise you to subscribe and visit the Forum GSAP, they are very competent and quick to respond.


Smooth Scroll whith ScrollSmoother.js

Unlike most smooth-scrolling libraries, ScrollSmoother leverages NATIVE scrolling - it doesn't add "fake" scrollbars nor does it mess with touch/pointer functionality.

<main id="smooth-wrapper">
   <div id="smooth-content">
   
   <!-- Add all your content here -->

   </div>
</main>

Example Setting in script.js

let smoother = ScrollSmoother.create({
   smooth: 2,               // how long (in seconds) it takes to "catch up" to the native scroll position
   effects: true,           // looks for data-speed and data-lag attributes on elements
});

If you need more information, please visit GreenSock.com site: https://greenSock.com/docs/v3/Plugins/ScrollSmoother


Parallax Effect 1

Add a parallax effect by defining a data-speed attribute on any element, like data-speed="0.5" would make that element "scroll" at half-speed while it's in the viewport. It arrives at its normal position in the document flow when it's centered vertically. Set data-speed="1" if you don't want to move anything.

Make an element appear to lag behind, taking a certain amount of time to "catch up" to the smoothed scroll position. Simply define a data-lag attribute, like data-lag="0.5" would take 0.5 seconds to "catch up".

For Example:

<!-- Text -->
<h1 data-speed="0.7" data-lag="0.5">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" data-speed="0.7" data-lag="0.4" alt="Image" />

<!-- Section -->
<section data-speed="0.4" data-lag="0.3">
   <div> 
      ....
   </div>
</section>
  • Put a larger image/element inside a container that has overflow: hidden and then set the child's data-speed="auto" and it'll automatically calculate exactly how far it can move inside that container (parallax).

For Example:

/*Stylesheet*/
.parallax-img {
   align-items: center;
   justify-items: center;
}

.parallax-img .parallax-cont {
   width: 100%;
   height: 70vh;
   position: relative;
   overflow: hidden;
}
   
.parallax-img img {
   position: absolute;
   bottom: 0; 
   width: 100%;
   height: 80vh;
   margin: 0 auto;
   object-fit: cover;
}
<!-- Image Parallax -->
<div class="parallax-images vh-70">
   <img src="../assets/img/img-200.jpg" class="h-130" data-speed="auto" alt="Image" />
</div>

If you need more information, please visit GreenSock.com site: https://greenSock.com/docs/v3/Plugins/ScrollSmoother


Parallax Effect 2

Add a parallax effect by defining a data-speedx and data-speedx (with class .smooth-xy) attribute on any element, which will scroll horizontally (data-speedx="1") and vertically (data-speedy="1"). Set data-speedx="0" and data-speedy="0" if you don't want to move anything.

<!-- Text -->
<h1 class="smooth-xy" data-speedx="1" data-speedy="1.2">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="smooth-xy" data-speedx="-1.1" data-speedy="0" alt="Image" />

<!-- Section -->
<section class="smooth-xy" data-speedx="1.1" data-speedy="1.1">
   <div> 
      ....
   </div>
</section>

Parallax Effect 1 / Parallax Effect 2

Very important: do not use Parallax Effect 1 and Parallax Effect 2 in the same animation.

<!-- BAD: Animation -->
<h1 class="smooth-xy" data-speedx="1" data-speedy="1.2" data-lag="0.3">Artik Template</h1>

<!-- GOOD: Animation -->
<h1 class="smooth-xy" data-speedx="1" data-speedy="1.2">Artik Template</h1>


<!-- BAD: Animation -->
<h1 class="smooth-xy" data-speed="1" data-speedy="1.2">Artik Template</h1>

<!-- GOOD: Animation -->
<h1 class="smooth-xy" data-speedx="1" data-speedy="1.2">Artik Template</h1>

Cursor Animation

Custom cursor transforming into button using vanilla Javascript and GSAP 3. Add data-cursor to animate the cursor.

Basic Setting

<a href="dark/index-1.html" data-cursor="-opaque">Artik</a>

Example Setting in script.js

const cursor = new Cursor({
      container: "body",  // Container where the cursor works
      speed: 0.7,         // Increase or decrease cursor speed
      ease: "expo.out",   // Simply changing the ease can often times change the entire nature of your animation *
      visibleTimeout: 300 // Cursor display time after moving
    });

* You can use the Visualizer to help you choose exactly the type of Easing you need: https://greensock.com/docs/v3/Eases

Optional parameters:

Type Class Features Code Example
data-cursor Animate cursor
<div data-cursor="-opaque">
  .......
</div>
data-cursor-text Add text to cursor
<div data-cursor-text="DRAG" data-cursor="-exclusion -xxl">
  .......
</div>
.-sm
.-md
.-lg
.-xl
.-xxl
Cursor Width
<div data-cursor="-exclusion -sm">
  .......
</div>
.-light
.-dark
.-brown
.-exclusion
.-opaque
Cursor Color
<div data-cursor-text="VIEW" data-cursor="-brown -xl">
  .......
</div>
.-text-light
.-text-dark
.-text-brown
Cursor Text Color
<div data-cursor-text="PLAY" data-cursor="-brown -text-light -xl">
  .......
</div>
.-circle-light
.-circle-dark
.-circle-brown
Cursor Transparent
<div data-cursor="-circle-light -md">
  .......
</div>

Background Color Change

Animate the Background Color ("infinite") of the whole container smoothly as you scroll.

  • Add the data-textcolor to change the Text color and add the data-bgcolor to change the Layout color.

Example 1:

<section data-textcolor="#000000" data-bgcolor="#ffffff">
   <div>
      ....
   </div>
</section>
<section data-textcolor="#ffffff" data-bgcolor="#000000">
   <div>
      ....
   </div>
</section>
<section data-textcolor="#000000" data-bgcolor="#ffffff">
   <div>
      ....
   </div>
</section>
  • Animate the Background Color ("once") of the whole container smoothly as you scroll.
    Add the data-textcolorfix to change the Text color and add the data-bgcolorfix to change the Layout color.

Example 2:

<section class=".js-bgfix" data-textcolorfix="#ffffff" data-bgcolorfix="#000000">
   <div>
      ....
   </div>
</section>

Split Text

SplitText is a plugin for creating text animations. Here are some examples.

<h1 class="js-split-lines-up">Your text here</h1>
  • Change the class to get other animations:
    • .js-split-lines-fade-up
    • .js-split-lines-up
    • .js-split-lines-left
    • .js-split-words-up
    • .js-split-chars-up
    • .js-split-chars-letter-up
    • .js-split-chars-left
    • .js-split-rotate
    • .js-split-chars-l

If you need more information, please visit GreenSock.com site: https://greensock.com/docs/v3/Plugins/SplitText


Image Distortion Hover

The animation is based on WebGL and we use three.js, so it works in all recent browsers. This helper needs Three.js and Gsap to do the transition, so you need to include it before this little helper. Then you only need a div element in HTML to start animating things with a piece of code like this:

<div class="grid-item js-reveal-img-rotate grid-bg-1 grid-item-40 mb-4">
   <a href="../assets/img/img-184.jpg" class="glightbox-1">
      <div class="grid-item-img-v reveal-img-rotate" 
           data-displacement="../assets/img/textures/mask-28.jpg" 
           data-intensity1="0.70" 
           data-intensity2="-0.70" 
           data-angle1="1" 
           data-angle2="-4" 
           data-ease="power4">
         <img src="../assets/img/img-167.jpg" alt="Image" /> // Image 1
         <img src="../assets/img/img-184.jpg" alt="Image" /> // Image 2
      </div>
   </a>
</div>

Optional parameters:

Name Type Description
data-displacement Image The Image used to do the transition between the 2 main images.
data-intensity1 Intensity Overrides the distortion intensity of the first image.
data-intensity2 Intensity Overrides the distortion intensity of the second image.
data-angle1 Angle Overrides the distortion angle for the first image.
data-angle2 -Angle * 3 Overrides the distortion angle for the second image.
data-ease Expo.easeOut Easing of the transition, see Greensock Easing
Image 1 Image The first Image of the animation..
Image 2 Image The second Image of the animation.
  • You can leave all values blank for the default options:
<div class="grid-item js-reveal-img-rotate grid-bg-1 grid-item-40 mb-4">
   <a href="../assets/img/img-184.jpg" class="glightbox-1">
      <div class="grid-item-img-v reveal-img-rotate" 
           data-displacement="../assets/img/textures/mask-28.jpg" 
           data-intensity1="" 
           data-intensity2="" 
           data-angle1="" 
           data-angle2="" 
           data-ease="">
         <img src="../assets/img/img-167.jpg" alt="Image" /> // Image 1
         <img src="../assets/img/img-184.jpg" alt="Image" /> // Image 2
      </div>
   </a>
</div>

Reveal Image Animation

Create a trending image reveal animation.

<div class="js-reveal-img-l">
   <div class="reveal-img-l">
      <img src="../assets/img/img-123.jpg"alt="Image" />
   </div>
</div>
  • Change the class to get other animations:
    • .js-reveal-img-l / .reveal-img-l
    • .js-reveal-img-r / .reveal-img-r
    • .js-reveal-parallax-l / .reveal-parallax-l
    • .js-reveal-parallax-r / .reveal-parallax-r
    • .js-reveal-img-v / .reveal-img-v
    • .js-reveal-img-rotate / .reveal-img-rotate
    • .js-reveal-img-l2 / .reveal-img-l2

Animations Effects

Animation is an effective way to hold attention and delight viewers on your website.

  • Fade In Transition Animation:
<!-- Text -->
<h1 class="js-fade">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="js-fade" alt="Image" />

<!-- Section -->
<section class="js-fade">
   <div> 
      ....
   </div>
</section>
  • Fade Left Transition Animation:
<!-- Text -->
<h1 class="js-fade-left">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="js-fade-left" alt="Image" />

<!-- Section -->
<section class="js-fade-left">
   <div> 
      ....
   </div>
</section>
  • Fade Right Transition Animation:
<!-- Text -->
<h1 class="js-fade-right">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="js-fade-right" alt="Image" />

<!-- Section -->
<section class="js-fade-right">
   <div> 
      ....
   </div>
</section>
  • Zoom In Transition Animation:
<!-- Text -->
<h1 class="js-zoom-in">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="js-zoom-in" alt="Image" />

<!-- Section -->
<section class="js-zoom-in">
   <div> 
      ....
   </div>
</section>
  • Zoom Out Transition Animation:
<!-- Text -->
<h1 class="js-zoom-out">Artik Template</h1>

<!-- Image -->
<img src="../assets/img/img-152.jpg" class="js-zoom-out" alt="Image" />

<!-- Section -->
<section class="js-zoom-out">
   <div> 
      ....
   </div>
</section>
  • Zoom In Scroll Transition Animation (only Images):
<!-- Background Image -->
<div class="overflow-hidden">
   <div class="js-zoom-in-scroll">
      <div class="grid-item-50 cover-bg" style="background-image: url('../assets/img/img-159.jpg');"</div>
   </div>
</div>

<!-- Image -->
<div class="overflow-hidden">
   <div class="js-zoom-in-scroll">
      <img src="../assets/img/img-152.jpg" alt="Image" />
   </div>
</div>
  • Zoom Out Scroll Transition Animation (only Images):
<!-- Background Image -->
<div class="overflow-hidden">
   <div class="js-zoom-out-scroll">
      <div class="grid-item-50 cover-bg" style="background-image: url('../assets/img/img-159.jpg');"</div>
   </div>
</div>

<!-- Image -->
<div class="overflow-hidden">
   <div class="js-zoom-out-scroll">
      <img src="../assets/img/img-152.jpg" alt="Image" />
   </div>
</div>

Parallax Section

How to create a <section> or <div> with Parallax Effect:

<div class="parallax-prev"></div>

<footer>
   <div class="js-parallax-section">
      ....
   </div>
</footer>

Source & Credits

Images:

Fonts:

Framework:

Scripts:


Support

If this documentation doesn't answer your questions, please contact us via the TemplateMonster author profile

  • We are located in GMT +1:00 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).
While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Templatemonster Profile > Downloads > & then You can Rate & Review for our template.
Thank You.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.


Version 2.0 (13 May, 2023)

- Update of the new version of Gsap plugins - 3.11.5 (plugin.min.js)

Version 1.1 (20 February, 2023)

- Update of the new version of Gsap plugins - 3.11.4 (plugin.min.js)

Version 1.0 (18 February, 2023)

Initial Release