I'm trying to change the color of a gradient background in kind of a trippy manner (The colors are going to be weird)
I wrote the code below but i dont understand why I cant change the background color at all.
var start1 = [0,216,255];
var start2 = [50,255,224];
setInterval(function (){
$("body").css("background", "-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb("+start1[0]+", "+start1[1]+", "+start1[2]+")), to(rgb("+start2[0]+", "+start2[1]+", "+start2[2]+")));");
start1[0] = checknumber(start1[0]+1);
start1[1] = checknumber(start1[1]+1);
start1[2] = checknumber(start1[2]+1);
start2[0] = checknumber(start1[0]+1);
start2[1] = checknumber(start1[1]+1);
start2[2] = checknumber(start1[2]+1);
},100);
I dont get any errors and the background only stays white. I'm guessing it's going to be a little more complicated than I imagined
The the checknumber() function just checks if the number is greater than 255- if it is then it resets back at 0.
Are you looking for something like this:
http://jsfiddle.net/4nuhpmov/
The issue was your CSS syntax, I think you may have been using an old reference.
I changed the CSS manipulation JavaScript as follows:
$("body").css("background",
"linear-gradient(" + degrees + "deg, rgba(" + start1[0] + ", " + start1[1] + ", " + start1[2] + ", 1), rgba(" + start2[0] + ", " + start2[1] + ", " + start2[2] + ", 1))");
I also added a counter for degrees.
This is probably not the best way to do this but it should get you started (I don't think it's as trippy/crazy as you expected but you can play around with the values).
You can use the following link to find the most up-to-date syntax:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Related
I am trying to build pure javascript slider following the tutorial here with minor customisation.
The problem I had was: if I add more than 7 slides, 7th and onwards won't display correctly. Only dark grey screen is shown instead of the picture I selected.
I tried debugging for hours and still can't figure it out. Hopefully, some experts can shine some light on this problem.
JSFIddle by the author of the code: https://jsfiddle.net/solodev/yokph2nh/
Snippet of code:
function changeSlides(instant) {
if (!instant) {
animating = true;
manageControls();
$slider.addClass("animating");
$('#slide-content').addClass("animating");
$slider.css("top");
$(".slide").removeClass("active");
$(".slide-" + curSlide).addClass("active");
setTimeout(function() {
$slider.removeClass("animating");
$('#slide-content').removeClass("animating");
// Update content
let currentContent = $(".slide-" + curSlide + " .slide__content").html();
$('#slide-content').html(currentContent);
animating = false;
}, animTime);
}
window.clearTimeout(autoSlideTimeout);
$(".slider-pagi__elem").removeClass("active");
$(".slider-pagi__elem-" + curSlide).addClass("active");
$(".slider-tab__elem").removeClass("active");
$(".slider-tab__elem-" + curSlide).addClass("active");
$slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)");
$slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)");
diff = 0;
autoSlide();
}
Here is an altered fiddle of the one you posted, with more images.
https://jsfiddle.net/5xhtq4hL/
Seems to work ok.
Maybe you didn't update the css values for left on the
.slide:nthchild() selector?
This code doesn't seem very DRY though. So much copy pasting.
I'm currently using ScrollReveal.js to make a bunch of tiny pixelated boxes do random things when scrolled upon, with the following code:
var index=0;
$(document).ready(function(){
jQuery('.pixel-box').each(function() { //each tiny box has class pixel-box
var directions =[ 'left', 'right', 'top', 'bottom']
index += 1
var currentElement = $(this);
var randEffect = getRandomInt(0,1);
var randTime = getRandomArbitrary(1, 3.5);
var randDirection = getRandomInt(0,3);
if(randEffect == 0){
var rand = getRandomInt(-360, 360);
$(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] + ', flip ' + rand + 'deg, over '+ randTime +'s');
}
else if(randEffect == 1){
// move 24px
var rand = getRandomInt(10, 120);
$(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] +', move '+ rand + 'px, over '+ randTime +'s');
}
if(index == 81){
window.sr = new scrollReveal();
}
});
});
It's working perfectly on Chrome, but on Safari, the behavior is extremely clunky and not what I want. Would you or anyone else have any insights as to why this is happening?
To illustrate, here's what it looks like on Chrome:
https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af
Here's what it looks like on Safari:
https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef
For reference, one of these boxes is being rendered using the HTML code:
<rect class="pixel-box" id="Rectangle-167-Copy-7" fill="#FDD93D" filter="url(#filter-35)" x="823.65422" y="188.994877" width="16.675" height="19.0983607"></rect>
I suspect that the problem may be due to inconsistencies with CSS transformations and SVG elements like <rect> and <path> across different browsers, but I haven't been coming up with much.
Looks like a browser issue with Safari animating opacity and transforms at the same time.
...we came across a particularly frustrating bug in Safari involving
animation of SVG elements using CSS3 transforms and opacity
simultaneously.
Safari will not animate both attributes at the same time, instead
choosing to animate the opacity with the correct timings and when that
animation is complete the transform jumps to its correct position, or
the translation is just ignored completely.
Reference: https://www.theparticlelab.com/safari-svg-animation-bug/
Looks like others have had similar problems in the past, but the browser bug appears fixed.
I am trying to have a function that runs infinitely. It gets a random hue, and then inserts it into the color property. Here is my code:
<script>
function colorMe(){
var hue = Math.floor((Math.random() * 359) + 1);
document.getElementById("hie").style.color = hsl(hue, 75%, 50%);
colorMe();
}
colorMe();
</script>
<p id="hie">I don't know what color this will be!</p>
Thanks in advance.
You have to put the hsl part in quotes.
document.getElementById("hie").style.color = "hsl("+hue+", 75%, 50%)";
A couple of things - first, you're calling colorMe from within the colorMe function. You probably don't want to do that. Second is that hsl doesn't exist as a javascript method - it's a css function. Try setting the color equal to a string which contains your updated hsl color, as seen here: http://jsfiddle.net/99h5s0L6/
function colorMe() {
var hue = Math.floor((Math.random() * 359) + 1);
document.getElementById("hie").style.color = "hsl(" + hue + ", 75%, 50%)";
}
colorMe();
I'm not sure, but personally I would use filter: hue-rotate(30deg) instead.
I'm not sure about IE support, but it's supported in FF and Chrome (via vendor prefix). Example:
-webkit-filter: hue-rotate(30deg);
filter: hue-rotate(30deg);
Just vary the degrees of rotation randomly and set it accordingly.
Edit:
Using jQuery:
$('#hie').css("-webkit-filter","hue-rotate(" + hue + "deg)")
$('#hie').css("filter","hue-rotate(" + hue + "deg)")
I am trying to write a javascript app which sorts dynamically created divs on a webpage, everything works and it sorts it all as it should, however I want it to animate the divs as they change position due to being sorted, I have code to do this but it moves way too fast, the only way I can see the divs move is if I put an alert in the animation code which looks like this :
function moveAnimation(to,from){
mover1.style.backgroundColor = "rgba(255,100,175,0.8)";
mover2.style.backgroundColor = "rgba(255,100,175,0.8)";
mover1.style.top = parseInt(mover1.style.top) + 10 + 'px';
mover2.style.top = parseInt(mover2.style.top) - 10 + 'px';
from = parseInt(mover1.style.top);
if(from != to && from < to)
{
//alert("TO : " + to + " From : " + from); //This makes it pause so that I can see the divs move
animate = setTimeout(moveAnimation(to,from),1000)
}
else
{
//alert("RET");
return;
}
}
And i call it simply like this :
mover1 = document.getElementById(moving1.id);
mover2 = document.getElementById(moving2.id);
var from = parseInt(in1.style.top);
var to = parseInt(in2.style.top);
moveAnimation(to,from);
When the alert is in place I can see them move frame by frame and it's doing exactly what I want, however it all happens in the blink of an eye with the divs suddenly being sorted, I would like to see them slowly move, any ideas on why my code isn't doing that?
I have a shopping cart with a total at the bottom of the screen. I would like some way of simulating the itunes store method of notifying a purchase by the price flying down to the total. This is going to be on android and iphone/pod so something lightweight would be best. I use jquery on this site (not UI). Any Suggestions?
Basically I want to have text move from one position to another. So far I can work out how to find the to and from postions
var p = $("#"+item).find("small");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top );
var p = $(".total");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top );
Now to figure out how to move text from point A to point B.
Check out http://jquerymobile.com/