Develop Reference

How to animate the element in jquery

I am trying to animate my element using jquery.
The purpose of the code is to be a speedometer on my server
The element I am trying to animate is called box3
NOTE: Code might not look the same for you as it looks for me. The code is running on FiveM Server
if (data.akcija == "spidometar") {
$(".box-tekstic").html(Math.round(data.speed))
if (data.speed > 0) {
$("#SpeedIndicator").text(data.speed);
let multiplier = data.maxspeed * 0.1;
let SpeedoLimit = data.maxspeed + multiplier;
Speedometer = (data.speed / SpeedoLimit);
}
}
.box-float{
position: relative;
right: 5vh;
top: 34vh;
}
.box {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width:180px;
height:180px;
transform: rotate(160deg);
border-radius:50%;
padding:25px;
background:
linear-gradient(var(--v), transparent 50%,#4c4c4e 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #4c4c4e 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
.box2 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width:170px;
left: 0.4vh;
top: 5;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background:
linear-gradient(var(--v), transparent 50%,#8a8989 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #8a8989 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
.box3 {
--v:calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
left: 0.4vh;
top: 5;
width:170px;
height:170px;
transform: rotate(160deg);
border-radius:50%;
padding:12px;
background:
linear-gradient(var(--v), transparent 50%,#b7ff00 0) 0/min(100%,(var(--p) - 50)*100%),
linear-gradient(to right, transparent 50%, #b7ff00 0);
-webkit-mask:
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
<div class="box-float">
<div class="box" style="--p:68;"></div>
<div class="box2" style="--p:68;"></div>
<div class="box3" style="--p:50;"></div>
</div>

I know this is not directly answering your question. But I would highly recommend not using JQuery. It served a long and useful life, but there are a lot new, efficient and less bloated libraries available today.
For doing Animation with JS, I recommend checking out https://animejs.com/
Here is an example codepen https://codepen.io/borntofrappe/pen/qGozVM
const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {
clockFace.innerHTML += `
<text
transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
${zeroPadded(i + 1)}
</text>
`;
}
If you have to use jQuery then just use something like.
codepen.io/rpandrews/pen/zaxNyK
$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");
or
// not sure what element is what, since not displaying properly with run code
$('.box-float .box').css("--p", speed_Angle_Variable);
(function($) {
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
$(document).ready(function() {
let data = {
akcija: "spidometar",
speed: 50,
maxspeed: 68
}
if (data.akcija == "spidometar") {
$(".box-tekstic").html(Math.round(data.speed))
if (data.speed > 0) {
$("#SpeedIndicator").text(data.speed);
let multiplier = data.maxspeed * 0.1;
let SpeedoLimit = data.maxspeed + multiplier;
Speedometer = (data.speed / SpeedoLimit);
}
}
function changeSpeed(target, data) {
setTimeout(function() {
if (target < data.speed)
data.speed--;
if (target > data.speed)
data.speed++;
$('.box-float .box3').css("--p", data.speed + '');
if (target != data.speed) {
changeSpeed(target, data );
}
}, 100)
}
changeSpeed(25, data);
});
})(jQuery);
.box-float {
position: relative;
left: 5vh;
top: 34vh;
}
.box {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width: 180px;
height: 180px;
transform: rotate(160deg);
border-radius: 50%;
padding: 25px;
background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box2 {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
position: absolute;
width: 194px;
left: 1.6vh;
top: 6px;
height: 193px;
transform: rotate(160deg);
border-radius: 50%;
padding: 12px;
background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box3 {
--v: calc( ((18/5) * var(--p) - 90)*1deg);
background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
-webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-float">
<div class="box" style="--p:68;"></div>
<div class="box2" style="--p:68;"></div>
<div class="box2 box3" style="--p:50;"></div>
</div>

How to make a draggable item from a draggable item?

I have a window that is draggable and I want to make the document that this window has to be independent and it can be dragged and when dropped the element is copied to where it was dragged and for it to also stay in the window. Basically when what is supposed to do is you drag the document out of the window into anywhere in your screen and when you stop dragging, the document is copied and you have a document on the window and one on your screen. The one on the screen can't be copied but can be dragged. How do I do it?
dragElement(document.getElementById("documento"));
dragElement(document.getElementById("docwindow"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
#janela,
#docwindow,
#BlueWindow {
position: absolute;
width: 40%;
height: 38%;
left: 100px;
}
#docwindowheader,
#BlueWindowheader {
height: 7%;
background: rgb(30, 87, 153);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 */
}
#closeDocs,
#closeBlue {
width: 15px;
height: 15px;
position: absolute;
border-radius: 100%;
top: 4.2%;
right: 1%;
z-index: 2;
}
#docsHeadTexto,
#JoanaPTexto {
color: black;
text-align: center;
text-shadow: 3px 2px grey;
font-size: 95%;
top: 25%;
}
#DocImg {
width: 20%;
height: 20%;
background-color: none;
padding: 5px;
}
img#DocImg {}
#bottomWindowDocs {
background-color:pink;
height: 80%;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
#DocEx {
position: absolute;
top: 33%;
left: 4%;
font-size: 10px;
}
#DocEx {
z-index: 6;
}
<div class="janelas" id="docwindow">
<div id="docwindowheader">
<header class="windowTop">
<h1 id="docsHeadTexto">Documents</h1>
<img id="closeDocs" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="closeMain()">
</header>
</div>
<div id="bottomWindowDocs">
<div class="documents">
<div id="documento">
<img id="DocImg" src="https://img.icons8.com/pastel-glyph/2x/file.png" alt="doc">
<h1 id="DocEx">Doc-example</h1>
</div>
</div>
<!----<div id="DocExemplo" S>
<header class="windowhead">
Documento exemplo
<img class="X" src="https://banner2.kisspng.com/20180402/dwe/kisspng-computer-icons-social-media-email-webmail-cancel-button-5ac240963875f3.0504665115226799582313.jpg" alt="X" onclick="closeMain()">
<button id="share">share</button>
<button id="back">back</button>
</header>
<div id="corpo">
<h4>Este é um exemplo de Documento</h4>
</div>
</div>-->
</div>
</div>

Just to illustrate the basic functionality using jQuery's draggable(), check this demo on jsFiddle.
Here's the JS you would need to allow dragging one element with children that may be dragged and dropped separately:
$('#doc-container').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
cursor: 'move',
greedy: true,
drop: function(event, ui) {
console.log(ui);
$(ui.draggable).removeClass("out-of-box").addClass("in-box");
ui.draggable.detach().appendTo($(this));
}
});
$('#larger-drop-target').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
cursor: 'move',
drop: function(event, ui) {
$(ui.draggable).removeClass("in-box").addClass("out-of-box");
ui.draggable.detach().appendTo($(this));
}
});
$("#doc-container, .draggable").draggable({});
My sample uses the following HTML layout:
<div id="larger-drop-target">
<div id="doc-container" class="ui-widget-header droppable">
<header class="windowTop">
<h1 id="docsHeadTexto">Documents</h1>
</header>
<div id="draggable" style="left:0;" class="draggable ui-widget-content">
Doc Example
</div>
</div>
</div>
and CSS Code:
#larger-drop-target {
width: 100%;
height: 100%;
}
.draggable {
width: 80px;
height: 80px;
padding: 5px;
position: absolute;
}
#doc-container {
height: 200px;
}
.in-box {
background: #FEE;
}
.out-of-box {
background: #EFE;
}
Some explanatory words:
droppable() defines those elements that may accept elements to be dragged onto. In the sample I could not use the HTML "body" element as this wouldn't work in a fiddle so I decided to wrap the #doc-container in the larger container #larger-drop-target. The .detach() and .attachTo() makes sure the element's parent is removed and assigned to the current drop target, otherwise child elements would still move with their parent even if they have been dropped outside of it.
draggable() defines those elements that may be dragged around.
the classes applied to the dropped elements are just for demonstration purpose; elements that have been dropped on the #doc-container appear red, those dropped outside of it are green.
the position: absolute for dragged elements was necessary as otherwise elements would constantly move around whenever one element was moved. If you need several "documents" in your container, give each a fitting left: X00px; style
Update 1:
You may clone each element as soon as it leaves the parent container and when dragged back remove it using class checks and .clone() / .remove():
$('#doc-container').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
cursor: 'move',
greedy: true,
drop: function(event, ui) {
if (ui.draggable.hasClass('out-of-box')) {
ui.draggable.remove();
} else {
$(ui.draggable).removeClass("out-of-box").addClass("in-box");
ui.draggable.detach().appendTo($(this));
}
}
});
$('#larger-drop-target').droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
cursor: 'move',
drop: function(event, ui) {
if (ui.draggable.hasClass("in-box")) {
var clone = ui.draggable.clone();
clone.removeClass("in-box").addClass("out-of-box");
clone.detach().appendTo($(this)).draggable({});
ui.draggable.draggable({
revert: true
});
}
}
});
Here is a Fiddle showing the changed version.

