Chimera: Recreating the Demo - FP Utility B

FP Utility B

This area of the front page is a Custom HTML module. You will find the settings used in our demo below.

Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.

Details

Custom Output

Enter the following in the Custom Output text editor.

<div class="rt-device-animation" data-animation-step="1">
  <div class="device">
    <div class="phone-home-button"></div>
    <div class="tablet-home-button"></div>
    <div class="screen-stand"><div class="leg"></div><div class="foot"></div></div>
    <div class="display">
      <div class="slide1"><div>Chimera's design is great on <strong>desktops</strong>...</div></div>
      <div class="slide2"><div>...brilliant on <strong>tablets</strong>...</div></div>
      <div class="slide3"><div>and perfect for <strong>mobile!</strong></div></div>
    </div>
  </div>
</div>

<script>

  var duration = 20000, steps = 3, step = 1;

  setInterval( function() {
    document.querySelector( '.rt-device-animation' ).setAttribute( 'data-animation-step', step = ++step > steps ? 1 : step );
  }, duration / steps );

</script>

Basic

Advanced