Javascript Modules List

Code

Copy to clipboard

<code>textToCopy</code>
Preview
Click me - Copy to clipboard

You can use the html code tag to automatically copy the content within, while clicked.

data-code="textToCopy"
Preview
Click me – Copy to clipboard

You can Add the data “data-code” and the item will become clickable and copy the content within the data.

data-code
Preview
Click me – Copy to clipboard

If the data is empty, the text in the data will be copied.

Toggle Content

Toggle Content (Default/Hidden)

js--toggle-content js--toggle-click js--toggle 
<div class="js--toggle-content">
    <button class="btn js--toggle-click">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
    <p class="js--toggle">Here is a superb paragraph to toggle.</p>
</div>
Preview

Here is a superb paragraph to toggle.

Adding the class ‘js–toggle-click’, the element will become clickable, will try to find the parent class ‘js–toggle-content’ and then look for the class or id passed as parameter within the ‘data-toggle’. The class ‘js–toggle-active’ will be added on the clickable element when toggled.

Toggle Content (Visible/Active)

js--toggle-active 
<div class="js--toggle-content">
    <button class="btn js--toggle-click js--toggle-active">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
    <p class="js--toggle js--toggle-active">Here is a superb paragraph to toggle.</p>
</div>
Preview

Here is a superb paragraph to toggle.

By adding the class ‘js–toggle-active’ on the clickable element and the toggle element, it will be visible by default.

Toggle Content anywhere with data toggle

data-toggle=".class-to-toggle" 
<button class="btn js--toggle-click" data-toggle=".class-to-toggle">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
<p class="class-to-toggle hidden">Here is a superb paragraph to toggle.</p>
Preview

By adding the ‘data-toggle’ with the class/id to find, it will try to find this target anywhere within the DOM and toggle it. Can be useful to toggle an element outside of the component you are developing.

Toggle Content (Default/Hidden)

data-toggle-content="hide" 
<div class="js--toggle-content" data-toggle-content="hide">
    <button class="btn js--toggle-click">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
    <p class="js--toggle">Here is a superb paragraph to toggle.</p>
</div>
<div class="js--toggle-content" data-toggle-content="hide">
    <button class="btn js--toggle-click">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
    <p class="js--toggle">Here is a superb paragraph to toggle.</p>
</div>
<div class="js--toggle-content" data-toggle-content="hide">
    <button class="btn js--toggle-click">Toggle content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1603 652" viewBox="0 0 1603 652"><path d="M801 652c-19.6 0-39.1-5.5-56.3-16.4l-696-442c-49-31.1-63.4-96-32.3-144.9 31.1-49 96-63.4 144.9-32.3l639.8 406.3 640.7-406.3c49-31.1 113.8-16.5 144.9 32.4 31.1 49 16.5 113.8-32.4 144.9l-697 442C840.1 646.6 820.5 652 801 652z"/></svg></button>
    <p class="js--toggle">Here is a superb paragraph to toggle.</p>
</div>
Preview

Here is a superb paragraph to toggle.

Here is a superb paragraph to toggle.

Here is a superb paragraph to toggle.

Adding the ‘data-toggle-content=”hide”‘ on the class ‘js–toggle-content’ will automatically hide every other items before showing the item you clicked on. This will only work without the parameter ‘data-toggle’ on each item.

Countdown

Date Countdown

<div class="js--countdown" data-date="Dec 31 2024 24:00:00">
    <div class="counter">
        <span class="value" data-days>0</span>
        <span class="suffix">Days</span>
    </div>
    <div class="counter">
        <span class="value" data-hours>0</span>
        <span class="suffix">Hours</span>
    </div>
    <div class="counter">
        <span class="value" data-minutes>0</span>
        <span class="suffix">Mins</span>
    </div>
    <div class="counter">
        <span class="value" data-seconds>0</span>
        <span class="suffix">Secs</span>
    </div>
