How to give an animation to border - javascript

I have a div that has a gradient border. So I want to give this div an animation and as soon as it is scrolled to this div, I want border-gradient turn around itself. I have no idea how to do it that's why I am asking it direcly.
<div class="border-gradient">
</div>
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(190deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
}

I was unable to find a css solution for animating the border, it may be achievable using images.
Anyways, here is a javascript solution
var bored = document.getElementsByClassName("border-gradient")[0];
var anim = {'running':0,'deg':0,'time':0};
var animator;
var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page
checkscroll();//check if element onscreen initially
window.onscroll = checkscroll;//check if element is onscreen when the user scrolls
function checkscroll() {
if(!anim.running && window.scrollY + window.innerHeight >= boredy) {
anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running
startanim();
}
}
function startanim() {
animator = setInterval(function() {
anim.deg += 1;
anim.time += 50;
bored.style = `border-image:linear-gradient(${anim.deg}deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`;
if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0}
},50);//start a loop that continousouly updates the border
}
Css:
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(0deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
margin-top:150vh;
}
Improvements can certainly be made. So play around with it and tweak it to your liking.

you can animate border as:
.border-gradient {
border: solid 5px #FC5185;
transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }

Related

Make a card stretch to left slowly

I have a div element with the class arrow-card inside the width there is another div with the class arrow-body it will make up a card so I want the card to grow width to the left slowly as soon as I click it
right to left with the transition.
.arrow-body{
box-shadow: 0 4px 8px 0 rgb(0,0,0,0.3);
width: 0px;
top: 130px;
position: relative;
display: none;
}
<div class="arrow-card">
<div class="arrow-body"></div>
</div>
if(window.getComputedStyle(arrow_body).
getPropertyValue("padding")==="0px"){
arrow_body.style.display = "initial";
arrow_body.style.transition = "0.2s";
arrow_body.style.width = "60px"
}else{
arrow_body.style.display = "none";
arrow_body.style.padding = "0px"
}
Problem 1: if you change display from none -> initial, you won't get any transitions
Problem 2: the element has no height, so you won't see it anyway
Fix for 1: change the display to initial, add the transition, then in a setTimeout (of zero duration) change the width of the element
Fix for 2: give the element some height or some content which gives it height
let arrow_body = document.querySelector('.arrow-body');
if (window.getComputedStyle(arrow_body).getPropertyValue("display") === "none") {
arrow_body.style.display = "block";
arrow_body.style.transition = "0.2s";
setTimeout(() => arrow_body.style.width = "60px");
} else {
arrow_body.style.display = "none";
arrow_body.style.padding = "0px"
}
.arrow-body {
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, 0.3);
width: 0px;
top: 130px;
position: relative;
display: none;
}
<div class="arrow-card">
<div class="arrow-body"> </div>
</div>

Firefox not hiding cursor using cursor: none;

I've made a simple demo here: https://jsfiddle.net/bwmgazfx/1/
The line of CSS works in Chrome and IE11.
*, html { cursor: none !important; }
In Chrome and IE11 the cursor is hidden, but in Firefox (version 60)the cursor sometimes hides when you hold the mouse button down but otherwise stays visible. I know that cursor: none; works in Firefox but I can't seem to track down the problem as to why it's not being hidden.
My question is, why is the cursor not hidden in Firefox 61?
Your CSS is correct, however, some browsers (your case FireFox) will still show the cursor if the document height is not filled 100%
Adding below to your CSS will fix this.
html, body {
height: 100%;
}
var x = null;
var y = null;
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousedown', onClickMouse, false);
document.addEventListener('mouseup', onReleaseMouse, false);
var $mousePointer = document.getElementById('mouse-pointer');
function onMouseUpdate(e) {
x = e.pageX;
y = e.pageY;
$mousePointer.style.top = y + "px";
$mousePointer.style.left = x + "px";
}
function onClickMouse(e) {
$mousePointer.style.transform = "matrix(0.75, 0, 0, 0.75, 0, 0)";
}
function onReleaseMouse(e) {
$mousePointer.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
}
html, body {
height: 100%;
}
*, html {
cursor: none;
}
body {
background-image: url(tile.jpg);
background-repeat: repeat;
}
#mouse-pointer {
width: 12px;
height: 12px;
position: absolute;
background-color: red;
border-radius: 50%;
transform: matrix(1, 0, 0, 1, 0, 0);
transition: transform 0.4s;
}
<div id="mouse-pointer"></div>

Javascript Traffic light

