Skip to content

Instantly share code, notes, and snippets.

@almightyywizkid

almightyywizkid/index.html

Created April 4, 2017 13:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save almightyywizkid/29cfff34a72624f40880c2e1cfecc85d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save almightyywizkid/29cfff34a72624f40880c2e1cfecc85d to your computer and use it in GitHub Desktop.
Download ZIP
Gradient Exercise // source http://jsbin.com/loyivax
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.0.6/granim.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Gradient Exercise</title>
<style id="jsbin-css">
#window_overlay{
height: 100%;
width: 100%;
z-index: 1;
}
.window_frame {
border: 2px solid #eee;
height: 300px;
width: 500px;
position: relative;
margin-bottom: 10px;
}
#forrest-image {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position-x: 50%;
background-image: url("https://sarcadass.github.io/granim.js/assets/img/bg-forest.jpg");
z-index: -1;
}
.eg{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="window_frame">
<!-- STEP 4: choose a window frame image here from below and give it the "window_overlay" ID -->
<img id="window_overlay"src="http://img10.deviantart.net/1c5c/i/2016/250/5/8/unrestricted___gothic_window_scene_png_by_frozenstocks-d7nq257.png" class="eg">
<canvas id="forrest-image">
</canvas>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button type="button" id="start">Start</button> Set speed in seconds: <input id="speed" size="2"> <button type="button" id="set_speed">Set</button>
<br/><br/><br/><br/>
<img src="https://thefourfather.files.wordpress.com/2012/03/window.png" class="eg">
<img src="http://pngimg.com/uploads/window/window_PNG17689.png" class="eg">
<img src="http://img10.deviantart.net/1c5c/i/2016/250/5/8/unrestricted___gothic_window_scene_png_by_frozenstocks-d7nq257.png" class="eg">
<script id="jsbin-javascript">
// ** STEP 1 - Declare two arrays of colors called
// "start_colors_array" and "end_colors_array"
// Each array should have at least two different colors
// in hexidecimal
var start_colors_array = ["#00ffff","#000099"];
var end_colors_array = ["#003366","#ff9933"];
// This is the default speed in MILISECONDS
var transition_speed = 1000;
var direction = 'top-bottom';
// ** STEP 2 - create a function setTransitionSpeed
// that takes the speed in seconds as a parameter
// and mulitplies it by 1000 to get the speed
// in miliseconds and sets the variable transition_speed
function setTransitionSpeed(spped_is_seconds){
transition_speed = spped_is_seconds*1000;
}
// ** STEP 3 - write a jQuery click handler
// for the "set" button that:
// 1. gets the value of the "speed" input box
// 2. pops an alert eg. "Setting speed to 6 seconds"
// 3. Calls the setTransitionSpeed speed function above
// 4. Calls the doGradient() function
// Hint: use "start" button below as an example
$("#set").click(function(){
speed_input=$("#speed").val();
alert("Setting speed to "+speed_input);
setTransitionSpeed(speed_input);
});
$("#start").click(function(){
doGradient();
});
// ** STEP 4 - see HTML
function doGradient(){
var granimInstance = new Granim({
element: '#forrest-image',
direction: direction,
opacity: [1, .5, 0],
states : {
"default-state": {
gradients: [
start_colors_array,
end_colors_array
],
transitionSpeed: transition_speed
}
}
});
}
// ** BONUS STEP 5 - advanced/extension step
// Create a "random" button and setRandomTransitionSpeed function
// that sets transition_speed to a random number using Math.random();
// ** BONUS STEP 6 - advanced/extension step
// Create a button that changes the 'direction' variable to
// values below:
// 'diagonal'
// 'left-right'
// 'radial'
</script>
<script id="jsbin-source-css" type="text/css">#window_overlay{
height: 100%;
width: 100%;
z-index: 1;
}
.window_frame {
border: 2px solid #eee;
height: 300px;
width: 500px;
position: relative;
margin-bottom: 10px;
}
#forrest-image {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position-x: 50%;
background-image: url("https://sarcadass.github.io/granim.js/assets/img/bg-forest.jpg");
z-index: -1;
}
.eg{
width: 100px;
height: 100px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
// ** STEP 1 - Declare two arrays of colors called
// "start_colors_array" and "end_colors_array"
// Each array should have at least two different colors
// in hexidecimal
var start_colors_array = ["#00ffff","#000099"];
var end_colors_array = ["#003366","#ff9933"];
// This is the default speed in MILISECONDS
var transition_speed = 1000;
var direction = 'top-bottom';
// ** STEP 2 - create a function setTransitionSpeed
// that takes the speed in seconds as a parameter
// and mulitplies it by 1000 to get the speed
// in miliseconds and sets the variable transition_speed
function setTransitionSpeed(spped_is_seconds){
transition_speed = spped_is_seconds*1000;
}
// ** STEP 3 - write a jQuery click handler
// for the "set" button that:
// 1. gets the value of the "speed" input box
// 2. pops an alert eg. "Setting speed to 6 seconds"
// 3. Calls the setTransitionSpeed speed function above
// 4. Calls the doGradient() function
// Hint: use "start" button below as an example
$("#set").click(function(){
speed_input=$("#speed").val();
alert("Setting speed to "+speed_input);
setTransitionSpeed(speed_input);
});
$("#start").click(function(){
doGradient();
});
// ** STEP 4 - see HTML
function doGradient(){
var granimInstance = new Granim({
element: '#forrest-image',
direction: direction,
opacity: [1, .5, 0],
states : {
"default-state": {
gradients: [
start_colors_array,
end_colors_array
],
transitionSpeed: transition_speed
}
}
});
}
// ** BONUS STEP 5 - advanced/extension step
// Create a "random" button and setRandomTransitionSpeed function
// that sets transition_speed to a random number using Math.random();
// ** BONUS STEP 6 - advanced/extension step
// Create a button that changes the 'direction' variable to
// values below:
// 'diagonal'
// 'left-right'
// 'radial'
</script></body>
</html>
Raw
jsbin.loyivax.css
#window_overlay{
height: 100%;
width: 100%;
z-index: 1;
}
.window_frame {
border: 2px solid #eee;
height: 300px;
width: 500px;
position: relative;
margin-bottom: 10px;
}
#forrest-image {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position-x: 50%;
background-image: url("https://sarcadass.github.io/granim.js/assets/img/bg-forest.jpg");
z-index: -1;
}
.eg{
width: 100px;
height: 100px;
}
Raw
jsbin.loyivax.js
// ** STEP 1 - Declare two arrays of colors called
// "start_colors_array" and "end_colors_array"
// Each array should have at least two different colors
// in hexidecimal
var start_colors_array = ["#00ffff","#000099"];
var end_colors_array = ["#003366","#ff9933"];
// This is the default speed in MILISECONDS
var transition_speed = 1000;
var direction = 'top-bottom';
// ** STEP 2 - create a function setTransitionSpeed
// that takes the speed in seconds as a parameter
// and mulitplies it by 1000 to get the speed
// in miliseconds and sets the variable transition_speed
function setTransitionSpeed(spped_is_seconds){
transition_speed = spped_is_seconds*1000;
}
// ** STEP 3 - write a jQuery click handler
// for the "set" button that:
// 1. gets the value of the "speed" input box
// 2. pops an alert eg. "Setting speed to 6 seconds"
// 3. Calls the setTransitionSpeed speed function above
// 4. Calls the doGradient() function
// Hint: use "start" button below as an example
$("#set").click(function(){
speed_input=$("#speed").val();
alert("Setting speed to "+speed_input);
setTransitionSpeed(speed_input);
});
$("#start").click(function(){
doGradient();
});
// ** STEP 4 - see HTML
function doGradient(){
var granimInstance = new Granim({
element: '#forrest-image',
direction: direction,
opacity: [1, .5, 0],
states : {
"default-state": {
gradients: [
start_colors_array,
end_colors_array
],
transitionSpeed: transition_speed
}
}
});
}
// ** BONUS STEP 5 - advanced/extension step
// Create a "random" button and setRandomTransitionSpeed function
// that sets transition_speed to a random number using Math.random();
// ** BONUS STEP 6 - advanced/extension step
// Create a button that changes the 'direction' variable to
// values below:
// 'diagonal'
// 'left-right'
// 'radial'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment