Animations

01. Global Animations 02. Custom Animations 03. Folded Animations 04. Custom Tag Animations 05. Scroll Animations 06. Sticky Animations 07. Animated Links 08. Animated Titles 09. Animated Buttons 10. Floating Animations

01. Global Animations

Copy one of the codes below and paste it into the content section as a Widget/HTML module to activate the global animation effects.

The animations will be applied to all Jimdo modules of content section.

Fade In 


<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $('.hs-content .j-module').each(function() {
            var $module = $(this);
            
            // Check if this module contains a fullwidth element
            if ($module.find('.is-fullwidth, .hs-fullwidth,.has-sticky').length) {
                // If there's an is-anim-block inside, animate only that
                $module.find('.is-anim-block').each(function() {
                    $(this).addClass('is-anim');
                });
            } else {
                // If no fullwidth class inside, apply animation to the module
                if (!$module.find('.is-matrix-block .is-anim-block').length) {
                    $module.addClass('is-anim');
                }
            }
        });

        // Animate matrix blocks with .is-anim-block
        $('.is-matrix-block .is-anim-block').each(function() {
            $(this).addClass('is-anim');
        });

        // WOW.js initialization
        wow = new WOW({
            boxClass:     'is-anim',
            animateClass: 'animate__animated animate__fast animate__fadeIn',
            mobile:       true,
            offset:       50
        });
        wow.init();
    });
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    Global animations
</div>

Slide Up 


<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $('.hs-content .j-module').each(function() {
            var $module = $(this);
            
            // Check if this module contains a fullwidth element
            if ($module.find('.is-fullwidth, .hs-fullwidth,.has-sticky').length) {
                // If there's an is-anim-block inside, animate only that
                $module.find('.is-anim-block').each(function() {
                    $(this).addClass('is-anim');
                });
            } else {
                // If no fullwidth class inside, apply animation to the module
                if (!$module.find('.is-matrix-block .is-anim-block').length) {
                    $module.addClass('is-anim');
                }
            }
        });

        // Animate matrix blocks with .is-anim-block
        $('.is-matrix-block .is-anim-block').each(function() {
            $(this).addClass('is-anim');
        });

        // WOW.js initialization
        wow = new WOW({
            boxClass:     'is-anim',
            animateClass: 'animate__animated animate__fast animate__fadeInUp',
            mobile:       true,
            offset:       50
        });
        wow.init();
    });
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    Global animations
</div>

Scale 


<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $('.hs-content .j-module').each(function() {
            var $module = $(this);
            
            // Check if this module contains a fullwidth element
            if ($module.find('.is-fullwidth, .hs-fullwidth,.has-sticky').length) {
                // If there's an is-anim-block inside, animate only that
                $module.find('.is-anim-block').each(function() {
                    $(this).addClass('is-anim');
                });
            } else {
                // If no fullwidth class inside, apply animation to the module
                if (!$module.find('.is-matrix-block .is-anim-block').length) {
                    $module.addClass('is-anim');
                }
            }
        });

        // Animate matrix blocks with .is-anim-block
        $('.is-matrix-block .is-anim-block').each(function() {
            $(this).addClass('is-anim');
        });

        // WOW.js initialization
        wow = new WOW({
            boxClass:     'is-anim',
            animateClass: 'animate__animated animate__fast animate__scale',
            mobile:       true,
            offset:       50
        });
        wow.init();
    });
})(jQuery);
//]]>

</script>
<div class="matrix-msg invisible">
    Global animations
</div>

Flip 


<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $('.hs-content .j-module').each(function() {
            var $module = $(this);
            
            // Check if this module contains a fullwidth element
            if ($module.find('.is-fullwidth, .hs-fullwidth,.has-sticky').length) {
                // If there's an is-anim-block inside, animate only that
                $module.find('.is-anim-block').each(function() {
                    $(this).addClass('is-anim');
                });
            } else {
                // If no fullwidth class inside, apply animation to the module
                if (!$module.find('.is-matrix-block .is-anim-block').length) {
                    $module.addClass('is-anim');
                }
            }
        });

        // Animate matrix blocks with .is-anim-block
        $('.is-matrix-block .is-anim-block').each(function() {
            $(this).addClass('is-anim');
        });

        // WOW.js initialization
        wow = new WOW({
            boxClass:     'is-anim',
            animateClass: 'animate__animated animate__fast animate__flipInXSmall',
            mobile:       true,
            offset:       50
        });
        wow.init();
    });
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    Global animations
</div>