<!DOCTYPE>
<html>
<body>
<img id="traffic" src="assets/red.gif">
<button type="button" onclick="ChangeLights()">Change Lights</button>
<script>
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights() {
setInterval(function () {ChangeLights();}, 1000);
index = index + 1;
if (index == lights.length) index = 0;
var image = document.getElementById('traffic');
image.src=lights[index];
}
</script>
</body>
</html>
Hi, I am trying to make an animation script using JavaScript so that a traffic light sequence changes from red - yellow - green - yellow on a timer once a button is pressed. I only want the sequence to loop once. However, when I implemented the setInterval function into the function, the lights only change from red - yellow - green - red.
Thank you for any help!
var lights = {
red: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
yellow: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png",
green: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
};
var sequence = ['red', 'yellow', 'green', 'yellow'];
function startChangeLights() {
for (var index = 0; index < sequence.length; index++) {
changeLight(index, sequence[index]);
}
function changeLight(index, color) {
setTimeout(function() {
var image = document.getElementById('traffic');
image.src = lights[color];
}, index * 1000);
}
}
<div>
<img height=100px id="traffic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png">
</div>
<div>
<button type="button" onclick="startChangeLights()">Change Lights</button>
</div>
https://codepen.io/anon/pen/VbKQNj?editors=1011
If you are looking for one time sequence, you have to use "setTimeout" method in javascript and besides, define an inner function like the following:
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights() {
function innerChangeLight(){
index = index + 1;
if (index == lights.length) index = 0;
var image = document.getElementById('traffic');
image.src=lights[index];
}
innerChangeLight();
setTimeout(function () {
innerChangeLight();
}, 1000);
}
<!DOCTYPE>
<html>
<body>
<img id="traffic" src="assets/red.gif">
<button type="button" onclick="ChangeLights()">Change Lights</button>
</body>
</html>
Try this:
var lights = [
"assets/red.gif",
"assets/yellow.gif",
"assets/green.gif",
"assets/yellow.gif",
];
var index = 0;
function ChangeLights(){
setInterval(function() {
if(index == lights.length) {
return;
}
var image = document.getElementById('traffic');
image.src=lights[index];
index = index + 1;
}, 1000);
}
<img id="traffic" src="assets/red.gif"><br>
<button onclick="ChangeLights()">Change Lights</button>
New instance of 'Traffic Light':
Traffic Lights can't always be the same duration in every light....
So, i started to expand this html code..
The improved code with different seconds in every light:
// Traffic Light
// Improved with different durations in every light!
// But in this html code, i will use input tag instead
var TrafficLights = (function() {
// The image
var imageTag = document.getElementById("lightImg");
// Keep track of whether the sequence is running
var running = false;
// Different stages of the traffic light (Also defines the light)
var stages = [
{
"name": "red",
"path": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Traffic_lights_red.svg/200px-Traffic_lights_red.svg.png",
},
{
"name": "green",
"path": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Traffic_lights_dark_green.svg/200px-Traffic_lights_dark_green.svg.png"
},
{
"name": "yellow",
"path": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Traffic_lights_yellow.svg/200px-Traffic_lights_yellow.svg.png"
}
];
// Different amount of seconds in every light change (Must be an positive integer!)
var seconds_every_step = [
18,
24,
3
];
// Current stage of the traffic light
var stage = 0;
// Current steps of the traffic light
var steps = 0;
// Timer for automatically changing light
var timer = null;
/** * Start the traffic light sequence * */
function start() {
// Mark that the light sequence is running
running = true;
// Tell the light to change
changeLight();
}
/** * Stop the sequence from running * */
function stop() {
// Mark that the sequence is not running
running = false;
// Stop the automatic timer from running
clearInterval(timer);
}
/** * Change the light to the next one in the sequence * */
function changeLight() {
// If the timer is not running, this function does not need to do anything
if (running === false) {
clearInterval(timer);
return;
} else {};
// If the current stage gets higher than the number of stages there are, reset to 0
if (stage >= stages.length) {
stage = 0;
} else {};
// If the current steps gets higher than the number of seconds in a step there are, reset to 0
if (steps >= seconds_every_step.length) {
steps = 0;
} else {};
// Get the image from the list of stages
var image = stages[stage];
var wait_seconds = seconds_every_step[steps];
// Update the image tag and defines the light name
imageTag.src = image.path;
imageTag.alt = String("Traffic light color is " + image.name + ".");
// Increase the current stage by 1
stage++;
// Increase the current steps by 1
steps++;
// Set a timeout to change the light at the next interval
timer = setTimeout(changeLight, wait_seconds * 1000);
}
// These functions will be available on the `TrafficLights` object to allow interaction
return {
start: start,
stop: stop
}
})();
<input type="image" width="20px" id="lightImg" src="" alt="">
<br/>
<p>
<button type="button" onclick="TrafficLights.start()">Start Sequence</button> <button type="button" onclick="TrafficLights.stop()">Stop Sequence</button>
</p>
You may see an error code. Just ignore it...
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var green = document.getElementById("green");
var btn = document.createElement("BUTTON");
btn.innerHTML = "CLICK ME";
document.body.appendChild(btn);
red.style.opacity = "1";
yellow.style.opacity = "0.2";
green.style.opacity = "0.2";
btn.onclick = function () {
setTimeout(function(){red.style.opacity = "0.2";yellow.style.opacity = "1"; setTimeout(function(){yellow.style.opacity = "0.2";green.style.opacity = "1"; setTimeout(function(){green.style.opacity = "0.2";red.style.opacity = "1"}, 1000);}, 1000);
}, 1000);
}
html{
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.trafficlight{
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 20px;
position: relative;
border: solid 5px #333;
}
#red{
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 13s red infinite;
border: dotted 2px red;
box-shadow:
0 0 20px #111 inset,
0 0 10px red;
}
#yellow{
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px yellow;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow:
0 0 20px #111 inset,
0 0 10px yellow;
}
#green{
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
border: dotted 2px lime;
position: absolute;
top: 270px;
left: 35px;
box-shadow:
0 0 20px #111 inset,
0 0 10px lime;
animation: 13s green infinite;
}
<div class="trafficlight">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
I make a simple HTML and CSS Traffic light from an online example. Then I just create the condition for it to loop red-yellow-green-red.

