مستندات

انیمیشن‌های ظاهر شده

مجموعه‌ای از انیمیشن‌های روان برای استفاده در صفحه شما از طریق کتابخانه Anime.js.

ما از کتابخانه Anime.js برای انیمیشن‌ها استفاده کردیم، یک کتابخانه انیمیشن جاوااسکریپت سبک با یک API ساده اما قدرتمند. این کتابخانه با ویژگی‌های CSS، SVG، ویژگی‌های DOM و اشیاء جاوااسکریپت کار می‌کند.

کاربرد

ما کار با Anime.js و حتی پیاده‌سازی آن را با استفاده از ویژگی‌های داده به جای شروع انیمیشن‌ها از طریق کد جاوا اسکریپت، آسان کرده‌ایم.

برای پیکربندی Anime.js ، از data-anime ویژگی و گزینه‌های آنها یا گزینه‌های داخلی ما در زیر استفاده کنید. این کتابخانه از ۳ حالت مختلف پشتیبانی می‌کند، بنابراین انیمیشن‌ها زمانی شروع می‌شوند که روی عنصر کلیک شود، موس روی آن قرار گیرد یا وقتی در نمای دید باشد، جزئیات بیشتر در جدول گزینه‌ها در زیر آمده است.

برای اینکه حالت نمایش انیمیشن‌ها کار کند، باید انیمیشن‌ها را همانطور که ظاهر می‌شوند اضافه onview:true یا شروع کنید! onview: {offset_number}

<element data-anime="onview: -200; translateY: [40, 0]; scale: [0.8, 1]; opacity: [0, 1];">Get started</element>

حیرت انگیز

Staggering به شما این امکان را می‌دهد که با اضافه کردن این تابع به ویژگی delay، چندین عنصر را با اکشن‌های follow through و overlap متحرک‌سازی کنید anime.stagger(value, options) و باید data-anime="targets: .selector" این ویژگی را به عنصر والد با گزینه‌های animations اضافه کنید.

<!-- target all child elements and increase delay by 100ms for each elements. -->
<div data-anime="
     onview: -200; 
     targets: .element; 
     translateY: [20, 0]; 
     opacity: [0, 1]; 
     delay: anime.stagger(100);">
    <h4 class="element"> سلام دنیا </h4>
    <p class="element">Lorem ipsum dolor sit amet.</p>
    <button class="element"> شروع کنید </button>
</div>

گزینه‌ها

اینها گزینه‌های داخلی ما برای هدف‌گیری، تحریک یا آغاز انیمیشن‌ها هستند.

برای جست و جو بیشتر: داکیومنت .

نوبار

یک ناوبری سفارشی ساخته شده با flexbox و پایه ای قوی برای ساخت انواع اجزای ناوبری فراهم می کند.

عمودی

برای ناوبری عمودی (محور y) استفاده می‌شود .nav-y، می‌توانید عنصر را به عنوان جداکننده افقی اضافه .hr کنید li

<ul class="nav-y gap-2 text-muted">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li class="hr"></li>
    <li><a href="#">Nav item</a></li>
</ul>

افقی

برای ناوبری افقی (محور x) استفاده می‌شود .nav-x، می‌توانید عنصر را به عنوان جداکننده عمودی .vrاضافه کنید.

<ul class="nav-x text-muted">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li class="vr"></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
</ul>

فاصله گذاری

شما می‌توانید فاصله‌گذاری ناوبری را با استفاده از .gap-*ایجاد فاصله/شکاف بین آیتم‌های ناوبری که برای هر دو جهت کار می‌کند، سفارشی کنید.

<ul class="nav-x gap-6 text-muted">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
</ul>

منوی ناوبری + آیکون

می‌توانید آیکون‌ها را به ناوبری خود اضافه کنید و آنها به طور یکپارچه در جای خود قرار می‌گیرند.

<ul class="nav-y gap-2 text-muted">
    <li><a href="#"><i class="unicon-store"></i>Dashboard</a></li>
    <li><a href="#"><i class="unicon-view-next"></i>Purchase history</a></li>
    <li><a href="#"><i class="unicon-enterprise"></i>Billing address</a></li>
    <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i>Edit profile</a></li>
    <li class="hr"></li>
    <li><a class="text-danger" href="#"><i class="unicon-power"></i>Log out</a></li>
</ul>

<ul class="nav-x gap-6 text-muted">
    <li><a href="#"><i class="unicon-home"></i>Home</a></li>
    <li><a href="#"><i class="unicon-star"></i>Services</a></li>
    <li><a href="#"><i class="unicon-document"></i>Blog</a></li>
    <li><a href="#"><i class="unicon-send-alt"></i>Contact us</a></li>
</ul>

پشتیبانی از RTL

به طور پیش‌فرض، کامپوننت ناوبری از زبان‌های RTL پشتیبانی می‌کند، برای مثال dir="rtl"از ویژگی برای مشاهده آن در عمل استفاده کنید.

<ul class="nav-y gap-2 text-muted" dir="rtl">
    <li><a href="#"><i class="unicon-store"></i> لوحة التحكم </a></li>
    <li><a href="#"><i class="unicon-view-next"></i> المشتريات </a></li>
    <li><a href="#"><i class="unicon-enterprise"></i> تعديل العناوين </a></li>
    <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i> تعديل الملف الشخصي </a></li>
    <li class="hr"></li>
    <li><a href="#"><i class="unicon-power"></i> تسجيل الخروج </a></li>
</ul>

<ul class="nav-x gap-6 text-muted" dir="rtl">
    <li><a href="#"><i class="unicon-home"></i> الرئيسية </a></li>
    <li><a href="#"><i class="unicon-star"></i> الخدمات </a></li>
    <li><a href="#"><i class="unicon-document"></i> مقالات </a></li>
    <li><a href="#"><i class="unicon-send-alt"></i> >إتصل بنـا </a></li>
</ul>

مودال

ایجاد دیالوگ‌های Modal با سبک‌ها و انتقال‌های مختلف.

کاربرد

کامپوننت Modal شامل یک لایه پوششی، یک کادر محاوره‌ای و یک دکمه‌ی بستن اختیاری است. می‌توانید از هر عنصری برای فعال یا غیرفعال کردن یک کادر محاوره‌ای modal استفاده کنید. برای فعال کردن جاوا اسکریپت لازم، این data-uc-toggleویژگی را اضافه کنید. یک a عنصر باید به شناسه‌ی modal لینک شود. اگر از عنصر دیگری مانند یک دکمه استفاده می‌کنید، کافیست این data-uc-toggle="target: #ID"ویژگی را اضافه کنید تا شناسه‌ی نگهدارنده‌ی modal را هدف قرار دهد.

این data-uc-modalویژگی را به یک div عنصر اضافه کنید تا یک ظرف مودال و یک پوشش که صفحه را خالی می‌کند، ایجاد شود. اضافه کردن یک idبرای نشان دادن عنصری که می‌خواهید نمایش داده شود، مهم است. از کلاس‌های زیر برای تعریف بخش‌های مودال استفاده کنید.

<!-- This is a button toggling the modal -->
<button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

<!-- This is the modal -->
<div id="modal-id" data-uc-modal>
    <div class="uc-modal-dialog p-3">
        <button class="uc-modal-close-default" type="button">Close</button>
        <h2 class="h4">Modal heading</h2>
        <p> ... </p>
    </div>
</div>

Header و footer

برای تقسیم‌بندی مودال به بخش‌های محتوایی مختلف panel، از , padding p-{*}و استفاده کنید border-{*}.

<!-- This is a button toggling the modal -->
<button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

<!-- This is the modal -->
<div id="modal-id" data-uc-modal>
    <div class="uc-modal-dialog p-3">
        <button class="uc-modal-close-default" type="button">Close</button>

        <!-- The modal header -->
        <div class="panel p-3 border-bottom">
            <h2 class="h4">Modal heading</h2>
        </div>

        <!-- The modal body -->
        <div class="panel p-3">
            <p> ... </p>
        </div>

        <!-- The modal footer -->
        <div class="panel p-3 border-top">
            ...
        </div>
    </div>
</div>

اصلاح‌کننده کامل

برای ایجاد یک پنجره‌ی modal که کل صفحه را پر می‌کند، uc-modal-fullکلاس را اضافه کنید. همچنین توصیه می‌شود که این .uc-modal-close-fullکلاس را به دکمه‌ی بستن اضافه کنید تا استایل آن با دکمه تطبیق یابد.

<div class="uc-modal-full" data-uc-modal>
    <div class="uc-modal-dialog">
        <button class="uc-modal-close-full" type="button">Close</button>
        ...
    </div>
</div>

رفتار نزدیک

برای ایجاد یک دکمه‌ی بستن، قابلیت آن را فعال کنید و با استفاده از یکی از کلاس‌های زیر، استایل و موقعیت مناسب را به آن اضافه کنید.

Animations

A collection of smooth animations to use within your page.

