Nonchalant Programming Master

    reveal.js-trianglify

    0.1.0 • Public • Published

    reveal.js-trianglify

    A Reveal.js plugin to algorithmically generate triangle art slide backgrounds. Check out the live demo

    Installation

    Bower

    Download and install the package in your project:

    bower install reveal.js-trianglify

    Add the plugin to the dependencies in your presentation, as below.

    Reveal.initialize({
        // ...
        
        dependencies: [
            // ... 
          
            { src: 'bower_components/reveal.js-trianglify/plugin.js' }
        ]
    });

    npm

    Download and install the package in your project:

    npm install --save reveal.js-trianglify

    Add the plugin to the dependencies in your presentation, as below.

    Reveal.initialize({
        // ...
        
        dependencies: [
            // ... 
          
            { src: 'node_modules/reveal.js-trianglify/plugin.js' }
        ]
    });

    Manual

    Copy this repository into the plugins folder of your reveal.js presentation, eg plugins/trianglify.

    Add the plugin to the dependencies in your presentation, as below.

    Reveal.initialize({
        // ...
        
        dependencies: [
            // ... 
          
            { src: 'plugins/trianglify/plugin.js' }
        ]
    });

    Configuration

    You can configure various aspects of however the trianglify backgrounds are generated for your presentation by providing a trianglify option in the reveal.js initialization options. The defaults for these options are provided by the Trianglify library (see the Trianglify docs for more details) and are repeated below.

    Reveal.initialize({
        // ...
     
        trianglify: {
            // Specifies the size of the mesh used to generate triangles.
            // Larger values will result in coarser patterns, smaller values 
            // will result in finer patterns. Note that very small values may
            // dramatically increase the runtime of Trianglify.
            cellSize: 75,
     
            // String or array of CSS-formatted colors specifing the color
            // gradient used on the x axis. Valid string values are 'random' 
            // or the name of a colorbrewer palette (i.e. 'YlGnBu' or 'RdBu').
            // When set to 'random', a gradient will be randomly selected
            // from the colorbrewer library. Valid array values should specify 
            // the color stops in any CSS format
            // (i.e. ['#000000', '#4CAFE8', '#FFFFFF']).
            xColors: 'random',
     
            // String or array of CSS-formatted colors,. When set to 'match_x' 
            // the same gradient will be used on both axes.
            // Otherwise, accepts the same options as x_colors.
            yColors: 'match_x',
     
            // Decimal value between 0 and 1 (inclusive). Specify the amount of randomness used when generating triangles.
            variance: 0.75
        },
     
    });

    Trianglify as theme background

    The default configuration generates a background for the entire presentation. There will be a single background visible for every slide that does not provide a slide specific backgrounds. This theme level background can be disabled by providing the following in the reveal.js initialization options...

    Reveal.initialize({
        // ...
     
        trianglify: {
            // ...
            displayAsTheme: false
        },
     
    });

    Background for individual slides

    Backgrounds for individual slides can be generated by adding a data-trianglify attribute to your <section> elements. The following attributes can be used to configure each specific background. Any attribute not provided will default to the overall configuration provided by the reveal.js initialization options (see above).

    • data-trianglify-cellSize
    • data-trianglify-xColors
    • data-trianglify-yColors
    • data-trianglify-variance

    Background transitions

    When using individual slide backgrounds the reveal background transitions will be applied (configured via backgroundTransition in the reveal.js initialization options, or provided via the slide's data-transition attribute).

    Note that the theme level background will ignore background transitions. If you need a common background that also applies background transitions you will need to add a data-trianglify attribute to each slide.

    License

    reveal.js-trianglify is GPLv3 licensed.

    Copyright (C) 2018 Greg Denehy

    The Trianglify library is copyright (C) Quinn Rohlf

    Install

    npm i reveal.js-trianglify

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    GPLv3, Copyright (C) 2018 Greg Denehy

    Unpacked Size

    155 kB

    Total Files

    24

    Last publish

    Collaborators

    • denehyg