Introducing the new feature "Matrix variables", new release of js file, Jimdo parallax, custom captions, new release of Zodiac framework and much more

In section 'Updates' of Matrix Themes menu you can find a new file 'Matrix-1.8.2.min.js'. 

You'll need to replace the previous version you're using on your website ( Design> Custom Template> Files )

What's new in Matrix 1.8.2

• Updated YTPlayer plugin which caused the problem in MacOs Big Sur.
• Added parallax-scroll.js ( Currently this plugin has been replaced by other plugins and it's not available in shortcodes. I added it  because if you're using a template with matrix-1.6.js or previous, you don't need to update the js part in HTML )
• Removed Instagram feed and countdown js files. These 2 plugins can be used as a separate file included in shortcode, so when you update your website with matrix-1.8.2.js, you'll need to update the widget  as well.
• Added Jimdo parallax ( you can add a parallax image using a standard Jimdo module 'Photo' or 'Text with Photo' )
• Added Matrix variables ( see details below )

The Matrix variables replace the previous feature 'Play of columns' ( you can use the both ones anyway) and allow to use the same functions like play of columns but without any js code in Widget/HTML module

How it works

Matrix variables can be used only inside the module 'Columns' , added in Widget/HTML with the following options:

<var> draggable-logo </var>

<var> draggable-hero color-white g-font </var>

<var> hs-fullwidth bg-primary color-white </var>

<var> bg-primary color-white add-20 mid-round form-dark white-outline-btn </var>

<var> center-align </var>

<var> hide-mobile </var>

<var> hide-mobile-only </var>

<var> only-mobile </var>

<var> is-tile bg-primary color-white white-outline-btn is--flex is-flex-block no-padding </var>

<var> wow animated fadeInUp </var>

<ins> bg-dark color-white add-10 mid-round white-outline-btn </ins>

From the previous post you could see the additional widgets that can be added by ALT text classes. Here's the second part including some interesting elements:)

See full list of no coding features

It's about a fullwidth image with fixed position and center aligned caption.

is-matrix-parallax is-fullwidth has-center-caption has-padding h-100

• When you change the parallax adding a new image, you can see the new added image only after refreshing the page.
• The height of the image is setup by  the classes h-100 h-75 and h-50. You can also use the class h-mobile to get  50vh height on mobile devices. 
• Add the dark overlay with the class has-overlay
• Use left, center or right image alignment to get the different style of the text

The parallax image can be used also with module 'Text with Photo'

is-overlay is-white is-fullwidth has-padding is-matrix-parallax h-100

is-overlay is-fullwidth has-padding is-matrix-parallax h-100

has-hover-icon is-100

Text with Photo

is-teaser bg-grey has-hover-icon has-padding

is-teaser bg-dark color-white has-hover-icon has-padding

Image with caption

has-caption-overlay

has-promo-tag

All above widgets are also included in new Zodiac framework v.5.0 and can be found on a new website:

https://www.hembarevskyy.com/projects/zodiac/

Since it was a very static website, I moved the domain to my own website, while the old website with version 4.1  you will find here:

www.zodiac-framework1.jimdo.com

Animated counter

<!-- *** Custom Matrix widget fa counter *** -->
<div class="is-matrix bg-primary color-white add-20 center-align">
    <div class="fa fa-thumbs-o-up fa-3x">
    </div>

    <div class="counter mobile-big weight-600 add-top-20">
        2682
    </div>

    <p class="size-18 weight-600 add-top-10 add-btm-10">
        Happy Customers
    </p>
</div>
<!-- *** end Custom Matrix widget fa counter *** -->
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// animated counter
    $('.counter').each(function () {
       $(this).prop('Counter',0).animate({
       Counter: $(this).text()
}, {
       duration: 4000,
       easing: 'swing',
       step: function (now) {
       $(this).text(Math.ceil(now));
   }
 });
});

});
})(jQuery); 
//]]>
</script>

Note:

The animation is visible on the page load and has to be added on the top of the content.

The js part in red color should be used only once. If you add 3 or more boxes in different columns,  use the js only in the first column.

Animated Overlapped images

<div class="is-matrix">
    <div class="img-overlap is--flex rel">
        <!-- front image -->

        <div class="col-5 resp-img" style="left:20%;z-index:1;" data-enllax-ratio=".1" data-enllax-type="foreground">
            <img src="https://u.jimcdn.com/cms/o/sb0c6192bec5153ef/userlayout/img/bg-shop.jpg?t=1608365866" alt="" />
        </div>
        <!-- end front image -->
        <!-- back image -->

        <div class="col-10 resp-img right-align">
            <img src="https://u.jimcdn.com/cms/o/sb0c6192bec5153ef/userlayout/img/bg-zodiac.jpg?t=1608365027" alt="" />
        </div>
        <!-- end back image -->
    </div>
</div>