All animations themselves are implemented with CSS, so they do not require JavaScript to play.

Usage

Add one of the .uc-animation-* classes to any element. The animation is shown when the class is added, so usually immediately on page load.

<div class="uc-animation-fade"></div>

Toggle animation

To toggle an animation on hover or focus, add the uc-animation-toggle class to a parent element. Also add tabindex="0" to make the animation focusable through keyboard navigation and on touch devices.

<div class="uc-animation-toggle" tabindex="0">
    <div class="uc-animation-fade"></div>
</div>

Reverse animation

By default, all animations are incoming. To reverse any animation, add the uc-animation-reverse class.

<div class="uc-animation-fade uc-animation-reverse"></div>

Speed modifier

To play animations at a faster speed, add the uc-animation-fast class to the element.

<div class="uc-animation-fade uc-animation-speed"></div>

Origin modifiers

By default, scaling animations originate from the center. To modify this behavior, add one of the .origin-* classes from the Utilities.

Ken Burns

To add a simple Ken Burns effect, add the uc-animation-kenburns class to any image. You can also apply the uc-animation-reverse or one of the .origin-* classes from the Utilities to modify the effect. Hover on the images below to see it in action!

Origin: default = center

Origin: top-right

<img class="uc-animation-kenburns" src="" width="" height="" alt="" />

<img class="uc-animation-kenburns origin-top-right" src="" width="" height="" alt="" />

By default, the animation starts on page load. In this example we used the uc-animation-toggle, to toggle the effect when mouse move over the image.

Slider

We made it easy to deal with Swiper 8 slider and even easy to implement with responsive on different screens using breakpoints.

Usage

To setup Swiper, use the data-swiper attribute and use our built-in options that are explained in the table below:

<div class="swiper" data-swiper="items: 2; gap: 8; dots: .swiper-pagination;" data-swiper-l="items: 3;">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->
    <div class="swiper-next"></div>
    <div class="swiper-prev"></div>
</div>

Responsive

We have custom configured responsive control using breakpoints data-swiper-{breakpoint}, the available breakpoints: s, m, l and xl.

<div class="swiper" data-swiper="items: 1; center: true;" data-swiper-m="items: 3; center: false;">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

Options

These are our built-in and most used options to configure and customize your swiper slider 8.

You can find out all the options and functions on their documenation.

Sticky

Make elements remain at the top of the viewport, like a sticky navigation, sidebars and content.

Usage

To create an element that remains at the top of the viewport when scrolling down the site,
add the data-uc-sticky attribute to that element.

<div data-uc-sticky>Stick to the top</div>

Position

By default, the element sticks to the top of the viewport. You can set the position: bottom option to stick it to the bottom of the viewport.

<div data-uc-sticky="position: bottom">Stick to the bottom</div>

Start

Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
The default value of 0 means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.

<!-- Sticks after 100px scrolling -->
<div data-uc-sticky="start: 100;"></div>

<!-- Sticks after 10vh scrolling -->
<div data-uc-sticky="start: 10vh;"></div>

<!-- Sticks after scrolling the elements height -->
<div data-uc-sticky="start: 100%;"></div>

<!-- Sticks after the top of the selected element -->
<div data-uc-sticky="start: #selector;"></div>

End

End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
A value of 0 means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to 0. A CSS Selector will set the end to the selected element's bottom and the element's bottom border.
false will make the element stick until the end of the page.
true selects the parent element.

<!-- Sticks until 100px scrolling -->
<div data-uc-sticky="end: 100;"></div>

<!-- Sticks until 10vh scrolling -->
<div data-uc-sticky="end: 10vh;"></div>

<!-- Sticks until scrolling the elements height -->
<div data-uc-sticky="end: 100%;"></div>

<!-- Sticks until the bottom of the selected element -->
<div data-uc-sticky="end: #selector;"></div>

<!-- Sticks until the bottom of its parent container -->
<div data-uc-sticky="end: true;"></div>

Offset

To set an offset to the viewport's edge when the element is sticky, add the offset option. The value can be in vh, % and px. It supports basic mathematics operands + and -.

<div data-uc-sticky="offset: 100">Stick 100px below the top</div>

Show on up

You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience.

<div data-uc-sticky="show-on-up: true">Slide in on scroll up</div>

Animation

Add an animation from the Animation component in order to have the sticky element reappear smoothly if a start offset is set.

<div data-uc-sticky="animation: uc-animation-slide-top;">Animation Slide Top</div>

Overflow flip

