MarkupCrossfade

netcarver · November 23, 2014

Markup Cross-Fade

On Github.
In the Module Repository.
~~Thanks to the good people at Lightning.pw for hosting the demo for free!~~ Demo no longer available.

A full-screen cross-fading background animation module with optional, per-slide, overlay text. It's based on an article by Mary Lou over on codrops.

Here's the home.php template code for the entire site...

<?php 

$cf = wire('modules')->get('MarkupCrossfade');
$settings = array(
    'pages' => wire('pages')->get("template=slides")->children(),
    'title_xforms' => "scale(1.0) translateY(300px)\nscale(1.0)\nscale(1.0)\ntranslateY(300px)",
);

?><html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MarkupCrossfade Demo</title>
    <style>
    @font-face {
      font-family: 'BebasNeueRegular';
      src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-webfont.eot');
      src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    body {
      background-color: #333;
      overflow-x: hidden;
      padding: 0;
      border: 0;
      margin: 0;
    }
    <?php echo $cf->renderCss($settings); ?>
    .markup-crossfade li div h3 {
      font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
      font-size: 80px;
      letter-spacing: 2px;
    }
    </style>
  </head>
  <body>
    <?php echo $cf->renderHtml($settings); ?>
  </body>
</html>

The only other work involved was adding a 'slides' and a 'slide' template ('slides' having children of template 'slide') and adding an image field called 'image' (NB. not "images"), a text/textarea called 'body' and a required integer field called 'duration' to the slide template. Add a parent to the page tree called 'slides' using template 'slides' and add as many manually sorted children as you need, setting the image, body text and duration for each.

After that, the only thing left to do was to upload BebasNeue from fontsquirrel to 'assets/fonts'. That's it.

There are a number of parameters you can configure and pass in to the render methods. Here's the list of settings and their defaults taken straight from the source code...

array(
    'pages'             => $pages,     // WireArray of pages defining the slides of the slideshow.
    'duration_field'    => 'duration', // Field of the slide page that provides the duration (in seconds)
    'overlay_field'     => 'body',     // Field of the slide page that provides the overlay text
    'image_field'       => 'image',    // Field of the slide page that provides the image (url)
    'title_xform_field' => '',         // Textarea field of the slide page that provides the title transformations
    'image_xform_field' => '',         // Textarea field of the slide page that provides the image transformations
    'title_xforms'      => '',         // Default title transformations - one per line (\n separator please) - leave blank for none.
    'image_xforms'      => '',         // Default image transformations - one per line (\n separator please) - leave blank for none.
    'html_class'        => 'markup-crossfade', // What class to apply to the owning list
    'z_index'           => '-10',      // z-index of slideshow container and its spans
    'li_id'             => 'slide_',   // What id to use for each slide. The slide # will be appended to this
    'browsers'          => array(      // Array of browsers extensions to render CSS for
        '',
        '-webkit-',
        '-moz-',
        '-o-',
        '-ms-'
    ),
    'skip_css'          => false,      // only generate the keyframes, don't output a modified copy of the module's static css file.
    'mask_image'        => '',         // location of mask image relative to the site root. Leave blank if none.
);

In order to use per-slide image and/or title transformations you need to add either one or two textarea fields to your slide templates. Each textarea should have a maximum of five lines of text. Each line of text is used to define the transformation(s) applied at each of the 5 stages of the animation that gets generated. The following (used for the global title animation on the demo site)...

scale(1.0) translateY(300px)
scale(1.0)
scale(1.0)
translateY(300px)

...defines the start keyframe with the title scaled at 1.0 and translated along the Y axis by 300px. The next keyframe is not translated so the browser animates it up into the visible area. It stays there in the next frame and is animated back out in the fourth frame.

The skip_css setting lets the renderCss() method know if it should include its default css scaffolding file (included with the module) in the output. If set to true, only the CSS for the actual animations is output and you'll have to supply your own scaffolding CSS in your page templates.

Whilst this works great in Chrome on linux, could you let me know what the experience is like for you on your OS/Browser combination.

Thank you!

horst · November 24, 2014

Nice one!

Looks good - very good on FF33 Win7

Looks ok - good on IE11 Win7 (seems to be a bit slower than FF or is less smooth than FF)

-------

Related to the Article: Which browsers should be supported by this? IE9+

-------

It remembers me on a site Fokke has created and posted to the showcase

There are no overlays, only the movement and fading with the background images. There it is done a bit different, it seems to use different move directions (N, E, S, W) and also has a return point. Feels a bit more like "Ken Burns Effect". Would this be possible with your module too, defining direction per slide?

Edited November 24, 2014 by horst

netcarver · November 24, 2014

Thank you for the feedback Horst. According to another article, the CSS used should work in IE10+ (along with FF5+, Opera 12+, Safari 4+ & Chrome) but the quality may vary. Even on a new-ish chrome browser on a fast Android tablet the animation quality can vary a little between loads of the page - sometimes there is a little stall here and there.

With regard to per-slide transformation settings: yes, it is possible. The example code I posted sets ~~a simple scale-up for the image and~~ a translation for the overlay text for all slides but you can specify a slide field for the image and/or overlay transformations making them configurable for each slide. Having said that, I've not tried to duplicate the effects used in that site so I can't say a positive "Yes, it can do that" even though you can customise things on a per-slide basis.

Edited to reflect the removal of the image scale-up from the opening post - FF on android was stalling with the image scaling.

netcarver · November 24, 2014

Module now available. Opening post updated and expanded. I added a couple of media queries to the home.php template code but I can't seem to add them to the opening post code - weird.

Updated to add: not so good using FF on android.

BFD Calendar · December 24, 2014

I'm getting no images in Firefox Developer nor Chrome on a Mac. Text animations work fine.

netcarver · December 24, 2014

@BFD Calendar,

Are you talking about the demo site or one you've tried setting up on your own PW installation? If it's your own installation can you look at your dev tools in the browser and reload the page and let me know if there are any 404s for the images. Thanks!

BFD Calendar · December 28, 2014

netcarver,

Error I get is: "Notice: Trying to get property of non-object in /site/modules/MarkupCrossfade/MarkupCrossfade.module on line 93".

netcarver · December 28, 2014

Looks like the module cannot access the image field from the pages you are passing in. Can you let me know what the name of your image field in these pages is and also post your code for calling the module. Hopefully we can track it down from that.

BFD Calendar · December 29, 2014

I just used your code. The name of the image field on the slide template is 'images'. When I show the slide pages in a list the images show up. The images are all 1000px wide but a different height (733, 725, 762,...).

<?php 

$cf = wire('modules')->get('MarkupCrossfade');
$settings = array(
    'pages' => wire('pages')->get("template=slides")->children(),
    'title_xforms' => "scale(1.0) translateY(300px)\nscale(1.0)\nscale(1.0)\ntranslateY(300px)",
);

?>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Slideshow</title>
    <style>
    @font-face {
      font-family: 'BebasNeueRegular';
      src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-Regular.eot');
      src: url('<?php echo wire('config')->urls->assets; ?>fonts/BebasNeue-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    body {
      background-color: #333;
      overflow-x: hidden;
      padding: 0;
      border: 0;
      margin: 0;
    }
    
    <?php echo $cf->renderCss($settings); ?>
    
    .markup-crossfade li div h3 {
      font-family: 'BebasNeue Regular', 'Arial Narrow', Arial, sans-serif;
      font-size: 36px;
      letter-spacing: 2px;
    }
    </style>
  </head>
  <body>
    <?php echo $cf->renderHtml($settings); ?>
  </body>
</html>

I would also use the slideshow on different pages with different images for an artist website. Like the films page could have a slideshow of film stills and the drawings page could have a slideshow of drawings and so on. But now I'm just testing what's possible on my local server.

netcarver · December 29, 2014

Ah, OK, can you go to setup > fields and edit you images field. Look at the "Details" tab and let me know what the value is for the "Formatted Value" setting. That should help me reproduce this problem.

netcarver · December 29, 2014

Oops - just noticed, you said your image field is called "images" but you are using the default settings for this - which look for a field called "image" (no 's' at the end.) If you try this...

$settings = array(
    'pages' => wire('pages')->get("template=slides")->children(),
    'title_xforms' => "scale(1.0) translateY(300px)\nscale(1.0)\nscale(1.0)\ntranslateY(300px)",
    'image_field' => 'images',
);

...does it fix it?

BFD Calendar · December 29, 2014

Yep, 'images' instead of 'image' was the culprit. Thanks!

Sign In

MarkupCrossfade

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content