How to stop recalculate value every time it's being finished?

I have a clock written with pure Javascript and CSS. Every time when new minute begins, my const which is responsible for rotating clocks hands is recalculated to first value (90deg). It causes problem because the clock's hand should rotate back to the first position from the end.
I would like that my rotate value will not restart and always go on new minute\hour with current rotate value.
Check my demo
What I do?
CSS
.clock {
width: 20rem;
height: 20rem;
border: 1px solid rgba(0, 0, 0, .3);
background: #ffafbd;
/* Old browsers */
background: -moz-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffafbd 0%, #ffc3a0 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffafbd', endColorstr='#ffc3a0', GradientType=0);
/* IE6-9 */
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
/* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 2px;
background: #4568dc;
/* Old browsers */
background: -moz-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #4568dc 0%, #b06ab3 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4568dc 0%, #b06ab3 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4568dc', endColorstr='#b06ab3', GradientType=0);
/* IE6-9 */
position: absolute;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: transform .2s cubic-bezier(0, 2.48, 0.72, 0.66);
}
.hour-hand {
top: 45%;
left: 32.5%;
width: 35%;
transform-origin: 75%;
}
JavaScript
const secondHand = document.querySelector(".second-hand");
const minutesHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
function getDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsRotate = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
const minutes = now.getMinutes();
const minutesRotate = ((minutes / 60) * 360) + 90;
minutesHand.style.transform = `rotate(${minutesRotate}deg)`;
const hours = now.getHours();
const hoursRotate = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hoursRotate}deg)`;
console.log(hours);
}
setInterval(getDate, 1000);

You can simple disable the secondHand.style.transition when secondHand transform rotate degrees reach 90:
const secondsRotate = ((seconds / 60) * 360) + 90;
if(secondsRotate == 90) {
secondHand.style.transition = "none";
} else {
secondHand.style.transition = "transform .2s cubic-bezier(0, 2.48, 0.72, 0.66)";
}
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
See it working here: http://codepen.io/clytras/pen/bgpvxB

I have come across with this solution based on modifying the transition curve at a specific second:
function getDate() {
const now = new Date();
const seconds = now.getSeconds();
secondsRotate = ((seconds / 60) * 360) + 90;
if(seconds == 0) {
secondHand.style.transitionDuration = "1s";
secondHand.style.transitionTimingFunction = "cubic-bezier(0.545, 0.060, 0.360, 1.225)";
secondsRotate = ((1 / 60) * 360) + 90;
}
else if(seconds == 1) {
secondHand.style.transitionDuration = "0.2s";
secondHand.style.transitionTimingFunction = "cubic-bezier(0, 2.48, 0.72, 0.66)";
}
secondHand.style.transform = `rotate(${secondsRotate}deg)`;
const minutes = now.getMinutes();
const minutesRotate = ((minutes / 60) * 360) + 90;
minutesHand.style.transform = `rotate(${minutesRotate}deg)`;
const hours = now.getHours();
const hoursRotate = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hoursRotate}deg)`;
console.log(minutesRotate);
}
Codepen: http://codepen.io/anon/pen/bgpvoe