The overflow-flip option disables the sticky behavior for oversized content. Instead, it only flips the sticky position if the element is larger than the viewport. Changing the scroll direction will not affect the sticky position. Together with the start and end options, two nice sticky effects can be achieved. Cover an element by following content or reveal it by previous content.

<!-- Section will be covered by the next section -->
<div data-uc-sticky="overflow-flip: true; end: 100%;"></div>

<div>A section the will cover previous section and reveal next section.</div>

<!-- Section will be revealed by the previous section -->
<div data-uc-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0;"></div>

Oversized content

Sticky content that is larger than the viewport will scroll down and stick to the bottom of the viewport. Changing the scroll direction will immediately scroll the sticky content up and change the sticky behavior to stick to the top of the viewport. Scrolling down will change the behavior again.

<div class="row">
    <div class="col-8">
        <div>Oversized content...</div>
    </div>
    <div class="col-4">
        <div data-uc-sticky="end: true;">Stick until content end.</div>
    </div>
</div>

Responsive

It's possible to disable the sticky behavior for different device widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixel, for example media: 640, or a breakpoint, for example media: @m. The element will be sticky from the specified viewport width and upwards, but not below.

<div data-uc-sticky="media: 640">Only be sticky on viewports larger than 640px.</div>

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

JavaScript

Learn more about JavaScript components.

Initialization

UniCore.sticky(element, options);

Events

The following events will be triggered on elements with this component attached:

Animated Text

Add effects to your text, titles and sentences.

Typing Effect

An integrated lightweight Javascript library called Typed.js, It give you the ability to types out sentences and then delete them.

To configure TypedJs, use the data-uc-typed attribute and it's options.

<h3 class="h4">
    We are a digital 
    <span class="text-primary dark:text-tertiary" data-uc-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: true; loop: true;">
        <span>studio!</span>
        <span>agency!</span>
        <span>creative!</span>
    </span>
</h3>

Options

These are the most used options to configure and customize how sentences should be typed.

You can find out all the options and functions on their documentation.

SplitText Effect

To configure SplitType.js, use the data-uc-splitext attribute and it's options.

Now it's time to take advantage of SplitType and use Anime.js plugin to create good and smooth (60FPS) animations.

<h3 class="h1" data-uc-splitext="types: 'chars'" data-anime="targets: > *; translateX: [10, 0]; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true;">Meet Lexend!</h3>

<h3 class="h1" data-uc-splitext="types: 'words'" data-anime="targets: > *; translateY: [40, 0]; opacity: [0, 1]; easing: easeInOutExpo; duration: 750; delay: anime.stagger(100); loop: true; direction: alternate;">Meet Lexend!</h3>

<h3 class="h1" data-uc-splitext="types: 'chars'" data-anime="targets: > *; keyframes: [ {translateY: -10}, {rotateX: 180}, {translateY: 0}, {rotateX: 0}, ]; easing: easeOutElastic(1, .8); duration: 500; delay: anime.stagger(50); direction: alternate; loop: true;">Meet Lexend!</h3>

Options

These are the most used options to configure and customize your splited text.

You can find out all the options and functions on their documentation.

Scroll Effects

Animate CSS properties depending on the scroll position of the document.

We combined between Anime.js and ScrollMagic to acheive the Onscroll Effect. Now you can easly fire animatin on scroll with a powerful controll for your animations using anime.js options.

Usage

To apply this component, add the onscroll:'{trigger-element}' option to the data-anime attribute to apply the onscroll effect.

<div class="parent-scene">
    <p data-anime="onscroll: .parent-scene; translateX: 240; opacity: [0, 1]" ></p>
</div>

Playground

<div class="scene-selector">
    <h4 data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; translateX: [40, 0]; opacity: [0, 1]; easing: linear; duration: 100;">AI Software App</h4>
    <p data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; translateX: [-40, 0]; opacity: [0, 1]; easing: linear; duration: 100;">Lorem ipsum dolor sit amet.</p>
    <a href="#" class="btn btn-md btn-primary" data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; scale: [0.8, 1]; opacity: [0, 1]; easing: linear; duration: 100;">Get started</a>
</div>

Options

We have made some most used built-in options from ScrollMagic default ones.

You can find out all the options and functions on their documentation.

Tilt Effects

A lightweight parallax hover tilt effect using Vanilla Tilt library.

Usage

To create a parallax effect to your elements or objects you need to add data-uc-tilt attribute with the available options below.

Add transform-style: preserve-3d to your tilt element.

Add a transform: translateZ(50px) to your inner elements that have to pop out.