</div>
Preview
0 Days
0 Hours
0 Mins
0 Secs

Adding this html with the correct parameter “data-date” will create a countdown with days, hours, minutes and seconds until the specific date.

Fancybox

Image

<a href="https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg">
    <img class='c--image' src='https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg'>
</a>
Preview

Video

<a href="https://www.youtube.com/watch?v=Scxs7L0vhZ4&ab_channel=MortenRustad">
    <img class='c--image' src='https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg'>
</a>
Preview

Gallery

<div class="row">
    <div class="col col-md-8 col-24">
        <a href="https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg" data-fancybox="gallery">
            <img class='c--image' src='https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg'>
        </a>
    </div>
    <div class="col col-md-8 col-24">
        <a href="https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg" data-fancybox="gallery">
            <img class='c--image' src='https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg'>
        </a>
    </div>
    <div class="col col-md-8 col-24">
        <a href="https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg" data-fancybox="gallery">
            <img class='c--image' src='https://jeremielb.me/wp-content/themes/custom/img/placeholder.jpg'>
        </a>
    </div>
</div>
Preview

Google Map

<button class="btn" data-fancybox data-src="https://www.google.com/maps/place/Montreal,+QC/@45.5259455,-73.6575727,11.67z">Google Map</button>
Preview

Iframe – External

<button class="btn" data-fancybox data-type="iframe" data-src="https://www.w3.org">Iframe</button>
Preview

Iframe – Internal

<button class="btn" data-fancybox data-src="#iframe-fancybox">Iframe</button>
<div id="iframe-fancybox" style="display:none;">
    <h2>Title Iframe</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, eligendi vero! Possimus, iure, facere est esse dolorum, quod necessitatibus eligendi ullam sit nemo aspernatur ducimus excepturi aut deserunt autem! Perferendis.</p>
</div>
Preview

Filter

<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>
 
<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>
Preview

Box 1

Box 2

Box 3

Box 4

Form

Select

<div class="c--form">
    <select name="cars" class="js--select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</div>
Preview

By adding the class ‘js–select’ to a select html tag will make a change the original select for a custom select and dropdown layout.

Input/Textarea

<div class="c--form">
    <div class="c--input">
        <input id="input-id-1" type="text">
        <label for="input-id-1">Placeholder text</label>
    </div>
</div>
Preview
<div class="c--form">
    <div class="c--input">
        <textarea id="input-id-1"></textarea>
        <label for="input-id-1">Placeholder text</label>
    </div>
</div>
Preview

While using the class “c–input” and the input/label within, there will be a class “active” added to the component while focusing on the input and a class “not-empty” when there is content within the input.

Hamburger Menu

Hamburger Menu

<div class="c--hamburger-menu js--header-height" aria-label="Open menu" aria-expanded="false" aria-controls="c--toggle-hamburger-menu">
    <div class="content-icon">
        <div class="content-rotate">
            <div class="border-icon"></div>
            <div class="border-icon"></div>
            <div class="border-icon"></div>
            <div class="border-icon"></div>
        </div>
    </div>
    <div class="content-animate"></div>
</div>

Clickable element that will toggle the “c–toggle-hamburger-menu” when clicked.

Toggle Hamburger Menu

<div id="c--toggle-hamburger-menu" class="c--toggle-hamburger-menu">
    <!-- Content Here -->
</div>

Content that will be toggled while “c–hamburger-menu” is clicked on, hidden by default.

Header

Header Height

<div class="js--header-height"></div>
Preview

By adding the class ‘js–header-height’ to a div, the div will have the exact height of the header “block–header”.

Back to Top

