Jump to content

MarkupCrossfade

netcarver

By netcarver,
in Modules/Plugins

 Share

Recommended Posts

netcarver Hero Member

netcarver

Posted
Posted

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!

  • Like 9
Link to comment
Share on other sites
horst Hero Member

horst

Posted
Posted (edited)

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 by horst
Link to comment
Share on other sites
netcarver Hero Member

netcarver

Posted
  • Author
Posted

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.

  • Like 2
Link to comment
Share on other sites
  • 1 month later...
netcarver Hero Member

netcarver

Posted
  • Author
Posted

@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!

Link to comment
Share on other sites
netcarver Hero Member

netcarver

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
BFD Calendar Sr. Member

BFD Calendar

Posted
Posted

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.

Link to comment
Share on other sites
netcarver Hero Member

netcarver

Posted
  • Author
Posted

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? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...