It is not considered best practice to implement global animations throughout the entire website, particularly if they are added to the footer. This can potentially create a negative user experience and decrease overall performance. It would be more beneficial to only apply animations to specific elements or sections as necessary

02. Custom Animations

You can manually apply animation effects to individual widgets by wrapping any elements in custom animation classes, like this: 


<div class="wow animate__animated animate__fadeInUp">
<h3> This is an animated heading. </h3>
</div>

Most popular animations effects:

  • fadeIn
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUp
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight

 

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

All available classes can be found on the official Animate.css website.

 

Utility classes

You can add delays directly on the element's class attribute, just like this: 


<div class="wow animate__animated animate__delay-2s animate__slideInUp">
<h3> This is an animated heading. </h3>
</div>
  • animate__delay-2s
  • animate__delay-3s
  • animate__delay-4s
  • animate__delay-5s

You can control the speed of the animation by adding these classes, as below: 


<div class="wow animate__animated animate__fast animate__slideInUp">
<h3> This is an animated heading. </h3>
</div>
  • animate__slow
  • animate__slower
  • animate__fast
  • animate__faster

Since Animate.css comes with the Wow.js plugin, you can use data attributes for customizations, like this: 


<div class="wow animate__animated animate__slideInUp" data-wow-duration="0.2s" data-wow-delay="0.5s">
<h3> This is an animated heading. </h3>
</div>
  • data-wow-duration: Change the animation duration
  • data-wow-delay: Delay before the animation starts
  • data-wow-offset: Distance to start the animation (related to the browser bottom)
  • data-wow-iteration: Number of times the animation is repeated

03. Folded Animations

The folded animations come with Wow.js and allow you to create a folded effect for images or entire widget blocks.

All you need to do is apply the appropriate class: for example, wow is-folded-left-img for an image folded effect, or wow is-folded-left for the entire widget block, which can contain text or any other elements:

Matrix Themes

What's new in 2024 Tech

special price

Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.


See more 

What's new in 2024 Tech

special price

Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.


See more  

 <div class="col-6 wow is-folded-left-img">
        <img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/5reasons.jpg?t=1696715613" alt="Matrix Themes" />
 </div>

All available options:

  • wow is-folded-left
  • wow is-folded-right
  • wow is-folded-top
  • wow is-folded-bottom
  • wow is-folded-middle-left-right
  • wow is-folded-middle-top-bottom
  • wow is-folded-middle-corner
  • wow is-folded-blur
  • wow is-flip-left-right
  • wow is-flip-right-left
  • wow is-skew-left
  • wow is-skew-right

04. Custom Tag Animations

The custom animations and folded effects mentioned above demonstrate how to apply them to 'Widget/HTML' elements, which you can directly edit. However, for default Jimdo elements, such as the 'Photo' or 'Text with Photo' modules, you can use the same animations by adding the appropriate classes within a variable tag.

To begin, display your image inside the 'Columns' module. Then, within the same column, add another 'Widget/HTML' module, like this: 


<var>wow is-folded-left-img</var>




<var>wow animate__animated animate__fadeInUp</var>

Please note that when adding custom tag animations, the effects will apply to the entire module's columns. To apply individual animations to each column separately, you should use the <ins> tag instead of the <var> tag, adding it to each column.

05. Scroll Animations

Based on the Enllax.js plugin, with additional direction and effect options, you can apply a parallax scrolling effect to any element using different data attributes, like this: 


<div class="col-6 resp-img">
   <img src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground" />
</div>

To allow scrolling element to move with different speed, just use a data attribute with a numeric value as a multiplier for scrolling speed. Less is slower, and 1 is normal. Here's an example: 


<div data-enllax-ratio="0.5">...</div>

All options

  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="horizontal"
  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="horizontal-reverse"
  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="vertical"
  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="vertical-reverse"
  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="zoom-out"
  • data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="spin"

Premade block sections with different scrolling effects

Scroll Animation 01 


<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots col-4 m-col-10 m-absolute opacity-02 is-fluid" style="height: 80%; left: 0%; top:0%;">
        </div>

        <div class="col-6 resp-img rel-mobile br25" style="left: 10%;top:50%;">
            <img class="rel-mobile-only" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground" />
        </div>

        <div class="col-6 is-fluid m-pull-top-30 color-white has-mobile-fullwidth-btn" style="left: 40%; top: 30%;">
            <h3>
                The Choice Is Yours.
            </h3>
            <br />

            <p>
                Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.
            </p>
            <br />
            <a class="hs-button bg-round bg-white" href="https://www.matrix-themes.com/" target="">Read more</a><br />
        </div>
    </div>