<div class="c--back-to-top" data-scroll-to="top">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 319.9 379.3"><path d="M310.3 128.5L180.1 8l-.1-.1-.3-.3c-.2-.1-.3-.3-.5-.4-.1-.1-.2-.1-.3-.2-.1-.1-.2-.2-.4-.3-.2-.2-.4-.3-.6-.5l-.2-.2c-.1-.1-.2-.2-.4-.3-.2-.2-.4-.3-.6-.4-.1 0-.1-.1-.2-.1-.1-.1-.3-.2-.4-.2-.2-.1-.4-.3-.7-.4-.1 0-.1-.1-.2-.1-.1-.1-.3-.2-.4-.2-.1-.1-.3-.2-.4-.2-.2-.1-.3-.2-.5-.3-.1-.1-.3-.1-.4-.2-.2-.1-.5-.3-.7-.4-.1 0-.1-.1-.2-.1-.1-.1-.3-.1-.4-.2-.3-.1-.5-.2-.8-.3 0 0-.1 0-.1-.1-.2-.1-.3-.1-.5-.2s-.5-.2-.7-.3c-.2-.1-.4-.2-.6-.2-.2-.1-.5-.2-.7-.2-.2-.1-.5-.1-.7-.2-.2-.1-.4-.1-.7-.2-.2-.1-.5-.1-.7-.2-.2-.1-.4-.1-.7-.2-.2-.1-.5-.1-.7-.2-.2 0-.5-.1-.7-.1-.2 0-.5-.1-.7-.1-.3 0-.5-.1-.8-.1-.2 0-.4-.1-.7-.1-.3 0-.6 0-.9-.1h-.5-3.5c-.3 0-.6 0-.9.1-.2 0-.4.1-.7.1-.2 0-.5.1-.7.1-.2 0-.5.1-.7.1-.2 0-.4.1-.7.1-.3 0-.5.1-.8.2-.2 0-.4.1-.6.1-.2.1-.5.1-.7.2-.2.1-.4.1-.6.2-.2.1-.5.1-.7.2-.2.1-.4.1-.7.2-.2.1-.3.1-.5.2h-.1-.1c-.2.1-.5.2-.7.3-.2.1-.3.1-.5.2-.1 0-.1.1-.2.1-.2.1-.5.2-.7.3-.2.1-.3.1-.5.2-.1 0-.1.1-.2.1-.2.1-.4.2-.7.3-.1.1-.3.2-.4.2-.3.2-.6.3-.8.5-.1.1-.3.2-.4.3-.1 0-.1.1-.2.1-.2.1-.4.3-.7.4-.1.1-.3.2-.4.3-.1 0-.1.1-.2.1-.2.1-.4.3-.6.5-.1.1-.2.2-.4.3l-.2.2c-.2.1-.4.3-.6.5-.1.1-.2.2-.4.3-.1.1-.2.1-.3.2-.2.1-.3.3-.5.4l-.3.3-.1.1L9.6 128.5C-2.6 139.8-3.3 158.8 8 170.9c11.3 12.1 30.3 12.8 42.4 1.6l79.3-73.6v250.5c0 16.6 13.4 30 30 30s30-13.4 30-30V98.6l79.8 73.9c12.2 11.3 31.1 10.5 42.4-1.6 11.3-12.2 10.5-31.2-1.6-42.4z"/></svg>
</div>
Preview

If the component “c–back-to-top” is added to the page, this component will be shown scrolling paste a certain amount of pixels, so that the user will be able to click on it to scroll back to the top of the page.

Additionals behaviors

The class “state–header-down” will be added to the body when the user scroll down, that class will be removed as the user scrolls up.

Hover Parent

<div class="js--hover-parent">
    <a href="#" class="btn">Button 1</a>
    <a href="#" class="btn">Button 2</a>
    <a href="#" class="btn">Button 3</a>
</div>
 
.js--hover-parent{
    .btn{
        .no-touchevents &:hover{
            opacity:1;
        }
    }

    &.hover-parent-active{
        .btn{
            opacity:0.4;
        }
    }
}
Preview
Button 1 Button 2 Button 3

