Develop Reference

Inverting slider scale on pie chart

I'm trying to create this pie chart where by changing the slider, the slice increases or decreases and then the "Perda na carteira" section will increase or decrease, respectively.
Basically, when all sliders are on "Perda potencial 100%", the "Perda na carteira" should also be at 100%. I've tried using direction: rtl, but this simply changes the slider to go from right to left and doesn't actually change the values.
Thank you in advance!
/************** Canvas ***************/
let myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
var ctx = myCanvas.getContext("2d"),
val;
/************** Slider Variables ***************/
//Gruen
var sliderGruen = document.getElementById("gruen");
var outputGruen = document.getElementById("gruenValue");
outputGruen.innerHTML = "Perda potencial" + " " + sliderGruen.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderGruen.oninput = function () {
outputGruen.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Gelb
var sliderGelb = document.getElementById("gelb");
var outputGelb = document.getElementById("gelbValue");
outputGelb.innerHTML = "Perda potencial" + " " + sliderGelb.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderGelb.oninput = function () {
outputGelb.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Rot
var sliderRot = document.getElementById("rot");
var outputRot = document.getElementById("rotValue");
outputRot.innerHTML = "Perda potencial" + " " + sliderRot.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderRot.oninput = function () {
outputRot.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Magenta
var sliderMagenta = document.getElementById("magenta");
var outputMagenta = document.getElementById("magentaValue");
outputMagenta.innerHTML = "Perda potencial" + " " + sliderMagenta.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderMagenta.oninput = function () {
outputMagenta.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Blau
var sliderBlau = document.getElementById("blau");
var outputBlau = document.getElementById("blauValue");
outputBlau.innerHTML = "Perda potencial" + " " + sliderBlau.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderBlau.oninput = function () {
outputBlau.innerHTML = "Perda potencial" + " " + this.value + "%";
};
/************** Utility Functions ***************/
function changeColoursData() {
var colours = {
"Gruen": parseInt(sliderGruen.value),
"Gelb": parseInt(sliderGelb.value),
"Red": parseInt(sliderRot.value),
"Magenta": parseInt(sliderMagenta.value),
"Blau": parseInt(sliderBlau.value),
"Cyan": parseInt(100 - (parseInt(sliderGruen.value) / 5) - (parseInt(sliderGelb.value) / 5) - (parseInt(sliderRot.value) / 5) - (parseInt(sliderMagenta.value) / 5) - (parseInt(sliderBlau.value) / 5))
};
var outputCyan = document.getElementById("cyanValue");
outputCyan.innerHTML = colours.Cyan + " " + "%";
return colours;
}
function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
}
/************** Piechart Object ***************/
var Piechart = function (options) {
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function () {
var total_value = 0;
var color_index = 0;
for (var categ in this.options.data) {
val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for (categ in this.options.data) {
val = this.options.data[categ];
var slice_angle = 2 * Math.PI * val / total_value;
drawPieSlice(
this.ctx,
this.canvas.width / 2,
this.canvas.height / 2,
Math.min(this.canvas.width / 2, this.canvas.height / 2),
start_angle,
start_angle + slice_angle,
this.colors[color_index % this.colors.length]
);
start_angle += slice_angle;
color_index++;
}
};
};
/************** Initialize code and draw pie chart ***************/
function refreshPiechart() {
var myPiechart = new Piechart(
{
canvas: myCanvas,
data: changeColoursData(),
colors: ["#00A878", "#FFEA65", "#86CDC5", "#53131E", "#246EB9", "#FF5964"]
//colours : gruen, gelb, rot, magenta, blau,cyan
}
);
myPiechart.draw();
}
refreshPiechart();
<style>
body {
background-color: #EDDDD4;
}
.content {
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.slider1 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #00A878;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #FFEA65;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider3 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #86CDC5;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider4 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #53131E;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider5 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #246EB9;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider1::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider3::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider4::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider5::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
ul {
width: 100%;
}
li {
list-style: none;
}
.title {
float: left;
}
h5 {
float: right;
width: 31%;
display: inline;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
float: right;
width: 60%;
display: inline;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
canvas {
margin-right: 10px;
background: #EDDDD4;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<canvas id="myCanvas">
</canvas>
<li>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: TSLA</h5>
<h5 id="gruenValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider1" id="gruen"
onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: MSFT</h5>
<h5 id="gelbValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider2" id="gelb"
onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: AAPL</h5>
<h5 id="rotValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider3" id="rot"
onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: HOOD</h5>
<h5 id="magentaValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider4" id="magenta"
onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: MRNA</h5>
<h5 id="blauValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider5" id="blau"
onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h4 class="title">Perda na carteira:</h4>
<h5 id="cyanValue">
</h1>
</div>
</ul>
</li>
</div>
</div>
</body>
</html>

Simple way is to subtract colours.Cyan from 100 and display it.
/************** Canvas ***************/
let myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
var ctx = myCanvas.getContext("2d"),
val;
/************** Slider Variables ***************/
//Gruen
var sliderGruen = document.getElementById("gruen");
var outputGruen = document.getElementById("gruenValue");
outputGruen.innerHTML = "Perda potencial" + " " + sliderGruen.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderGruen.oninput = function() {
outputGruen.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Gelb
var sliderGelb = document.getElementById("gelb");
var outputGelb = document.getElementById("gelbValue");
outputGelb.innerHTML = "Perda potencial" + " " + sliderGelb.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderGelb.oninput = function() {
outputGelb.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Rot
var sliderRot = document.getElementById("rot");
var outputRot = document.getElementById("rotValue");
outputRot.innerHTML = "Perda potencial" + " " + sliderRot.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderRot.oninput = function() {
outputRot.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Magenta
var sliderMagenta = document.getElementById("magenta");
var outputMagenta = document.getElementById("magentaValue");
outputMagenta.innerHTML = "Perda potencial" + " " + sliderMagenta.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderMagenta.oninput = function() {
outputMagenta.innerHTML = "Perda potencial" + " " + this.value + "%";
};
//Blau
var sliderBlau = document.getElementById("blau");
var outputBlau = document.getElementById("blauValue");
outputBlau.innerHTML = "Perda potencial" + " " + sliderBlau.value + "%"; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
sliderBlau.oninput = function() {
outputBlau.innerHTML = "Perda potencial" + " " + this.value + "%";
};
/************** Utility Functions ***************/
function changeColoursData() {
var colours = {
"Gruen": parseInt(sliderGruen.value),
"Gelb": parseInt(sliderGelb.value),
"Red": parseInt(sliderRot.value),
"Magenta": parseInt(sliderMagenta.value),
"Blau": parseInt(sliderBlau.value),
"Cyan": parseInt(100 - (parseInt(sliderGruen.value) / 5) - (parseInt(sliderGelb.value) / 5) - (parseInt(sliderRot.value) / 5) - (parseInt(sliderMagenta.value) / 5) - (parseInt(sliderBlau.value) / 5))
};
var outputCyan = document.getElementById("cyanValue");
var invertedOutputCyan = 100 - colours.Cyan;
outputCyan.innerHTML = invertedOutputCyan + " " + "%";
return colours;
}
function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
}
/************** Piechart Object ***************/
var Piechart = function(options) {
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function() {
var total_value = 0;
var color_index = 0;
for (var categ in this.options.data) {
val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for (categ in this.options.data) {
val = this.options.data[categ];
var slice_angle = 2 * Math.PI * val / total_value;
drawPieSlice(
this.ctx,
this.canvas.width / 2,
this.canvas.height / 2,
Math.min(this.canvas.width / 2, this.canvas.height / 2),
start_angle,
start_angle + slice_angle,
this.colors[color_index % this.colors.length]
);
start_angle += slice_angle;
color_index++;
}
};
};
/************** Initialize code and draw pie chart ***************/
function refreshPiechart() {
var myPiechart = new Piechart({
canvas: myCanvas,
data: changeColoursData(),
colors: ["#00A878", "#FFEA65", "#86CDC5", "#53131E", "#246EB9", "#FF5964"]
//colours : gruen, gelb, rot, magenta, blau,cyan
});
myPiechart.draw();
}
refreshPiechart();
<style>body {
background-color: #EDDDD4;
}
.content {
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.slider1 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #00A878;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #FFEA65;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider3 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #86CDC5;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider4 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #53131E;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider5 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #246EB9;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider1::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider3::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider4::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider5::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: solid black 0.15em;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #FAF6EB;
cursor: pointer;
}
ul {
width: 100%;
}
li {
list-style: none;
}
.title {
float: left;
}
h5 {
float: right;
width: 31%;
display: inline;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
}
h4 {
float: right;
width: 60%;
display: inline;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
}
canvas {
margin-right: 10px;
background: #EDDDD4;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<canvas id="myCanvas">
</canvas>
<li>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: TSLA</h5>
<h5 id="gruenValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider1" id="gruen" onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: MSFT</h5>
<h5 id="gelbValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider2" id="gelb" onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: AAPL</h5>
<h5 id="rotValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider3" id="rot" onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: HOOD</h5>
<h5 id="magentaValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider4" id="magenta" onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h5 class="title">Quota: 20%</h5>
<h5 class="title">Ativo: MRNA</h5>
<h5 id="blauValue">
</h1>
<input type="range" min="0" max="100" value="0" class="slider5" id="blau" onChange="refreshPiechart();">
</div>
</ul>
<ul>
<div id="slidecontainer">
<h4 class="title">Perda na carteira:</h4>
<h5 id="cyanValue">
</h1>
</div>
</ul>
</li>
</div>
</div>
</body>
</html>

Javascript - Get an arm to point at elements being hovered over

I'm trying to get a pivoted forearm to point at the links that are being hovered over.
It works on the actual website I'm making it on but the pointing isn't quite accurate (it's nearly there) - I think it's perhaps because the code is designed to pivot using the center of the image (ie an arrow) and I'm using CSS transform-origin: center left; to force it otherwise?
I've done a fair bit of research but I can't get past this last hurdle - How do I adjust the JS to make the pointing rotation accurate?
Here is the setup I'm using:
$(function() {
var img = $('.arrow');
// Store clock wise degrees of all elements
var clockwiseElemDegrees = {};
var currentArrowAngle = 0;
// Treat initial position of arrow as element 0
var prevElem = '0';
clockwiseElemDegrees['0'] = 0;
if (img.length > 0) {
var offset = img.offset();
var imgX = offset.left + (img.width() / 2);
var imgY = offset.top + (img.height() / 2);
// Get element degrees
$('.animation-trigger').each(function() {
var element = $(this);
var elementPosition = element.offset();
var elementX = elementPosition.left + (element.width() / 2);
var elementY = elementPosition.top + (element.height() / 2);
var radians = Math.atan2(elementY - imgY, elementX - imgX);
var degrees = radians * (180 / Math.PI);
clockwiseElemDegrees[element.attr('elem')] = (degrees < 0) ? (degrees + 360) : degrees;
});
$('.animation-trigger').mouseenter(function(event) {
// Check if arrow should be rotated clockwise
var clockwiseDegreesForNextElem = clockwiseElemDegrees[$(this).attr('elem')];
var clockwiseDegreesForPrevElem = clockwiseElemDegrees[prevElem];
if (clockwiseDegreesForNextElem < clockwiseDegreesForPrevElem)
clockwiseDegreesForNextElem += 360;
var clockwiseRotationRequired = clockwiseDegreesForNextElem - clockwiseDegreesForPrevElem;
if (clockwiseRotationRequired <= 180) {
// Do clockwise rotation
currentArrowAngle += clockwiseRotationRequired;
} else {
// Do anticlockwise rotation
currentArrowAngle -= (360 - clockwiseRotationRequired);
}
prevElem = $(this).attr('elem');
img.css('-moz-transform', 'rotate(' + currentArrowAngle + 'deg)')
.css('-webkit-transform', 'rotate(' + currentArrowAngle + 'deg)')
.css('-o-transform', 'rotate(' + currentArrowAngle + 'deg)')
.css('-ms-transform', 'rotate(' + currentArrowAngle + 'deg)');
});
}
});
.scriptybits {
width: 44%;
box-sizing: border-box;
display: inline-block;
}
.wholepage {
width: 100%;
height: 95vh;
position: relative;
}
.scriptcontainer {
margin-left: 5% !important;
}
.arrow {
position: absolute;
margin-top: 20vh;
margin-left: 4px;
width: 20vh;
z-index: 5;
-webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform-origin: center left;
}
.pageleft {
display: inline-block;
}
.pageright {
text-align: center;
width: 100%;
display: block;
position: relative;
height: 90vh;
}
.menucontainer {
display: block;
margin: auto;
text-align: center;
width: 60%;
position: absolute;
left: 43%;
top: 9vh;
}
.leaningman {
height: 86vh;
display: block;
position: absolute;
top: -5vh;
}
.animation-trigger {
border: 3px solid black;
border-radius: 10px;
padding: 10px 30px 10px 30px;
color: black;
font-size: 30px;
background-color: white;
display: block;
margin-bottom: 20px;
text-align: center;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
<div class="wholepage">
<div class="scriptybits">
<div class="pageleft" style="float:left; width:100%;">
<div class="scriptcontainer" style="position:relative;">
<img src="https://i.imgur.com/qxhaZOc.png" class="arrow">
<img class="leaningman" src="https://i.imgur.com/L9zVucE.jpg">
</div>
</div>
<div class="pageright">
<div class="menucontainer">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
Link 7
</div>
</div>
</div>
</div>

You are rotating the image from the center left, but you are calculating the rotation angle based on the position from the center both horizontally and vertically. Changing to
var imgX = offset.left
seems to improve it for me.

Attempting to trigger modals with h2 elements to overlay an animating background. Doesn't work, can someone help see where I went wrong?

As it says in my title, I am trying to trigger modals with javascript by clicking on h2 elements.
When I use inspector to change the modal display mode from none to visible I can see the modal on top of everything else. But clicking on the h2 elements doesn't seem to trigger this action so I assume its a problem with my javascript.
Can anyone help me out here? Can't seem to get it and I'm sure its something dumb.
Here is my code.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jacob Truax Portfolio</title>
<script src="main.js"></script>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>We are a magazine. This is a test.</p>
</div>
</div>
<!-- Button triggering color change -->
<div id="myBtn" class="Btn">
<button></button>
</div>
<!-- main content -->
<div class="main">
<ul>
<li class="fnup">fn-up</li>
<li class="about">about</li>
<li class="issue">issue 0</li>
<li class="contact">contact</li>
</ul>
</div>
<!-- main-2 content overlaid on "main" -->
<div class="main-2">
<h2 id="myButton" class="fnup2">fn-up</h2><br>
<h2 class="about2">about</h2><br>
<h2 class="issue2">issue 0</h2><br>
<h2 class="contact2">contact</h2>
</div>
<!-- section with rotating 3d object -->
<section>
<div class="face face-cover"></div>
<div class="face face-spine"></div>
<div class="face face-back"></div>
<div class="face face-top"></div>
<div class="face face-side"></div>
<div class="face face-bottom"></div>
</section>
</body>
<script src="rotate.js"></script>
<script src="gradient.js"></script>
<script src="rotate-type.js"></script>
<script src="transition.js"></script>
css
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
font-size: 2vw;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* End modal ============ */
body {
background-color: #d22c1f;
font-family:"Brrr", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 700;
font-size: 12vw;
overflow: hidden;
perspective: 1500px;
height: 100vh;
width: 100vw;
}
#media only screen and (min-width: 1600px) {
body {
font-size: 210px
}
}
/* a {
opacity: 0;
color: rgba(102, 102, 102, 0);
text-decoration: none;
display: inline-block;
} */
/* the main contet is in 3d space and rotates slightly with the cursor */
.main {
position: relative;
height: 100vh;
width: 100vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
}
li {
text-shadow: 4px 4px 40px #000;
color: rgba(102, 102, 102, .3);
padding-left: 60px;
top: -10px;
display: inline-block;
}
/* main-2 is h2 texts overlaid on top of "main" in order to trigger modals */
.main-2 {
position: fixed;
left: 0;
top: 0;
}
h2 {
opacity: 1;
color: rgba(102, 102, 102);
text-decoration: none;
display: inline-block;
padding-left: 60px;
top: -10px;
cursor: pointer;
}
/* This button triggers the background color change */
div.Btn {
position: fixed;
line-height:0;
font-size: 0px;
right: 3vw;
bottom: 3vh;
width: 36px;
height: 36px;
background-image: url(lib/frown.svg);
opacity: 0.3;
mix-blend-mode: overlay;
z-index: 2;
}
div.Btn:hover {
background-image: url(lib/smile.svg);
opacity: 0.3;
mix-blend-mode: overlay;
}
button {
width: 36px;
height: 36px;
border: none;
outline:none;
background: transparent;
border: none !important;
cursor: pointer;
font-size:0;
}
/* section for rotating object following cursor */
section {
position: absolute;
top: 50%;
left: 75vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
z-index: 1;
}
div.face {
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
div.face-cover {
width: 440px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Cover.jpg);
transform: translateX(-50%) translateY(-50%) translateZ(15px);
}
div.face-side {
width: 30px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Side.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(220px);
}
div.face-spine {
width: 30px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Spine.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(220px);
}
div.face-top {
width: 440px;
height: 30px;
background-image: url(lib/fn-up_Magazine_Top.jpg);
transform: translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(310px);
}
div.face-bottom {
width: 440px;
height: 30px;
background-image: url(lib/fn-up_Magazine_Bottom.jpg);
transform: translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(310px);
}
div.face-back {
width: 440px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Back.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(180deg) translateZ(15px);
}
Javascript
rotate.js
document.addEventListener("mousemove", function (event) {
const x = event.pageX
const y = event.pageY
const midX = x - window.innerWidth / 3.9
const midY = y - window.innerHeight / 2
const box = document.querySelector('section')
//box.style.left = x + "px"
//box.style.top = y + "px"
box.style.transform = "rotateX(" + (midY * 0.35) + "deg) rotateY(" + (midX * 0.35) + "deg)"
//box.style.transform = "rotateY(" + (midX * 0.4) + "deg)"
})
gradient.js
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
changeFont()
changeShadow();
})
rotate-type.js
document.addEventListener("mousemove", function (event) {
const x = event.pageX
const y = event.pageY
const midX = x - window.innerWidth / 2
const midY = y - window.innerHeight / 2
const type = document.querySelector('.main')
//box.style.left = x + "px"
//box.style.top = y + "px"
type.style.transform = "rotateX(" + (midX * 0.009) + "deg) rotateY(" + (midY * 0.009) + "deg)"
//box.style.transform = "rotateY(" + (midX * 0.4) + "deg)"
})
transition.js (the modal)
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var button = document.getElementById("myButton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
button.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Box-shadow positioned based on window scroll algorithm

I have this amateur function that changes the box-shadow on a group of elements based on the window.scrollTop position and element offset. When the user scrolls up or down from the photos, the box-shadow will move down or up respectively. So it gives the illusion of perspective. When these photo elements are in the center of the screen, the box-shadow is centered.
Right now it's not ideal and by that I mean it isn't very symmetrical and doesn't feel right. I know it because my "golden-ratio" (Not the actual Phy golden ratio, i just used this as a variable name) is just a random number. I know there is a way to use my variables to set this up properly I just can't come up with it. Looking for golden ratio (box-shadow vertical offset) to be from about -20 to 20, 0 when centered, seems to look okay.
So my question is can anyone optimize my algorithm so that the box-shadow changes as described above but more realistic?
This should only happen inside a certain vertical scroll window so
that this function isn't running while the photos are off the screen (already pretty much implemented)
The box-shadow change is subtle so there is not a HUGE shadow above or below it.
In my real code I have another function that changes the photos to be the same height as the width on window resize. Here I just have a fixed height of 160px.
Here is my code (modified to give a barebones example). Feel free to redo my function from scratch if that is cleaner.
var halfHeight;
var eleHalfHeight;
var scrollTop;
var photosOffset;
var profOffset
var distPhotos;
var goldenRatio;
$(window).scroll(function() {
halfHeight = $(window).height() / 2;
eleHalfHeight = $('.photo').height() / 2;
scrollTop = $(window).scrollTop();
photosOffset = $('.photos').offset().top - halfHeight + eleHalfHeight;
distPhotos = (photosOffset - scrollTop);
if (distPhotos < photosOffset && distPhotos > -photosOffset) {
goldenRatio = distPhotos / 25;
$('.photo-frame').css('box-shadow', '0px ' + (goldenRatio + 6) + 'px 4px 2px #c9c9c9');
};
});
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
display: flex;
align-items: center;
min-height: 500vh;
background-color: #fff;
}
.photos {
display: flex;
width: 100%;
justify-content: space-around;
margin-bottom: 60px;
background-color: #fff;
}
.photos .photo-frame {
width: 25%;
height: 160px;
border: 20px solid whitesmoke;
box-shadow: 0px 0px 4px 2px gray;
background-color: #000;
}
.photos .photo-frame .photo {
width: 100%;
background-color: #000;
z-index: 1;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="photos">
<div class="photo-frame">
<div class="photo"></div>
</div>
<div class="photo-frame">
<div class="photo"></div>
</div>
<div class="photo-frame">
<div class="photo"></div>
</div>
</section>
</div>

Is it perfect™?
Nope.
Do I like it better than yours?
A little bit.
Will it help you?
I hope so, since I think it's easier to tweak — at least this was my intention. You tell me.
let wH = $(window).height(),
sO = 210, // shadowOffset (px); 50 => from -25 to +25
tO = 4, // topOffset (px) 0 => vertical symmetry,
lO = 4, // leftOffset (px) 0 => horizontal symmetry
moveshadow = function() {
let diff = $(window).scrollTop() - $(this).offset().top,
tOH = $(this)[0].offsetHeight,
should = (-diff < wH) && (diff < tOH),
factor = should ?
-((diff / wH + 1) / (1 + tOH / wH) - .5) * sO + tO :
0;
if (should) {
$(this).css({
"box-shadow": lO +"px " +
factor +
"px 8px -2px rgba(0,0,0,.1), " + lO + "px " +
(factor + sO / 20) +
"px 17px 4px rgba(0,0,0,.07), " + lO + "px " +
(factor - sO / 20) +
"px 22px 8px rgba(0,0,0,.06), " + lO/2 + "px " +
factor / 20 +
"px 21px 1px rgba(0,0,0,.12)"
})
}
};
$(window)
.on('resize', function() {
wH = $(window).height()
})
.on('scroll resize', function() {
$('.photo-frame').each(moveshadow)
})
body {
background-color: #fff;
text-align: center;
}
.wrapper {
padding: 120vh 30px;
}
.photos {
display: flex;
align-items: center;
justify-content: space-between;
}
.photo {
width: 20vw;
height: 32.36vw;
background-color: #eee;
}
.photo-frame {
padding: 20px;
border: 1px solid #eee;
box-sizing: border-box;
}
#media(min-width: 1000px) {
.wrapper {
width: 900px;
display: inline-block;
}
.photo {
width: 200px;
height: 323.6px;
background-color: #eee;
}
}
#media(min-width: 641px) {
.photo-frame:first-child { transform: translateY(-10vw) }
.photo-frame:last-child { transform: translateY(10vw) }
}
#media(max-width: 640px) {
.photos {
flex-direction: column;
}
.photo {
width: 60vw;
height: 37.08vw;
background-color: #eee;
}
.photo-frame {
margin: 7.5vw 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="photos">
<div class="photo-frame">
<div class="photo"></div>
</div>
<div class="photo-frame">
<div class="photo"></div>
</div>
<div class="photo-frame">
<div class="photo"></div>
</div>
</section>
</div>
playground
:: }<(((*> ::)

Drag an element to rotate it by specific °

http://codepen.io/kunokdev/pen/YXNrPx?editors=110
<div id="container">
<div class="item-2"></div>
<div class="item-2"></div>
<div class="item-2"></div>
<div class="item-2"></div>
</div>
body {
background: #222;
}
#container {
width: 300px;
height: 300px;
border-radius: 300px;
background: #666;
overflow: hidden;
}
.item-2 {
float: left;
background: blue;
width: 50%;
height: 150px;
}
.item-2:nth-child(2){
background: green;
}
.item-2:nth-child(3){
background: yellow;
}
.item-2:nth-child(4){
background: red;
}
Check link first. So let's say I have that circle div. Now what I want is a simple function that will rotate it. If we drag-pull it to the right, it should rotate clockwise. And vice verse.

I'm not sure if this solution would work on mobile or not, but this works for browsers: http://codepen.io/anon/pen/LVxzLj
var mouseX;
var currAngle = 0;
var container = document.getElementById("container");
container.addEventListener("mousedown",function(e){
mouseX = e.pageX;
window.addEventListener("mouseup",mouseup,false);
window.addEventListener("mousemove",mousemove,false);
},false);
function mouseup(){
currAngle = currAngle + e.pageX - mouseX;
window.removeEventListener("mouseup",mouseup,false);
window.removeEventListener("mousemove",mousemove,false);
}
function mousemove(e){
var result = currAngle + e.pageX - mouseX;
container.style['transform'] = 'rotate(' + result + 'deg)';
container.style['-webkit-transform'] = 'rotate(' + result + 'deg)';
container.style['-moz-transform'] = 'rotate(' + result + 'deg)';
}
Also, I added this css, because there were some odd behaviors with user selection
#container {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}