</div>

Scroll Animation 02 


<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-6 m-col-10 is-fluid" style="height: 95%; left:auto;right:0%; top: 0%;">
        </div>

        <div class="col-6 resp-img rel-mobile" style="left: 40%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type=
            "foreground" />
        </div>

        <div class="col-6 add-20 bg-white br20 has-shadow is-fluid m-pull-top-50 has-mobile-fullwidth-btn" style="left: 0%; top: 30%;">
            <h3>
                The Choice Is Yours.
            </h3>
            <br />

            <p>
                Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.
            </p>
            <br />
            <a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Read more</a><br />
        </div>
    </div>
</div>

Scroll Animation 03 


<div class="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-11 m-col-10 is-fluid" style="height: 95%; left:0;right:0%; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 4%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground"
            data-enllax-direction="horizontal" />
        </div>

        <div class="col-6 is-fluid m-pull-top-50 has-mobile-fullwidth-btn" style="left: 40%; top: 30%;">
            <div class="add-20 has-check-list-2 green-color bg-white br20 has-shadow" data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="horizontal-reverse">
                <h3>
                    Our features
                </h3>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Scroll Animation 04 


<div class="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-11 m-col-10 is-fluid" style="height: 95%; left:0;right:0%; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 30%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground"
            data-enllax-direction="horizontal-reverse" />
        </div>

        <div class="col-6 is-fluid m-pull-top-50 has-mobile-fullwidth-btn" style="left: 4%; top: 30%;">
            <div class="add-20 has-check-list-2 green-color bg-white br20 has-shadow" data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="horizontal">
                <h3>
                    Our features
                </h3>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>;

Scroll Animation 05 


<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-11 m-col-10 is-fluid" style="height: 95%; left:0;right:0%; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 15%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".2" data-enllax-type="foreground"
            data-enllax-direction="zoom-out" />
        </div>

        <div class="col-6 is-fluid m-pull-top-50 has-mobile-fullwidth-btn" style="left: 23%; top: 50%;">
            <div class="add-20 has-mobile-fullwidth-btn bg-white br20 has-shadow" data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="vertical">
                <h3>
                    The Choice Is Yours.
                </h3>
                <br />

                <p>
                    Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.
                </p>
                <br />
                <a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Read more</a><br />
            </div>
        </div>
    </div>
</div>

Scroll Animation 06 


<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-6 m-col-10 is-fluid" style="height: 80%; left:0; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 5%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".1" data-enllax-type="foreground"
            data-enllax-direction="vertical-reverse" />
        </div>

        <div class="col-4 is-fluid cc-box" style="left:50%; top:20%;">
            <div class="is-matrix opacity-6 color-white br20 has-mobile-fullwidth-btn fluid-bg add-30" data-enllax-ratio=".1" data-enllax-type="foreground" data-enllax-direction="vertical">
                <h3>
                    The Choice Is Yours.
                </h3>
                <br />

                <p>
                    Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.
                </p>
                <br />
                <a class="hs-button bg-white bg-round" href="https://www.matrix-themes.com/" target="">Read more</a><br />
            </div>
        </div>
    </div>
</div>

Scroll Animation 07 


<div class="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-6 m-col-10 is-fluid" style="height: 80%; left:0; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 15%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".3" data-enllax-type="foreground"
            data-enllax-direction="zoom-out" />
        </div>

        <div class="col-2 center-align is-fluid m-pull-top-50 cc-box" style="left:0; top:60%;">
            <div class="is-matrix bg-primary color-white br500 has-mobile-fullwidth-btn fluid-bg add-20" style="height:150px;width:150px; align-content:center;" data-enllax-ratio=".2"
            data-enllax-type="foreground" data-enllax-direction="spin">
                <div class="fa fa-thumbs-up fa-5x">
                </div>

                <p class="hs-center add-top-20">
                    Recommended by Jimdo Experts
                </p>
            </div>
        </div>

        <div class="col-4 is-fluid cc-box" style="right:0%;left:auto;">
            <div class="is-matrix bg-white has-shadow has-check-list-2 green-color br20 add-30 fluid-bg" data-enllax-ratio=".3" data-enllax-type="foreground" data-enllax-direction="vertical-reverse">
                <h3>
                    Our features
                </h3>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Scroll Animation 08 


<div class="is-matrix-block hs-fullwidth bg-primary-light cc-clearover">
    <div class="inner is-fluid-area is-fluid m-custom-height" style="padding:50px 0;">
        <div class="mask-section mask-dots fluid-pattern opacity-02 col-6 m-col-10 is-fluid" style="height: 80%; left:0; top: 5%;">
        </div>

        <div class="col-8 resp-img rel-mobile" style="left: 15%; top: 11%;">
            <img class="rel-mobile-only br20" src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/img/m-stock-05.jpg" alt="Matrix Themes" data-enllax-ratio=".3" data-enllax-type="foreground"
            data-enllax-direction="zoom-out" />
        </div>

        <div class="col-4 is-fluid cc-box" style="right:0%;left:auto;">
            <div class="is-matrix bg-white has-shadow has-check-list-2 green-color br20 add-30 fluid-bg" data-enllax-ratio=".3" data-enllax-type="foreground" data-enllax-direction="vertical-reverse">
                <h3>
                    Our features
                </h3>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
                <br />

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-6 is-fluid cc-box" style="left:0; top:60%;">
            <div class="is-matrix bg-primary color-white br20 has-mobile-fullwidth-btn fluid-bg add-30" data-enllax-ratio=".2" data-enllax-type="foreground" data-enllax-direction="vertical">
                <h3>
                    The Choice Is Yours.
                </h3>
                <br />

                <p>
                    Make your website look better with Matrix themes and easy-to-use design tools. Create a simple, attractive site that keeps visitors interested and helps you succeed online.
                </p>
                <br />
                <a class="hs-button bg-white bg-round" href="https://www.matrix-themes.com/" target="">Read more</a><br />
            </div>
        </div>
    </div>
</div>

06. Sticky Animations

Sticky animations enable you to fix any element in position until it is dynamically "unstuck" by another element. These can be applied within columns or as standalone modules.

Usage Instructions

1. Apply the class has-sticky to any custom widget to make it adopt a fixed position on scroll.

2. Add the class has-sticky-destroy to another element; when this element reaches the top of the sticky element during scrolling, it will deactivate (unstick) the sticky behavior.

Sticky elements 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script> 
<script type="text/javascript">


