<h1>GranimJS Gradient Methods</h1>
<div class="wrapper">
<canvas id="first"></canvas>
</div>
<button class="play">Play</button>
<button class="pause">Pause</button>
<button class="diagonal">Animate Diagonally</button>
<button class="radial">Animate Radially</button>
<button class="red-state">Red State</button>
<button class="green-state">Green State</button>
<br>
<button class="color-dodge">Color Dodge</button>
<button class="color-burn">Color Burn</button>
<button class="lighten">Lighten</button>
<button class="darken">Darken</button>
body {
margin: 20px auto;
font-family: "Lato";
font-weight: 300;
width: 80%;
text-align: center;
}
canvas {
display: block;
width: 100%;
height: 300px;
border: 10px double black;
margin: 50px 0;
}
button {
border: 1px solid black;
background: white;
font-family: 'Lato';
padding: 5px 10px;
font-size: 1.25em;
cursor: pointer;
margin: 5px;
outline: none;
}
button:hover {
background: black;
color: white;
}
var firstGranim = new Granim({
element: "#first",
name: "first-gradient",
elToSetClassOn: ".wrapper",
direction: "top-bottom",
opacity: [1, 1],
isPausedWhenNotInView: true,
image : {
source: 'https://images3.imgbox.com/cc/5a/AAUndScI_o.jpg',
stretchMode: ["stretch", "stretch"],
blendingMode: 'overlay'
},
states: {
"default-state": {
gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
transitionSpeed: 2000
},
"green-state": {
gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
transitionSpeed: 2000
},
"red-state": {
gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
transitionSpeed: 2000
}
}
});
$(".play").on("click", function(){
firstGranim.play();
});
$(".pause").on("click", function(){
firstGranim.pause();
});
$(".diagonal").on("click", function(){
firstGranim.changeDirection('diagonal');
});
$(".radial").on("click", function(){
firstGranim.changeDirection('radial');
});
$(".red-state").on("click", function(){
firstGranim.changeState('red-state');
});
$(".green-state").on("click", function(){
firstGranim.changeState('green-state');
});
$(".color-dodge").on("click", function(){
firstGranim.changeBlendingMode('color-dodge');
});
$(".color-burn").on("click", function(){
firstGranim.changeBlendingMode('color-burn');
});
$(".lighten").on("click", function(){
firstGranim.changeBlendingMode('lighten');
});
$(".darken").on("click", function(){
firstGranim.changeBlendingMode('darken');
});