In-House Components

Appear Animations

A collection of smooth animations to use within your page via Anime.js library.

We used Anime.js library for animations, is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Usage

We made it easy to deal with Anime.js and even easy to implement just by using data attributes instead of initiating animations via javascript code.

To configure Anime.js, use the data-anime attribute and thier options or our built-in options below. It supports 3 different modes so the animations will start when element clicked, hovered or when it's on viewport, more details on the options table below.

For the Appear Animations mode to work you should add onview: true or onview: {offset_number} to start animations as it appears!

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

Staggering

Staggering allows you to animate multiple elements with follow through and overlapping action by adding this function to delay property anime.stagger(value, options) and you have to add data-anime="targets: .selector" to the parent element with the animations options.

<!-- 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">Hello World!</h4>
    <p class="element">Lorem ipsum dolor sit amet.</p>
    <button class="element">Get started</button>
</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.

Nav

A custom navigation built with flexbox and provide a strong foundation for building all types of navigation components.

Vertical

Use .nav-y for vertical (y-axis) navigation, you can add .hr on <li> element as an horizontal separator.

<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>

Horiztonal

Use .nav-x for horizontal (x-axis) navigation, you can add .vr on <li> element as a vertical separator.

<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>

Spacing

You can customize the navigation spacing by using .gap-* to create a gap/space between nav items it works for the both directions.

<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>

Nav + icon

You can add icons to your navigation, and they will fit seamlessly into place.

<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 support

By default the navigation component support RTL languages for example use dir="rtl" attribute to see it in action.

<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

Create Modal dialogs with different styles and transitions.

Usage

The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the data-uc-toggle attribute. An <a> element needs to be linked to the modal's id. If you are using another element, like a button, just add the data-uc-toggle="target: #ID" attribute to target the id of the modal container.

Add the data-uc-modal attribute to a <div> element to create the modal container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling. Use the following classes to define the modal's sections.

<!-- 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 and footer

To divide the modal into different content sections use panel, padding p-{*} and 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>

Full modifier

To create a modal, that fills the entire page, add the uc-modal-full class. It is also recommended adding the .uc-modal-close-full class to the close button, so that it adapts its styling.

<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>

Close behavior

To create a close button, enable its functionality and add proper styling and positioning using one of the classes below.

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 LitLink!</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 LitLink!</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 LitLink!</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.