Skip to content

quick start tutorial

Jump to bottom
Pawel Przezwanski edited this page Jan 27, 2020 · 3 revisions

1. HTML markup:

You can use data-srcset, data-src or just src to avoid lazy-loading.

Below examples shows how to use responsive images. But you can also specify just data-src and it will still at least lazy-load:

<div class="js-some-louv louv">
    <img
        src=""
        data-srcset="
            images/img1-300w.jpg 300w,
            images/img1-600w.jpg 600w,
            images/img1-900w.jpg 900w"
        data-src="images/img1-300w.jpg"
        alt="img1"
    >
    <img
        src=""
        data-srcset="
            images/img2-300w.jpg 300w,
            images/img2-600w.jpg 600w,
            images/img2-900w.jpg 900w"
        data-src="images/img2-300w.jpg"
        alt="img2"
    >
</div>

2. Minimal but powerful start:

import Louv from 'louv;
const louvInstance = new Louv({ selector: '.js-some-louv' });
louvInstance.init();

In this case Louv will use its default config with 'dissolution' scenario and init method will automatically launch 'loop' method which will endlessly loop all pictures.

From here you may also want to jump directly to Louv gallery api to learn how manually present and hide louv pictures and few more useful methods.

3. Choose another scenario

import scenario as named export from louv

import { scenarioPicasso } from 'louv'

and add scenario to scenarios array in Louv config object:

{
  scenarios: [scenarioPicasso],
}

4. Build custom scenario:

Louv was written to help you easily build your custom scenarios so don't give up here.

NOTE: below we assume you know how to configure babel to compile es6 imports from node_modules. If not, read how to configure build tools for imports from lib or check available named direct imports from 'louv'.

If scenario should work with looped gallery it has to have specified four phases: present, wait, hide, waitAfter. 'present' and 'hide' properties should be arrays while 'wait' and 'waitAfter' are numbers (milliseconds). If you present pictures manually with 'presentPicture', 'hidePicture' and 'next' methods you can ommit 'wait' and 'waitAfter'.

Scenario is built of morphs that are available in 'lib'

import fragmentize from 'louv/lib/morphs/fragmentize';
import fadein from 'louv/lib/morphs/fadeinGallery';

const customScenario = {
  present: [
    fragmentize(0),
    fadein(500)
    restructure(1200, {
      target: 'molecule',
      property: 'transform',
    })
  ],
  wait: 1000,
  hide: [
    fadeout(1000),
    fragmentize(1000)
  ],
  waitAfter: 1000,
};

Lets explain this simple custom scenario:

  • 'present' phase before showing the picture will apply instantly morph 'fragmentize' with its default config, then it will in parallel (fadein is by default parallel) fadein the picture and restructure to original position
  • 'hide' phase will in parallel fadeout and apply fragmentize morph with the same duration

Now just include our customScenario:

''' { scenarios: [customScenario], } '''

NOTE: You can create your own morph with morphFactory See morphFactory manual.

5. Configuring morph

Morph is created by morphFactory so every morph is standardized. Its first argument is duration and second argument is optional config object with options you really should know. There are several options common for all morphs like: parallel, delay, onebyone, timingFunction, target, property. Each morph has laso its own options that are read from morph configuration object.

To easily build scenarios and configure morphs you should definitely spend few minutes to read full (but short!) specification of morph api.

Configured morph is nothing more than css class even if it involves complex molecules css transformations. More precisely - configured morph is an object with 'duration' property and 'action' method that applies morph's className to the picture.

Single morph has only one main property that is included in transitions (animation). However additional css can be applied. Refer to morphFactory manual.o

There is one special morph: 'restructure' which clears previous morphs related to specified target ('picture', 'molecule' or 'atom') and specified property. This applies useful optimization technic for browsers animation called FLIP (first-last-invert-play). More in morph api.

6. Louv's gallery api

Finally its time to for Louv class api. There are few very useful methods that should cover all your needs. Please read about Louv api here

7. Worth nothing:

  1. You can use as many instances of Louv as you wish and not worry about any collisions.
  2. Louv will recalculate everything wisely on window change. However if you use many instances. There will be a problem and some of them are hidden when window change happens. In this case Louv instance should be paused with method pause() and later continued with method continue(). This cross instances issue will be solved in the future in more convenient way.
Clone this wiki locally