Thank you so much for purchasing our item from Templatemonster.
Follow the steps below to setup your site template:
html/assets
html/assets/css
html/assets/fonts
html/assets/img
html/assets/js
html/dark/index-1.html
html/light/index-1.html
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
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
light.css
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>
Documentation and examples for powerful responsive navigation header
<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>
.css
/* 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 }
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
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:
<a href="../assets/img/img-184.jpg" class="glightbox-1"> <img src="../assets/img/img-184.jpg" alt="Image" /> </a>
<a href="https://www.youtube.com/watch?v=CHSnz0bCaUk" class="glightbox-vid"> <img src="../assets/img/img-184.jpg" alt="Image" /> </a>
<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>
<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>
<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>
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>
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.
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
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.
data-speed
data-speed="0.5"
centered vertically
data-speed="1"
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".
data-lag
data-lag="0.5"
<!-- 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>
overflow: hidden
data-speed="auto"
/*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>
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.
data-speedx
.smooth-xy
data-speedx="1"
data-speedy="1"
data-speedx="0"
data-speedy="0"
<!-- 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>
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>
Custom cursor transforming into button using vanilla Javascript and GSAP 3. Add data-cursor to animate the cursor.
data-cursor
Basic Setting
<a href="dark/index-1.html" data-cursor="-opaque">Artik</a>
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:
<div data-cursor="-opaque"> ....... </div>
data-cursor-text
<div data-cursor-text="DRAG" data-cursor="-exclusion -xxl"> ....... </div>
.-sm
.-md
.-lg
.-xl
.-xxl
<div data-cursor="-exclusion -sm"> ....... </div>
.-light
.-dark
.-brown
.-exclusion
.-opaque
<div data-cursor-text="VIEW" data-cursor="-brown -xl"> ....... </div>
.-text-light
.-text-dark
.-text-brown
<div data-cursor-text="PLAY" data-cursor="-brown -text-light -xl"> ....... </div>
.-circle-light
.-circle-dark
.-circle-brown
<div data-cursor="-circle-light -md"> ....... </div>
Animate the Background Color ("infinite") of the whole container smoothly as you scroll.
data-textcolor
data-bgcolor
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>
data-textcolorfix
data-bgcolorfix
Example 2:
<section class=".js-bgfix" data-textcolorfix="#ffffff" data-bgcolorfix="#000000"> <div> .... </div> </section>
SplitText is a plugin for creating text animations. Here are some examples.
<h1 class="js-split-lines-up">Your text here</h1>
class
.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
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>
data-displacement
Image
data-intensity1
first image
data-intensity2
second image
data-angle1
data-angle2
data-ease
Image 1
Image 2
<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>
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>
.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
Animation is an effective way to hold attention and delight viewers on your website.
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
How to create a <section> or <div> with Parallax Effect:
<section>
<div>
<div class="parallax-prev"></div> <footer> <div class="js-parallax-section"> .... </div> </footer>
If this documentation doesn't answer your questions, please contact us via the TemplateMonster author profile
See what's new added, changed, fixed, improved or updated in the latest versions.
- Update of the new version of Gsap plugins - 3.11.5 (plugin.min.js)
- Update of the new version of Gsap plugins - 3.11.4 (plugin.min.js)
Initial Release