<div class="panel w-200px h-250px bg-gradient-45 from-indigo to-pink shadow-xl" data-uc-tilt="max: 20; perspective: 350; speed: 150;" style="transform-style: preserve-3d">
    <div class="panel position-absolute top-50 start-50 w-80px h-100px bg-white bg-opacity-70 backdrop-2 shadow-lg" style="transform: translate(-50%, -50%) translateZ(50px)"></div>
</div>

Options

These are our built-in options to target, trigger or initiate the animations.

You can find out all the options and functions on their documentation.

Magic Cursor

A creative, aesthetic Magic Cursor effects for your creative website.

Recently, customizations have begun to appear at the mouse pointer level to add an aesthetic and creative effect to the site.

Of course, we have taken into consediration the addition of this feature as an in-house component to facilitate its use only through data-uc-cursor.

Below you will find how it works and all the options and settings you can implement.

Usage

Any of these options can be applied to the component attribute. Separate multiple options with a space and also these options are CSS classes or Selectors.

To apply this component, add the data-uc-cursor attribute to an element you want the cursor to interact with!

<element data-uc-cursor> ... </element>

By default when you added data-uc-cursor attribute the cursor start to interact with that element, but, we made some built-in options to customize it more and below you will find out how!

Size

You can customize the cursor size by adding xs, sm, md, lg classes as an option.

Color

You can customize the cursor color by adding text-{color} and it will inherit that color as it's background.

<element data-uc-cursor="text-primary"> ... </element>

Text

You can add your custom text to the cursor by adding data-uc-cursor-text attribute on the same element or any child element and write your custom text just inside the text attribute.

<!-- On the same element that has "data-uc-cursor" -->
<element data-uc-cursor="" data-uc-cursor-text="Your text"> ... </element>

<!-- On the child level works too -->
<element data-uc-cursor="">
    <element data-uc-cursor-text="Your text"></element>
</element>

Icon

You can add your custom icon to the cursor by adding data-uc-cursor-icon attribute on the same element or any child element and write your custom icon class just inside the attribute.

<!-- On the same element that has "data-uc-cursor" -->
<element data-uc-cursor="" data-uc-cursor-icon="unicon-move icon-4"> ... </element>

<!-- On the child level works too -->
<element data-uc-cursor="">
    <element data-uc-cursor-icon="unicon-search icon-3"></element>
</element>

You can use our integrated icons library Unicons or any icon library that only works via CSS classes, as well as, you can resize icons using our icon size instructions.

Stick effect

Stick is a great effect for your links, buttons and any UI element, this will add a creative touch to your UI/UX design and here is how it works by adding data-uc-cursor-stick attribute on the same element that have main attribute and accepts CSS selectors like .elem class, #elem ID and > * child selectors.

Let's find out how it works.

You just need to hover on the image and the button below to see it sticked!

Get started

<!-- ID selector -->
<element data-uc-cursor="" data-uc-cursor-stick="#element-stick">
    <childElement id="element-stick"> ... </childElement>
</element>

<!-- Class selector -->
<element data-uc-cursor="" data-uc-cursor-stick=".element-stick">
    <childElement class="element-stick"> ... </childElement>
</element>

<!-- Child node/tag selector -->
<element data-uc-cursor="" data-uc-cursor-stick="childElement">
    <childElement> ... </childElement>
</element>

Magnetic effect

Magnetic, the same as Stick effect both are too way great effects to add a creative touch to your UI/UX design and here is how it works by adding data-uc-magnetic attribute on the element that you want this effect works on.

<!-- On element to be magneted -->
<element data-uc-cursor="opaque">
    <childElement data-uc-magnetic> ... </childElement>
</element>

<!-- Only one selector by class to be magneted -->
<element data-uc-cursor="opaque" data-uc-magnetic=".magnetic-element">
    <childElement class="magnetic-element"> ... </childElement>
    <childElement> ... </childElement>
</element>

<!-- Select all the child elements to be magneted -->
<element data-uc-cursor="opaque" data-uc-magnetic="*">
    <childElement> ... </childElement>
    <childElement> ... </childElement>
    <childElement> ... </childElement>
</element>

Playground

As these effects are great now we will combine them to achive a creative fusion and here is how it works.

Sticked Social Icons:

