c16

rtl-direction-switch

Інтерактив·Шаблон: Digmox·Складність анімації: subtle·Адаптивний: Так

Файли-джерела

index.html.page_direction
assets/css/rtl.css.rtl

Бібліотеки

jquery

Summary

Two floating round pill buttons (RTL / LTR) fixed to the page edges that toggle a .rtl / .ltr class on the wrapper. The whole layout mirrors live without reload — every module CSS ships its own .rtl override block so paddings, transform-origins, and float directions all flip.

HTML structure (minimal)

<div class="boxed_wrapper ltr">
  <div class="page_direction">
    <div class="demo-rtl direction_switch"><button class="rtl">RTL</button></div>
    <div class="demo-ltr direction_switch"><button class="ltr">LTR</button></div>
  </div>
  <!-- rest of the page -->
</div>

Key SCSS tokens

.demo-rtl {
  position: fixed; top: 390px; left: 10px; z-index: 9999;
}
.demo-ltr {
  position: fixed; top: 390px; right: 10px; z-index: 9999;
}
button.rtl,
button.ltr {
  width: 40px; height: 40px;
  background: var(--theme-color);
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

/* assets/css/rtl.css contains the actual mirroring rules: */
.rtl .project-block:last-child .project-block-one .inner-box .overlay-content {
  transform-origin: left center;
  left: 0;
  right: inherit;
}
.rtl .project-block-four .inner-box {
  padding-left: 450px;
  padding-right: 50px;
}

Animation logic

function directionswitch() {
  if ($('.page_direction').length) {
    $('.direction_switch button').on('click', function() {
      $('.boxed_wrapper').toggleClass(function() {
        return $(this).is('.rtl, .ltr') ? 'rtl ltr' : 'rtl';
      });
    });
  }
}
$(document).on('ready', function() { directionswitch(); });

Notable details

The .rtl selector is sprinkled throughout every module CSS file (module-css/banner.css, module-css/project.css, etc.) — each component has localized mirroring logic, so the global rtl.css is small.
The toggle uses toggleClass(function) so a single button swaps between rtl and ltr instead of needing two listeners.
Z-index 9999 puts the buttons above sticky headers and modals.

Use when

Multi-language demo pages where you want clients to preview Arabic/Hebrew layout without rebuilding assets.
Single-template-shipping-to-multiple-markets situations.
Theme demos for ThemeForest-style marketplaces (this is the pattern most of those templates use).

Caveats

Ships about 200+ lines of duplicated .rtl rules across module CSS files — double the maintenance burden.
The pill buttons stay visible in production unless you remove them; designed for demo, not real users.
No dir="rtl" attribute on <html> — only the class — so screen readers and form fields don't actually switch direction.