Adding the class “js–hover-parent” to a parent element will select “a” and “button” tag, when hovered, a class “hover-parent-active” will be added to the parent “js–hover-parent”. With that new class, you can target styles to all buttons (0.4 opacity, for example) and either remove that opacity or add new style to the specific button hovered. Usually used to put highlight on the button hovered by changing styles on the other buttons.

Lazy Load

<img class="lazy" src="img-small.jpg" data-src="img-big.jpg">
Preview

Adding the class “js–hover-parent” to a parent element will select “a” and “button” tag, when hovered, a class “hover-parent-active” will be added to the parent “js–hover-parent”. With that new class, you can target styles to all buttons (0.4 opacity, for example) and either remove that opacity or add new style to the specific button hovered. Usually used to put highlight on the button hovered by changing styles on the other buttons.

Menu Follow

<div class="js--menu-follow" data-list-elements=".class-element-follow"></div>

The class “js–menu-follow” will trigger the component to initiate. Adding the “data-list-elements” will search for this selector and make a list of items with that selector.

<div class="class-element-follow" data-element-menu-follow-text="Title Element Follow"></div>

This element only works in combination with the main component “js–menu-follow” and using the same class listed in the “data-list-elements”. This will make an item within the main component and automatically scroll to that element. The value of the “data-element-menu-follow-text” will be used as title for that item. There can be as many of these as you want.

Modernizr

Modernizr is a javascript library that tells you what Html, Css and javascript features the user’s browser has to offer.

For example, if the “touchevents” feature is supported or not, the class “touchevents” or “no-touchevents” class will be added to the html tag.

Modernizr Custom Build

Scroll To

Scroll To – Element

<button data-scroll-to=".class-to-scroll">Scroll to Element</button>
Preview

Adding “data-scroll-to” with a selector inside will make the element clickable and scroll to the element.

Scroll To – Top

<button data-scroll-to="top">Scroll Top</button>
Preview

Adding the value “top” will scroll the user to the top of the page.

Scroll To – Bottom

<button data-scroll-to="bottom">Scroll Bottom</button>
Preview

Adding the value “bottom” will scroll the user to the bottom of the page.

Scroll To – Next Block

<button data-scroll-to>Scroll to Next Block</button>
Preview

Adding the value to none or if the class/id element is not found, it will scroll to the next “.block” and has to be used within a “.block” in order to work.
*Can be useful in some hero banner to automatically scroll to the next section.

Slider

Slider Default – Navigation, Pagination and Scrollbar

<div class="swiper js--slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 1</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 2</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 3</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
    </div>

    <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>
    <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
</div>
Preview

Swiper Slide 1

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 2

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 3

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

This example is the whole structure with the pagination, navigation and scrollbar. Adding this html example structure will automatically add the slider and the content within each “swiper-slide” can be modified.

Slider 2 frames – Navigation, Pagination and Scrollbar

<div class="swiper js--slider-2-frames">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 1</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 2</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 3</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
    </div>

    <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>
    <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
</div>
Preview

Swiper Slide 1

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 2

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 3

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

This example has 2 frames.

Slider 3 frames – Navigation, Pagination and Scrollbar

<div class="swiper js--slider-3-frames">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 1</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 2</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 3</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 4</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="content-preview-slide">
                <h3>Swiper Slide 5</h3>
                <p>Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.</p>
            </div>
        </div>
    </div>

    <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>
    <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 604 1088"><path d="M459.1 544L17.6 985.6c-23.4 23.4-23.4 61.4 0 84.9 23.4 23.4 61.4 23.4 84.9 0l484-484c23.4-23.4 23.4-61.4 0-84.9l-484-484C90.7 5.9 75.4 0 60 0S29.3 5.9 17.6 17.6C-5.9 41-5.9 79 17.6 102.4L459.1 544z"/></svg>
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-scrollbar"></div>
</div>
Preview

Swiper Slide 1

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 2

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 3

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 4

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

Swiper Slide 5