Resize a div from two ends

I am making a div resizer and cannot use any plugin as I need to customize many things on it's basis. I have achieved the task to resize the div from right side. In this I am manipulating the drag and calculating the units accordingly.
This script works fine if I keep the drag limited to right side.
But now my task is to resize it on both ends. I understand that some technique would be applied.
One technique I am trying to apply is the half the div and notice the distance from that center point e.g if the center is 200px and the mouse is at 10px then we can start decreasing the div from right and vice-versa.
var handle, measurement, isResizing;
var pageWidth = $(window).width();
var maxUnit = 300;
var minUnit = 50;
var maxLimit;
var adjustment = 0;
var container;
function calculateUnit(maxUnit, maxLimit, currentWidth) {
var offset = maxLimit - currentWidth;
return Math.ceil(maxUnit - offset);
}
function adjustContainer(innerContainerWidth, widthDiff, heightDiff) {
handle.css({
'width': (innerContainerWidth - widthDiff) + 'px',
'left': (widthDiff / 2) + 'px',
'top': (heightDiff / 2) + 'px'
});
}
function InitSizeCalculator() {
container = $("#topDrag");
console.log('height c', container.height());
//console.log('width c', container.width());
handle = $('#drag'), measurement = document.getElementById('measurement'), isResizing = false;
var heightDiff = container.height() - 170;
var widthDiff = container.width() - handle.width();
console.log('height c', heightDiff);
//maxLimit = (pageWidth <= 720) ? (pageWidth - 20) : (pageWidth - (pageWidth / 3)) - 60;
maxLimit = container.width();
adjustContainer(handle.width(), widthDiff, heightDiff);
//handle.css('width', maxLimit);
measurement.innerHTML = maxUnit + ' m';
}
InitSizeCalculator(); //initialize the variable first
handle.on('mousedown touchstart', function(e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove touchmove', function(e) {
var currentWidth = e.clientX - adjustment;
console.log(e.clientX);
// we don't want to do anything if we aren't resizing.
var unit = calculateUnit(maxUnit, maxLimit, currentWidth);
if (!isResizing || unit < minUnit || e.clientX > maxLimit)
return;
handle.css('width', currentWidth);
measurement.innerHTML = unit + ' cm';
})
.on('mouseup touchend', function(e) {
// stop resizing
isResizing = false;
});
//start
.imgContainer-p {
position: relative !important;
border-right: black 1px dashed;
border-left: black 1px dashed;
cursor: w-resize;
height: 220px
}
#drag {
position: absolute;
/*right: 500px;*/
top: 0;
bottom: 0;
/*width: 500px;*/
}
.imgWinder {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 200px;*/
height: 90%;
}
.imgPaper {
position: relative;
top: 0;
left: 0;
width: 100%;
/*height: 200px;*/
height: 90%;
}
.measurment-p {
width: 100%;
height: 20px;
border-bottom: 1px dashed black;
border-left: 1px dashed black;
border-right: 0px dashed black;
padding-top: 10px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-9 col-sm-12" id="topDrag">
<div class="imgContainer-p" id="drag">
<img id="imgWinder" class="imgWinder" draggable="false" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Cylinder_geometry_rotated.svg/2000px-Cylinder_geometry_rotated.svg.png" />
<div style="width: 100%; height: 20px; border-bottom: 1px dashed black; border-left: 1px dashed black; border-right: 0px dashed black; padding-top: 10px; text-align: center">
<span style="background-color: #FFFFFF; padding: 0 10px;">
<span class="label label-default">Size</span>
<span class="label label-warning" id="measurement">01</span>
<!--Padding is optional-->
</span>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
When you drag an element from the right side to expand it, you're effectively updating the the right position of the element by adding the number of pixels covered in the drag action to its width.
This is how elements behave in a browser - left to right and hence similar to increasing width using CSS. But when you drag the opposite side of it, meaning the left hand side, the browser doesn't know how to handle this.
Now since you're resizing an element to the left hand side, you have space there, and the left edge of the element moves to a new position in that space, but you can't add width to the left. So, you have to give an illusion of it being added to the left hand side, by maintaining the right edge at its current position.
When you drag the element's left edge towards the left, calculate the difference between its old left position and its new left position, and add it to the width of the element. This will make sure the width expands to fit the new displacement.
When you drag the left edge towards the right side, to shrink the element, do the same procedure, except reduce it from the total width instead of adding it.
When you drag the right side towards the left, hence reducing the resize, calculate the difference and reduce it from the width.
This should help you with the code:
Adjust a div's height/width by dragging its left/top border without jQuery draggable?

How to dinamically update the child div width after insert other elements in the parent div

I have a main div (with fixed height and scroll-x and scroll-y):
<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>
and a bunch of child div created dynamically in js and inserted in the parent div with absolute position:
<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>
This divs can be created everywhere, also beyond the parent div height and width (I don't care because I get the scrollbars).
My problem is:
there are other child divs (created in js) that represent a background like a chart. The divs have a border and a width of 100%. An example of one of them:
<div style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>
When javascript create dynamically the divs, the background don't update his width to the new one (if the divs go beyond the parent measures).
So, if you scroll on the right, you don't see the background.
How can I do to give the right width (100%) to the background when the parent width is dynamically changed?
http://jsfiddle.net/4x2KP/157/
Thanks everybody!
I've do an work around to it, if you can add specific class to the axis divs.
You can listen to the scroll event on the #pippo and adjust the offset of the axis, as its fixed horizontally inside the #pippo. But you may have to separate the digit part and axis-line part to make the digit part movable by the scrollbar.
var t = 250;
var $axis;
var offsets;
$(document).ready(function(){
crea_bg();
setTimeout(function(){ pippo(); }, t);
});
var pos = 0;
function pippo(){
pos = pos + 30;
$("#pippo").append("<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>");
setTimeout(function(){ pippo(); }, t);
}
function crea_bg(){
var yyy = 0;
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>");
for (i = 25; i <= 300; i=i+25) {
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>");
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(i))+"px;'>"+i+"</div>");
}
$axis = $('.axis').css('left', 0);
}
$('#pippo').scroll(function() {
//var currentLeft = parseFloat($axis.css('left'));
//console.log($axis.css('left'), currentLeft, $axis.position().left);
//$axis.css('left', currentLeft - $axis.position().left);
$axis.css('left', '-=' + $axis.position().left);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>
I'm not sure if this is what you are asking for, but this code creates those background lines at the same time that the letters are written.
You can adjust it easily changing the "width" var.
var t = 250;
$(document).ready(function(){
crea_bg();
setTimeout(function(){ pippo(); }, t);
});
var pos = 0;
function pippo(){
pos = pos + 30;
crea_bg();
$("#pippo").append("<div style='z-index:3;position:absolute; top: 50px;"
+" left: "+pos+"px;border:solid 1px;'>m</div>");
setTimeout(function(){ pippo(); }, t);
}
function crea_bg(){
var yyy = 0;
var width = pos + 30;
$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;"
+"color:#ccc;position:absolute;width:"+width+"px;bottom:"+yyy+"px;'>0</div>");
for (i = 25; i <= 300; i=i+25) {
$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;"
+" color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>");
$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;"
+ "color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(i))+"px;'>"+i+"</div>");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>
Avoiding the typical document flow
If you must avoid the typical document flow, you'll need to insert another container between <div id="pippo"> and its child elements, then manually update the new container's width/height as needed.
Staying within the typical document flow
If you don't need to work around the normal document flow and are just searching for any possible way to make a parent expand, use a combination of display: inline-block and white-space: nowrap:
$(document).ready(function() {
setInterval(function() {
$('#pippo').append('<div class="childDiv">m</div>')
}, 250);
});
#pippo {
border: solid 2px #000;
height: 200px;
width: 100%;
overflow-y: scroll;
overflow-x: scroll;
white-space: nowrap;
}
.childDiv {
display: inline-block;
border: solid 1px #000;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="pippo"></div>

Categories

Resources