A Pen by Brav0.

*Only-Web-kit*-experiment-called-Julia.js.markdown

Only Web-kit experiment called Julia.js

This is an experiment I'm working on, I want to call it Julia.js.

The only thing thats will cause not working fine on firefox is the -webkit-background-clip: text; thing. Any ideas?

Also I'm planning to add a "save button" via canvas... ;)

Inspired by: Glen Maddern's Pen wxaGg. and something I saw on imgur once and my friend Julia liked: Polyscapes

Images sources: unsplash

A Pen by Brav0 on CodePen.

License.

index.html

<h1><span id="c"></span></h1>
<!-- <div id="d"></div> -->
<div class="x"><img src="http://i.imgur.com/ROdWOuh.png" alt="crossed lines"></div>
<button class="runBtn">Re-run</button>

script.js

var back = $('body'),
         c = $('#c'),
         d = $('#d');

// Select a shape
var shapes = ['▲','▼','◬','◈','◆','◇','⧫'], // '◀','▶'
    randomShape = Math.floor(Math.random()*shapes.length),
    triangle = shapes[randomShape];

// Add it
c.append(triangle);

// Select an image
var imgList = [
 'url(https://unsplash.imgix.net/uploads%2F141223808515744db9995%2F3361b5e1?q=75&fm=jpg&auto=format&s=a56c1bef666a56f257171ebfe6439226)',
  'url(https://unsplash.imgix.net/uploads%2F14114036359651bd991f1%2Fb3ed8fdf?q=75&fm=jpg&auto=format&s=48ce2bc496d68ba261521169af4f0624)',
  'url(https://unsplash.imgix.net/reserve/z7R1rjT6RhmZdqWbM5hg_R0001139.jpg?q=75&fm=jpg&auto=format&s=62cde4992508e70fdd44e16f1fe926fb)',
  'url(https://unsplash.imgix.net/reserve/J3URHssSQyqifuJVcgKu_Wald.jpg?q=75&fm=jpg&auto=format&s=1a8c268459129e81ef4b1dd5ad48e93a)',
  'url(https://unsplash.imgix.net/uploads%2F14115409319165441c030%2Fa1d0230a?q=75&fm=jpg&auto=format&s=b6975e3020e4ec063ec03250904506e0)'
];

var randomImg = Math.floor(Math.random()*imgList.length),
    img = imgList[randomImg];

// Append the same img
c.css('background-image', img);
back.css('background-image', img);


// Select an effect
var filters = ['hue','invert','grayscale','saturate','tint','blur','sepia'],
  randomFilter = Math.floor(Math.random()*filters.length),
  effect = filters[randomFilter];

// Add it
c.addClass(effect);


// Select a decoration
var dec = ['╳','⤫','⤬'],
    randomDecoration = Math.floor(Math.random()*dec.length),
    cross = dec[randomDecoration];

// Add it
d.append(cross);


// button stuff
$('.runBtn').click(function () {
    window.location.href=window.location.href;
  });

style.scss

$cHeight: random(10);
$randomP: percentage((random(4) - 1 )*.25);
@mixin hide{
  opacity: 0;
}

body {
  margin: 0;
  background-color: hsl(0,0,10%);
  text-align: center;
  overflow:hidden;
  // background-image
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 0;
}

#c, #d, .x {
  line-height: 100vh;
  margin:0;
}

// container
#c {
  text-align: center;
  display: block;
  font-size: $cHeight + 10em;
  // background-image
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-background-clip: text;  /*Moz?*/
  -webkit-text-fill-color: transparent;
                    color: transparent;
}

// decorations (crosses)
#d {
  position: fixed;
  color: whitesmoke;
  font-size: 5em;
  opacity: .1;
  top: 0% + $randomP;
  left: 0;
  right: 0;
}

// big png image of crossed lines
.x {
  top: 0; bottom: 0; left: 0; right: 0;
  opacity: .3;
  @if $randomP > 50% {
    @include hide;
  }
}

// Added filter styles (randomly assigned by julia.js)
// http://bennettfeely.com/filters/
    .hue {
     -webkit-filter: hue-rotate(90deg);
             filter: hue-rotate(90deg);
    }

    .invert {
      -webkit-filter: invert(1) brightness(0.8);
              filter: invert(1) brightness(0.8);
    }

    .grayscale {
      -webkit-filter: grayscale(1);
              filter: grayscale(1);
    }

    .saturate {
      -webkit-filter: saturate(2);
              filter: saturate(2);
    }

    .tint {
      -webkit-filter: sepia(1) hue-rotate(200deg);
              filter: sepia(1) hue-rotate(200deg);
    }

    .blur {
      -webkit-filter: blur(4px);
              filter: blur(4px);
    }

    .sepia {
      -webkit-filter: sepia(1);
              filter: sepia(1);
    }


button {
  position: fixed;
  top: 1em; right: 1em;
  border: 0;
  cursor: pointer;
  padding: 1em;
  background-color: hsl(0,0,20%);
  color: hsl(0,0,90%);
}