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').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').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').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').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>
This is an animated heading.
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:
What's new in 2024 Tech
special priceLorem 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 priceLorem 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>
bg-primary-light add-5 margin-5 br7
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
Style 01
<div class="is-matrix is-card is-rel">
<div class="is-rel cc-clearover" style="display:inline-block;">
<div class="resp-img br10 col-6 left-align is-sticky add-10">
<div class="theiaStickySidebar">
<img srcset="https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/img/bg-reasons.jpg?t=1711101392" alt="Matrix Themes" />
</div>
</div>
<div class="col-6 add-10 cc-box right-align">
<h3>
3 Reasons to choose Matrix Themes
</h3>
<p>
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. Nulla neque dolor,
sagittis eget, iaculis quis, molestie non, velit. Maecenas nec odio et ante tincidunt tempus.
</p>
<br />
<!-- feature 1 -->
<div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
<div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<h3>
High quality
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet,
</p>
</div>
</div>
<!-- end feature 1 -->
<!-- feature 2 -->
<div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
<div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<h3>
Professional Support
</h3>
<p>
Create a stunning Jimdo website with Matrix Themes.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. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.
</p>
</div>
</div>
<!-- end feature 2 -->
<!-- feature 3 -->
<div class="is-matrix is-flex bg-primary color-white br10 add-20" style="margin-bottom:30px;">
<div class="fa fa-check fa-2x br500" style="border:2px solid;display: flex;flex: 0 0 50px;height:50px;align-items: center;justify-content: center;">
</div>
<div class="add-left-20" style="">
<h3>
Individual approach
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.
</p>
</div>
</div>
<!-- end feature 3 -->
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/theia-sticky-sidebar@1.7.0/dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// sticky
$('.is-sticky')
.theiaStickySidebar({
additionalMarginTop: 100
});
});
})(jQuery);
//]]>
</script>
Style 02
<div class="is-matrix is-card is-rel">
<div class="is-rel cc-clearover" style="display:inline-block;">
<div class="col-6 add-30 cc-box left-align">
<h3>
3 Reasons to choose Matrix Themes
</h3>
<br />
<div class="is-matrix is-anim-block is-card is--flex is-flex-block cc-clearover" style="border: 1px solid var(--bg-primary);margin-top:10px;">
<div class="left-align col-12 add-10 cc-box">
<div class="fa fa-quote-left fa-5x primary-color bg-white" style="margin-top:-30px;">
</div>
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum
dapibus nunc ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 01 )
</p>
</div>
</div>
<br />
<div class="is-matrix is-anim-block is-card is--flex is-flex-block cc-clearover" style="border: 1px solid var(--bg-primary);margin-top:10px;">
<div class="left-align col-12 add-10 cc-box">
<div class="fa fa-quote-left fa-5x primary-color bg-white" style="margin-top:-30px;">
</div>
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 01 )
</p>
</div>
</div>
<br />
<div class="is-matrix is-anim-block is-card is--flex is-flex-block cc-clearover" style="border: 1px solid var(--bg-primary);margin-top:10px;">
<div class="left-align col-12 add-10 cc-box">
<div class="fa fa-quote-left fa-5x primary-color bg-white" style="margin-top:-30px;">
</div>
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum
dapibus nunc ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 01 )
</p>
</div>
</div>
</div>
<div class="resp-img col-6 right-align is-sticky">
<div class="theiaStickySidebar">
<img srcset="https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/img/matrix-slide03.jpg?t=1711101570" alt="Matrix Themes" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/theia-sticky-sidebar@1.7.0/dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// sticky
$('.is-sticky')
.theiaStickySidebar({
additionalMarginTop: 100
});
});
})(jQuery);
//]]>
</script>
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"> </span></a>
Style 10
<a class="arrow-link is-dark" href="http://www.matrix-themes.com/templates/" target="">Animated arrow<span class="arrow"> </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>
has-right-col-border
Documentation
draggable-logo
Global 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 |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
is-switcher