Maecenas eget vehicula tortor. Curabitur facilisis, odio vitae auctor sagittis, nisi nisl ultricies quam, hendrerit congue nulla mauris quis nisl. Integer maximus varius orci, vel luctus arcu cursus.

This example has 3 frames.

Scroll Event

Toggle Class

scroll--toggle-class

Preview – I’m toggled

Preview – I’m toggled

Preview – I’m toggled

Preview – I’m toggled

Add the class “scroll-active” while active.

Animate Opacity

scroll--opacity

Preview

Preview

Preview

Preview

Add the class “scroll-active” while active.

Animate Translate X

scroll--translate-x

Preview

Preview

Preview

Preview

Add the class “scroll-active” while active.

Animate Translate X Reverse

scroll--translate-x-reverse

Preview

Preview

Preview

Preview

Add the class “scroll-active” while active.

Animate Translate Y

scroll--translate-y

Preview

Preview

Preview

Preview

Add the class “scroll-active” while active.

Animate Translate Y Reverse

scroll--translate-y-reverse

Preview

Preview

Preview

Preview

Add the class “scroll-active” while active.

Parallax X

<div class="js--parallax-x" data-parallax-x="50"></div>

Preview X – 0

Preview X – 100

Preview X – 200

Preview X – 300

Preview X – 400

Preview X – 500

Preview X – 600

Preview X – 700

Preview X – 800

Preview X – 900

Preview X – 1000

Preview X – 1100

Preview X – 1200

Parallax X Enter

<div class="js--parallax-x-enter" data-parallax-x="50"></div>

Preview X Enter – 0

Preview X Enter – 100

Preview X Enter – 200

Preview X Enter – 300

Preview X Enter – 400

Preview X Enter – 500

Preview X Enter – 600

Preview X Enter – 700

Preview X Enter – 800

Preview X Enter – 900

Preview X Enter – 1000

Preview X Enter – 1100

Preview X Enter – 1200

Parallax Y

<div class="js--parallax-y" data-parallax-y="50"></div>

Preview Y – 0

Preview Y – 5

Preview Y – 10

Preview Y – 15

Preview Y – 20

Preview Y – 25

Preview Y – 30

Preview Y – 35

Preview Y – 40

Preview Y – 45

Preview Y – 50

Preview Y – 55

Preview Y – 60

Parallax Y Enter

<div class="js--parallax-y-enter" data-parallax-y="50"></div>

Preview Y Enter – 0

Preview Y Enter – 5

Preview Y Enter – 10

Preview Y Enter – 15

Preview Y Enter – 20

Preview Y Enter – 25

Preview Y Enter – 30

Preview Y Enter – 35

Preview Y Enter – 40

Preview Y Enter – 45

Preview Y Enter – 50

Preview Y Enter – 55

Preview Y Enter – 60

Parallax Scale

<div class="js--parallax-scale" data-parallax-scale="0.6"></div>

Preview Scale – 0.1

Preview Scale – 0.3

Preview Scale – 0.5

Preview Scale – 0.7

Preview Scale – 0.9

Preview Scale – 1.1

Preview Scale – 1.3

Preview Scale – 1.5

Preview Scale – 1.7

Preview Scale – 1.9

Parallax Scale Enter

<div class="js--parallax-scale-enter" data-parallax-scale="0.6"></div>

Preview Scale Enter – 0.1

Preview Scale Enter – 0.3

Preview Scale Enter – 0.5

Preview Scale Enter – 0.7

Preview Scale Enter – 0.9

Preview Scale Enter – 1.1

Preview Scale Enter – 1.3

Preview Scale Enter – 1.5

Preview Scale Enter – 1.7

Preview Scale Enter – 1.9

Parallax Custom Timeline

Parallax Custom Timeline














Pin Top

scroll--pin-top

Preview

todooooooo

Add the class “scroll-active” while active.



































Skip to Main Content