Colorify.js

Demos

It happens that this page needs a refresh in order to get the colorify.js script working.

There is a lot of images to process on this demo page, and sometimes, the script cannot perform the operations as fast as an image processing on a server would do.

<div colorify>
    <img src="images/demo/image2.jpg" alt="An image">
    <img src="images/demo/image3.jpg" alt="An other image">
    <img src="images/demo/miaou.jpg" alt="An other image">
  </div>
        
colorify({
    id: 1,
    container: 'colorify',
    images: false,
    accuracy: 100,
    gradient: false,
    gradientDirection: false,
    padding: 4,
    lazyReveal: false,
    give: false,
    revealOn: false
  });

Load Images Dynamically

<div colorify-dynamic>
  </div>
      
colorify({
    id: 2,
    container: 'colorify-dynamic',
    images: [
    'images/demo/image2.jpg',
    'images/demo/image3.jpg',
    'images/demo/miaou.jpg'],
    accuracy: 100,
    gradient: false,
    gradientDirection: false,
    padding: 4,
    lazyReveal: false,
    give: false,
    revealOn: false
  });

Lazy Reveal

<div colorify-reveal>
    <img src="images/demo/image2.jpg" alt="">
    <img src="images/demo/image3.jpg" alt="">
    <img src="images/demo/miaou.jpg" alt="">
  </div>
colorify({
    id: 3,
    images: false,
    container: 'colorify-reveal',
    lazyReveal: {
      transition: 2,  // The transition occurs for 2 seconds
      delay: 1
    },
    accuracy: 100,
    gradient: false,
    padding: 10
  });

Display on Event

<a href="javascript:void(0)" class="btn" id="demoEvent">Click me
  <div colorify-display>
    <img src="images/demo/image2.jpg" alt="">
    <img src="images/demo/image3.jpg" alt="">
    <img src="images/demo/miaou.jpg" alt="">
  </div>

colorify({
    id: 4,
    images: false,
    container: 'colorify-display',
    lazyReveal: false,
    accuracy: 100,
    gradient: false,
    padding: 6,
    revealOn: {
      event: 'click',
      trigger: '#demoEvent'
    }
  });
Click me

Manipulates color

As target you can use : a Class, an ID, All occurences (*), [attribute].

You can aslo use these two keywords : parent & children.

<div colorify-manipulate>
    <h3 class=".demo-title">A title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta itaque facere repellat cupiditate sed expedita eaque porro at voluptates, nostrum enim, voluptatibus, dignissimos magnam quo nobis ullam a molestiae? Et.</p>
    <img src="images/demo/test.png" colorify-manipulate/>
  </div>
colorify({
    id: 5,
    container: 'colorify-manipulate',
    lazyReveal: false,
    accuracy: 100,
    gradient: false,
    padding: 4,
    revealOn: false,
    give: {
      property: 'color',
      target: '.demo-title'
    }
  });

A title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta itaque facere repellat cupiditate sed expedita eaque porro at voluptates, nostrum enim, voluptatibus, dignissimos magnam quo nobis ullam a molestiae? Et.

Get Color / Get Gradient


<div colorify-get-color>
 <img src="images/demo/deer.jpeg">
</div>

colorify({
    id: 6,
    container: 'colorify-get-color',
    lazyReveal: false,
    accuracy: 100,
    gradient: false,
    padding: 4
  });

<div colorify-get-gradient>
  <img src="images/demo/deer.jpeg">
</div>

colorify({
    id: 7,
    container: 'colorify-get-gradient',
    lazyReveal: false,
    accuracy: 100,
    gradient: true,
    padding: 4
  });