//<![CDATA[
jQuery.noConflict();
(function($) {
  $(document).ready(function() {
      if ($('body').hasClass('matrix')) {
      return; // Exit if in admin mode, no sticky effect will be applied
    }
    const controller = new ScrollMagic.Controller();
    const stickyEls = document.querySelectorAll(".has-sticky");
    const destroyEl = document.querySelector(".has-sticky-destroy");
          const manualOffset = document.querySelector(".sticky-wrapper") ? document.querySelector(".sticky-wrapper").offsetHeight : 100;

      // const manualOffset = 100;

    const stickyScenes = [];

    stickyEls.forEach((el) => {
      el.style.position = 'relative';
      const img = el.querySelector('img');
      if (img) {
        el.style.minHeight = img.offsetHeight + "px";
      }

      const scene = new ScrollMagic.Scene({
        triggerElement: el,
        triggerHook: manualOffset / window.innerHeight,
        duration: document.body.scrollHeight
      })
      .setPin(el, { pushFollowers: false })
      .addTo(controller);

      stickyScenes.push(scene);
    });

    if (destroyEl) {
      new ScrollMagic.Scene({
        triggerElement: destroyEl,
        triggerHook: manualOffset / window.innerHeight,
        duration: 0
      })
      .on("enter", function() {
        stickyScenes.forEach(scene => scene.enabled(false));
      })
      .on("leave", function() {
        stickyScenes.forEach(scene => scene.enabled(true));
      })
      .addTo(controller);
    }

  });
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    Sticky
</div>

07. Animated Links

Style 01 

<a class="link-flash has-link-dark" href="http://www.matrix-themes.com/templates/" target="">Link Flash</a>

Style 02 

<a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Link Outlined</a>

Style 03 

<a class="link-outlined line-bold" href="http://www.matrix-themes.com/templates/" target="">Link Outlined bold</a>

Style 04 

<a class="link-outlined line-extra-bold" href="http://www.matrix-themes.com/templates/" target="">Link Outlined extra bold</a>

Style 05 

<a class="link-outlined line-small" href="http://www.matrix-themes.com/templates/" target="">Link with small line</a>

Style 06 

 <a class="link-outlined" href="http://www.matrix-themes.com/templates/" target="">Link with arrow<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>

Style 07 

  <a class="link-outlined line-small" href="http://www.matrix-themes.com/templates/" target="">Link with small line<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>

Style 08 

  <a class="link-outlined no-line" href="http://www.matrix-themes.com/templates/" target="">Link with small line<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>

Style 09 

  <a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">Animated arrow<span class="arrow">&#160;</span></a>

Style 10 

  <a class="arrow-link is-dark" href="http://www.matrix-themes.com/templates/" target="">Animated arrow<span class="arrow">&#160;</span></a>

08. Animated Title

Style 01 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-anim-title is-big is-yellow">beautiful</span>
</h2>

Style 02 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-anim-title is-primary weight-800">bold</span>
</h2>

Style 03 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-anim-title is-small is-primary">unique</span>
</h2>

Style 04 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-anim-title is-extra-small is-primary weight-800">you love</span>
</h2>

Style 05 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-folded-left primary-color">Extraordinary</span>
</h2>

Style 06 

  <h2 style="font-size:40px;font-weight:600;">
    Create something <span class="wow is-folded-blur primary-color">Timeless</span>
</h2>

09. Animated buttons

Style 01 

  <a class="hs-button anim-btn" href="http://www.matrix-themes.com/" target="">Animated button 01</a>

Style 02 

 <a class="hs-button anim-btn ghost-primary" href="http://www.matrix-themes.com/" target="">Animated
button 02</a>

Style 03 

 <a class="hs-button anim-btn has-primary-color-border-shadow ghost-primary" href="http://www.matrix-themes.com/" target="">Animated button 03</a>

Use the class 'anim-up-down' as Alt TEXT for a single Jimdo image while the option with the variables will allows you to animate the whole column.

Style 04 

 <a class="hs-button anim-btn bg-dark" href="http://www.matrix-themes.com/" target="">Animated button 04</a>

Style 05 

 <a class="hs-button anim-btn ghost-dark" href="http://www.matrix-themes.com/" target=
"">Animated button 05</a>

Style 06 

 <a class="hs-button anim-btn ghost-dark has-border-shadow" href="http://www.matrix-themes.com/" target="">Animated button 06</a>

Style 07 

 <a class="hs-button anim-btn bg-white" href="http://www.matrix-themes.com/" target="">Animated button 07</a>

Style 08 

 <a class="hs-button anim-btn ghost-white" href="http://www.matrix-themes.com/" target=
    "">Animated button 08</a>

Style 09 

 <a class="hs-button anim-btn has-white-color-border-shadow ghost-white" href="http://www.matrix-themes.com/" target="">Animated button 09</a>

10. Floating Animations

anim-left-right
anim-up-down


<var> anim-up-down </var>




<var> anim-left-right </var>
Get started
Gobal colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
  footer border
 
Template configurations
 
has-sticky-logo has-large-header primary-font has-center-nav has-header-blur no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
size-15 weight-400
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form has-thin-border has-border-style-solid has-border-top has-footer-border-color
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Body text (p, table, td)
 
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

#cc-inner .my-class {

color:#f0f0f0;

}

/* MATRIX-CUSTOM-MODULES-START */

#cc-m-7792741551 h1, #cc-m-7792741551 h2, #cc-m-7792741551 h3 {font-size:20px !important;}

#cc-m-7792741851 h1, #cc-m-7792741851 h2, #cc-m-7792741851 h3 {font-size:20px !important;}

#cc-m-7792930551 h1, #cc-m-7792930551 h2, #cc-m-7792930551 h3 {font-size:20px !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-weight:600 !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-size:40px !important;}

/* MATRIX-CUSTOM-MODULES-END */

/* MATRIX-GLOBAL-SETTINGS-START */

:root {

--content-width: 1170px;

--special-pages-content-width: 900px;

}

/* HAMBURGER-BAR-START */

:root { --hamburger-btn-background: transparent; --hamburger-btn-bg: transparent; --hamburger-btn-bg-active: transparent; }

/* HAMBURGER-BAR-END */

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link,

#cc-inner input.cc-checkout-btn,

#cc-inner a.cc-shop-addtocard {

padding: 14px 35px !important;

border-radius: 8px;

}

/* MOBILE-FULLWIDTH-BUTTONS-START */

@media only screen and (width <= 746px) {

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link {

width: 100% !important;

margin: 5px auto 0 auto;

box-sizing: border-box;

text-align: center !important;

}

}

/* MOBILE-FULLWIDTH-BUTTONS-END */

/* MATRIX-GLOBAL-SETTINGS-END */


Note: All changes made here will be applied to your entire website.
draggable-logo

Build faster, smarter, and more flexible Jimdo websites.

has-right-col-border

Community

Blog

Archive

GitHub



About | Privacy Policy | Cookie Policy | Sitemap | Withdraw contract
Created with Jimdo
Log in Log out | Edit