<ul data-uc-cursor="md" data-uc-cursor-stick="*">
    <li data-uc-cursor="text-dark" data-uc-cursor-icon="unicon-logo-github icon-3">
        <a href="#"><i class="icon-3 unicon-logo-github"></i></a>
    </li>
    <li data-uc-cursor="text-blue" data-uc-cursor-icon="unicon-logo-twitter icon-3">
        <a href="#"><i class="icon-3 unicon-logo-twitter"></i></a>
    </li>
    <li data-uc-cursor="text-secondary" data-uc-cursor-icon="unicon-logo-instagram icon-3">
        <a href="#"><i class="icon-3 unicon-logo-instagram"></i></a>
    </li>
</ul>

Creative Link:

<a  href="#link" 
    data-uc-cursor="md text-secondary-200 inverse-text fw-bold" 
    data-uc-cursor-text="TOP" 
    data-uc-cursor-stick="i" 
    data-uc-magnetic="i">
    <span>Scroll to</span>
    <i class="unicon-arrow-up"></i>
</a>

Magnetic Gallery:

<div class="row g-5 child-cols-3" data-uc-magnetic="**" data-uc-cursor-stick=".stick-element">
    <div>
        <div class="ratio ratio-1x1 rounded-2 overflow-hidden"
             data-uc-cursor="sm text-white inverse-text shadow-sm"
             data-uc-cursor-icon="unicon-add icon-3">
            <img src=" ... " alt="Image alt" data-uc-img>
            <div class="stick-element position-absolute top-50 start-50 translate-middle d-inline-flex justify-center items-center">
                <a class="position-cover" href="#link"></a>
            </div>
        </div>
    </div>
    ...
</div>

Slider + Stick controls:

<div class="swiper" data-swiper="items: 1; prev: .swiper-nav-prev; next: .swiper-nav-next;">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination" data-uc-cursor="xs text-white inverse-text" data-uc-cursor-stick=">*"></div>

    <!-- Add Arrows -->
    <div class="swiper-nav swiper-nav-prev position-absolute top-0 start-0 bottom-0 z-1 w-1/2" data-uc-cursor="md text-primary" data-uc-cursor-icon="unicon-arrow-left icon-3"></div>
    <div class="swiper-nav swiper-nav-next position-absolute top-0 end-0 bottom-0 z-1 w-1/2" data-uc-cursor="md text-primary" data-uc-cursor-icon="unicon-arrow-right icon-3"></div>
</div>

Options

Any of these options or classes can be applied to the component attribute. Separate multiple options or classes with a space.

[data-uc-cursor]

[data-uc-cursor-text]

[data-uc-cursor-icon]

[data-uc-cursor-stick]

[data-uc-magnetic]

JavaScript

Learn more about JavaScript components.

Cursor Initialization

const yourCursor = new UCCursor(options);

Cursor Options

Magnetic Initialization

$("[data-uc-magnetic]").each(function () {
    const $elements = this.dataset.ucMagnetic ? $(this).find(this.dataset.ucMagnetic) : $(this);
    $elements.each(function () {
        new UCMagnetic(this, yourCursor);
    });
});

Magnetic Options

Marquee Text

A creative, aesthetic Marquee text effects for your creative website.

With this component you can create a marquee text effect for your headlines, texts and even paragraphs, It is just a way to display texts in a creative and modern way, in sync with what is trend now, let's see how it works.

Usage

To apply this effect you need only to add the data-uc-marquee attribute to that element. but, you need to have an inner <div> element then the element you want effects to work on it.

<div data-uc-marquee> <!-- The parent element where the attribute should be! -->
    <div> <!-- This is the inner div which is required! -->
        <element> ... </element> <!-- The element that the effect will applied on! -->
    </div>
</div>

This is an example of how it works and how the html structure should be.

<div data-uc-marquee>
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Clone

If you have a less content or a small sized content you may have to add a clone option to that element data attribute. true equal clone one more time but you can set a number as many as clone times you may need.

<!-- Clone your content one time -->
<div data-uc-marquee="clone: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

<!-- Clone your content 3 times -->
<div data-uc-marquee="clone: 3;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Pause on hover

You can give the user the ability to pause the animation when mouse enter the marquee text by adding hover: true; option to that element data attribute.

<div data-uc-marquee="hover: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Reverse

You can reverse the marquee text direction by adding reverse: true; option to that element data attribute.

<div data-uc-marquee="reverse: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Speed

You can change the speed to the marquee text by adding speed: {1 to n}; option to that element data attribute.

<div data-uc-marquee="speed: 50;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Gap

You can set a gap to the marquee text to create a space between the cloned content by adding gap: {1 to n}; option to that element data attribute.

<div data-uc-marquee="clone: 2; gap: 20;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.