Transition div from one background gradient to another

I'm trying to get a div to transition from one background gradient to another. I have a magnetic scroll effect setup so that when the user scrolls down, or hits the arrow key down, the h1 title changes and the background gradient slowly transitions to another gradient. I have the magnetic scroll and h1 effects working fine. I even have the background gradients changing when they're supposed to. The problem is that I need these transitions to be super smooth. Currently they flash to the next gradient. I've been trying all kinds of hacks for a couple weeks now and can't seem to get anything to work. Visit the project live at alopexid.com.
My jQuery:
jQuery(document).ready(function($) {
$(document).foundation
//find page height
var windowHeight = $('html').height();
//find each line's section height
var pageHeight = windowHeight*7;
//script for scrolling text on home page.
$(window).scroll(function(event){
var currentHeight = $('body').scrollTop();
//load in static home page if bottom of scroll is reached
//alert(currentHeight);
//grad1
if (currentHeight == 0 && currentHeight < windowHeight){
//$(".home-gradient").css("background", "linear-gradient(135deg, #65c9de 0%, #cbd45a 100%)");
$("#home-gradient").removeAttr('style');
$(".home-gradient").removeClass('grad2');
$(".home-gradient").addClass('grad1');
}
//grad2
else if (currentHeight >= windowHeight && currentHeight < windowHeight*2){
//$(".home-gradient").css("background", "linear-gradient(135deg, #cbd45a 0%, #009688 100%)");
$("#home-gradient").removeAttr('style');
$(".home-gradient").removeClass('grad1');
$(".home-gradient").removeClass('grad3');
$(".home-gradient").addClass('grad2');
}
//grad3
else if (currentHeight >= windowHeight*2 && currentHeight < windowHeight*3){
//$(".home-gradient").css("background", "linear-gradient(135deg, #009688 0%, #FFC107 100%)");
$(".home-gradient").removeClass('grad2');
$(".home-gradient").removeClass('grad4');
$(".home-gradient").addClass('grad3');
}
//grad4
else if (currentHeight >= windowHeight*3 && currentHeight < windowHeight*4){
//$(".home-gradient").css("background", "linear-gradient(135deg, #FFC107 0%, #E91E63 100%)");
$(".home-gradient").removeClass('grad3');
$(".home-gradient").removeClass('grad5');
$(".home-gradient").addClass('grad4');
}
//grad5
else if (currentHeight >= windowHeight*4 && currentHeight < windowHeight*5){
//$(".home-gradient").css("background", "linear-gradient(135deg, #E91E63 0%, #9C27B0 100%)");
$(".home-gradient").removeClass('grad4');
$(".home-gradient").removeClass('grad6');
$(".home-gradient").addClass('grad5');
}
//grad6
else if (currentHeight >= windowHeight*5 && currentHeight < windowHeight*6){
//$(".home-gradient").css("background", "linear-gradient(135deg, #9C27B0 0%, #65c9de 100%)");
$(".home-gradient").removeClass('grad5');
$(".home-gradient").addClass('grad6');
}
//grad1
else if (currentHeight >= windowHeight*6) {
$(".home-gradient").removeClass('grad6');
$(".home-gradient").addClass('grad1');
$("#scroll-text").text("We are Alopex.");
$(".home-big-gradient").css("display", "none");
$(".home-gradient").css("display", "block");
$("#frame-logo").hide();
$("#scroll-guide").hide();
$(".header").show(1500);
$("#skip-intro").hide();
$('#weather-color').css('display', 'block');
$('#scroll-text').css('display', 'block');
window.magneticScroll = undefined;
return;
}
});
My HTML:
<div class="home-gradient" id="home-gradient">
</div>
<div class="home-big-gradient">
<h1 class="magnetic">We are Alopex.</h1>
<h1 class="magnetic">A digital marketing firm.</h1>
<h1 class="magnetic">Building websites & apps.</h1>
<h1 class="magnetic">In Palmer, Alaska.</h1>
<h1 class="magnetic">Some of us are designers.</h1>
<h1 class="magnetic">Some of us are developers.</h1>
<h1 class="magnetic">We are Alopex.</h1>
</div>
My CSS:
.home-gradient {
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
opacity: .75;
position: fixed;
}
.grad1 {
background: rgb(101, 201, 222);
background: -moz-linear-gradient(-45deg, rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* FF3.6-15 *///rgba(101, 201, 222, 1) #65C9DE | rgba(203, 212, 90, 1) #CBD45A
background: -webkit-linear-gradient(-45deg, rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(101, 201, 222, 1) 0%, rgba(203, 212, 90, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-image: -webkit-linear-gradient(-45deg, #65c9de 0%, #cbd45a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65c9de', endColorstr='#cbd45a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad2 {
background: rgb(203, 212, 90);
background: -moz-linear-gradient(-45deg, rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* FF3.6-15 *///rgba(203, 212, 90, 1) #CBD45A | rgba(0, 150, 136, 1) #009688
background: -webkit-linear-gradient(-45deg, rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(203, 212, 90, 1) 0%, rgba(0, 150, 136, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd45a', endColorstr='#009688',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad3 {
background: rgb(0, 150, 136);
background: -moz-linear-gradient(-45deg, rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* FF3.6-15 */// rgba(0, 150, 136, 1) #009688 | rgba(255, 193, 7, 1) #FFC107
background: -webkit-linear-gradient(-45deg, rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0, 150, 136, 1) 0%, rgba(255, 193, 7, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009688', endColorstr='#FFC107',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad4 {
background: rgb(255, 193, 7);
background: -moz-linear-gradient(-45deg, rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* FF3.6-15 */// rgba(255, 193, 7, 1) #FFC107 | rgba(233, 30, 99, 1) #E91E63
background: -webkit-linear-gradient(-45deg, rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255, 193, 7, 1) 0%, rgba(233, 30, 99, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC107', endColorstr='#E91E63',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad5 {
background: rgb(233, 30, 99);
background: -moz-linear-gradient(-45deg, rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* FF3.6-15 */// rgba(233, 30, 99, 1) #E91E63 | rgba(156, 39, 176, 1) #9C27B0
background: -webkit-linear-gradient(-45deg, rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(233, 30, 99, 1) 0%, rgba(156, 39, 176, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E91E63', endColorstr='#9C27B0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grad6 {
background: rgb(156, 39, 176);
background: -moz-linear-gradient(-45deg, rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* FF3.6-15 */// rgba(156, 39, 176, 1) #9C27B0 | rgba(101, 201, 222, 1) #65C9DE
background: -webkit-linear-gradient(-45deg, rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(156, 39, 176, 1) 0%, rgba(101, 201, 222, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9C27B0', endColorstr='#65c9de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.home-big-gradient {
/*this is changed to block in desktop below around line 337*/
display: none;
}
Any help here would be amazing. I've read lots of comments about this not being possible but those are mostly from 2 to 5 years ago. There's got to be some kind of plugin or workaround out there. Thanks in advance for any help!

background gradient doesn't support transition but you could hack this creating another div that has a z-index bigger than your body or what contain your gradient but a lower z-index then the page content and opacity:0 so you can apply the gradient to this div then make it visible and finally apply the gradient to the body, delete it from the div and hide it.
I know that from this aswere you don't get how to do this so this DEMO will help you.
However I don't advice to use this strategy to avoid background gradient transition and keep the site as it is now.

Have you tried using ScrollReveal.js? You should be able to customize it to be able to transition the different backgrounds. And it would allow you to control the transitions by setting the delay property. I've used this library in some of my web pages and it's very easy to use, and you can pass it almost any element.

Slider Bar with Trail?

I would like there to be an orange gradient trail behind the slider bar as it moves. Here's the fiddle.
Orange Gradient Code:
background: linear-gradient(to bottom, rgba(241,194,16,1) 0%,rgba(239,192,14,1) 11%,rgba(243,186,17,1) 29%,rgba(242,181,15,1) 39%,rgba(243,172,18,1) 57%,rgba(241,168,14,1) 68%,rgba(244,164,17,1) 79%,rgba(240,158,20,1) 100%);
The finished version should look like this, and I only want it through JavaScript or jQuery and HTML/CSS.

How's this?
$(function() {
$(".vHorizon").change(function() {
var slider = $(this);
var min = slider.prop('min');
var max = slider.prop('max');
if (!min) min = 0;
if (!max) max = 100;
var percent = (slider.val() - min) / (max - min);
var cover = slider.next();
var coverWidth = cover.attr('mwidth');
cover.css('width', 'calc(' + percent + ' * ' + coverWidth + ')');
});
$(".vHorizon").change();
});
input[type=range].vHorizon,
.vHorizonCover {
-webkit-appearance: none;
background-color: #8a9398;
height: 26px;
width: 590px;
margin: 65px 0 0 5px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("http://i.imgur.com/ZmVoXyE.png?1");
background-repeat: no-repeat;
width: 20px;
height: 52px;
}
.vHorizonContainer {
position: relative;
}
.vHorizonCover {
position: absolute;
top: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(241, 194, 16, 1) 0%, rgba(239, 192, 14, 1) 11%, rgba(243, 186, 17, 1) 29%, rgba(242, 181, 15, 1) 39%, rgba(243, 172, 18, 1) 57%, rgba(241, 168, 14, 1) 68%, rgba(244, 164, 17, 1) 79%, rgba(240, 158, 20, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vHorizonContainer'>
<input type="range" class="vHorizon" />
<div class='vHorizonCover' mwidth='590px'></div>
</div>
It won't work as well in IE 10 or earlier (the css pointer-events property is not supported).
I created a div to cover the slider, and changed its width using jQuery based on the slider's value.