I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.
What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and open them in order like a spiral and then close them in order. Starting from blank and ending with blank. By open I mean some kind of slide effect (hard to think of the correct term) but think of a loading gif spiral that looks like it's spiraling. (Like the mac rainbow wheel, only making the previous colors disappear after cycling through.)
I'm using jquery and would prefer a jquery solution so I don't have to worry about browser compatibility issues, but I could accept css transitions as a last resort.
I've attached some images to give a better visual idea. I have no code right now but my plan was just to have a div inside the body where the jquery would draw or do this animation. I really don't even know where to start so I don't have anything to build from nor do I really know the exact terminology I'm looking for. Hopefully my images will give a better understanding. Thanks.
I used moredemons's answer as a basis, using CSS triangles. It does the same thing, but it properly separates the CSS so you don't have to edit the JS to edit the colors. The JS is also simpler, doesn't rely on if/elses for all 16 states.
The main benefit of a programatic solution over a gif is that you can customize the colors, sizes, animation rate more easily.
Small, green, blue, fast
Big, red, blue, slow
Big with a different arrangement
Initial HTML All triangles hidden
<div id ="ct" >
<div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
<div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
<br/>
<div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
<div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>
CSS
.triangle {
font-size:0;
border: 50px solid transparent;
display: inline-block;
width: 0;
height: 0;
margin:0;
padding: 0;
}
.triangle-se {
border-color: red red blue blue;
}
.triangle-sw {
border-color: red blue blue red;
}
.triangle-nw {
border-color: blue blue red red;
}
.triangle-ne {
border-color: blue red red blue;
}
.triangle-hide-tl {
border-top-color: transparent;
border-left-color: transparent;
}
.triangle-hide-tr {
border-top-color: transparent;
border-right-color: transparent;
}
.triangle-hide-br {
border-bottom-color: transparent;
border-right-color: transparent;
}
.triangle-hide-bl {
border-bottom-color: transparent;
border-left-color: transparent;
}
JS
setInterval((function(){
var index = 0;
// Which square is going to be modified in each stage (16 stages)
var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
// The clases to add and remove
var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];
return function() {
var el = $('#ct div.triangle').eq(map[index]);
if (index < 8) {
// Showing pieces
el.removeClass('triangle-hide-' + classesToChange[index] );
} else {
// Hiding pieces
el.addClass('triangle-hide-' + classesToChange[index - 8] );
}
index++;
if (index >= 16) {
index = 0;
}
};
})(), 200);
I know my solution is weird a lot, but there's no another solution as I see. I used borders to create 45° corners and jQuery animate with step on fake element.
So, look at this fiddle: http://jsfiddle.net/WYKmQ/1/
You're simply looking for an animated gif.
Why overcomplicate things with javascript when it's not needed.
A gif will show perfectly in any browser.
Here, it took me 3 minutes to do this. Less time than any code.
Update your example >> mi-creativity.com/test/color-wheel
You can achieve the same above effect by using what so called image-sprites, you include all of them in one image, queuing them vertically or horizontally and changing the background-position just like in this example (you can view the page source to know how to do it)
mi-creativity.com/test/fading-sprite-background
The above example uses a jquery plugin called jquery.bgpos.js as will as a .png image
Another way of doing it you can set each of above images as a back-ground image each for a different class wit ha numerical value and you change the div class by making use of toggleClass jquery property like in this example - check the page source -:
mi-creativity.com/test/fading-sprite-background
Which I prefer because it is easier to modify it and add more frames if you want.
P.S: you don;t need another blank frame at the beginning, just move the last frame to the beginning, because if you used two blank frames that would affect the smoothness of the motion
Related
I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.
At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}
I'm just learning to make a button, to change the color of the button when we hover over one clickable image. for example when we point the cursor to one of the colored images, (red, blue, yellow), then when we click the color image that we like for example click the yellow color,
then the button changes, to yellow, is there an example for me in the phaser that points to it, using phaser 3
Add the images and the button, and use setTint() to change the button color. (Or setTintFill().)
var image1 = this.add.image(....);
var image2 = this.add.image(....);
...
image1.setInteractive().on('pointerdown', function() {myButton.setTint(0xff0000)});
image2.setInteractive().on('pointerdown', function() {myButton.setTint(0x0000ff)});
The funny thing in your example is that you want to use images as buttons, and a button as an image...
you can do this with vanilla JS, take a look on the example: https://codepen.io/lessadiogo/pen/yLyvxQQ
HTML:
<div class="img" data-color="yellow" onclick="changeBtnColor('yellow')"></div>
<div class="img" data-color="green" onclick="changeBtnColor('green')"></div>
<button>I got changed!</button>
CSS:
.img {
width: 100px;
height: 100px;
float: left;
}
.img[data-color=yellow] {
background-color: yellow;
}
.img[data-color=green] {
background-color: green;
margin-left: 15px;
}
button {
margin: 15px;
padding: 10px;
font-size: 14px;
}
span {
padding-top: 40px;
clear: both;
display: block;
font-size: 12px
}
Javascript:
function changeBtnColor(color) {
document.querySelector('button').style.background = color
}
Hope it helps.
The accepted answer works, but it has a couple of caveats. setTint is a multiplicative function: it takes the pixel colour of the game object (images, in this case) and multiplies it by the given colour. If your base images are pure white, then it will work great and you've got no problem. However, if your images (or text, or whatever you use) are a different colour, then it won't work as expected.
Take the following example, where I've used a Text object:
The first line of text has a base colour of #F2E675. The second line of text has a base colour of #FFFFFF (pure white), but with .setTint(0xFF00FF) applied. And it works great!
However, the third line has the same pale yellow base colour as the first (#F2E675). When I apply .setTint(0xFF00FF), it actually comes out as #F20075 - more like a kind of hot fuscia. And this is because the base colour is different, and since tint multiplies, the outcome looks different. And if your text (or image) is black, then setTint() will do nothing, because - just like maths - multiplying a number by #000000 will still give you #000000.
If you're using Text as I am here, you can instead use setColor(). The following image is identical to the one above - 3 lines of text in pale yellow, pure white and pale yellow again, but this time using .setColor('#FF00FF') on both the white & yellow text. As you can see, in both instances, the text is actually showing as #FF00FF.
Note that setColor() is a function of Text. If you want to swap colours for an image, either use setTint as above, or (if that doesn't give you the results you want) generate a separate rollover image and use that.
Situation: I'm using HTML5 drag-and-drop to place tiles in a game I'm writing. I'd like to add an effect where the two tiles that I'm about to drop a new tile between move slightly apart to indicate that this is where you're dropping (similar to the Mac OS dock).
My Approach: I have a flexbox into which I'm dropping these tiles. I wrote a function that essentially returns one period of a sine wave and I'm using it to update the dropped tiles' right: and top: CSS properties (the tiles are position: relative;) based on their original position relative to the mouse during drag.
// Update occupant style for desired effect
occupants.forEach(function(occupant, index) {
$(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
});
// Function to return 1 period of a sine wave
function nudgeSine(x) {
if (x < -3.14159 || x > 3.14159) {
return 0;
} else {
return Math.sin(x);
}
}
Problem: In Chrome (but not in Firefox), at some mouse positions, which I can't find a pattern in, the tile is jumping back-and-forth. See the .gif below:
In Chrome (left) and in Firefox (right):
I even console.logged the element's calculated right: property, and while it is shown jumping around on screen, it outputs as a constant value.
What I've Tried/Thought About:
Even with the mouse stationary and console.log(event.clientX) outputting a constant value, the tile will jump around.
I thought event.clientX might be changing imperceptibly, so I'm basing my calculations on Math.trunc(event.clientX) to no avail.
I am using element.getBoundingClientRect() in my calculations, which I'm not very familiar with, and I think it may be the root cause of my problem.
I made this CodePen, but wasn't able to completely replicate the issue. Still, I think someone may be able to spot what's happening.
Edit: I've put this up on a github page to fully replicate. This link may not work for future readers of the question, but I'll keep it up for the foreseeable future. To demonstrate the issue, view in Chrome and Firefox.
Thank you.
Perhaps I can expand my answer later, but for now:
Related questions: How to keep child elements from interfering with HTML5 dragover and drop events?
'dragleave' of parent element fires when dragging over children elements
This is what happens:
- you start dragging the operator
- operator moves over the box, existing operators move along nicely
- you move the operator over one of the existing operators
- at this point the browser enters a kind of infinite loop thingy, because each time the elements move the position of the elements have to be updated again (because new events are triggered)
Since you need the click event on the existing operators you can't just set them to pointer-events: none; like in the related question, but you can add a class when you start dragging and apply this style to the operators while you're dragging.
Another solution would be to use a library, in the comments of an answer I found the library https://bensmithett.github.io/dragster/, I use draggable by shopify.
update
I wasn't able to find the exact term of this behavior, perhaps we could go with "cyclic case" or "undefined behaviour". See my examples:
:root {
/*colors by clrs.cc*/
--navy: #001f3f;
--blue: #0074D9;
--red: #FF4136;
font-family: sans-serif;
}
.animated {
transition: all .5s;
}
h2 {
color: var(--red);
}
div {
height: 160px;
width: 160px;
padding: 20px;
background: var(--blue);
margin-bottom: 20px;
}
.box1 {
border-right: 20px solid var(--navy);
}
.box1:hover {
border-right: 0px solid var(--navy);
}
.box2:hover {
border-radius: 100px;
}
<div class="box1 animated">hover your mouse over my border on the right →</div>
<div class="box2 animated">hover your mouse over an edge of this box</div>
<h2>Warning, the following boxes have no animations, flashes are expected:</h2>
<div class="box1">hover your mouse over my border on the right →</div>
<div class="box2">hover your mouse over an edge of this box</div>
When the user moves the mouse onto the border the following happens in a loop:
box1 is being hovered
hover styles apply, the border is removed
box1 isn't being hovered
hover styles stop applying, the border is readded
basically for the moment the CSS doesn't really evaluate, because as soon as it evaluates the evaluation is invalid. This is exactly what happens in your example. I don't know whether the CSS standard has rules that define how browsers should handle this. If the expected behavior is defined, either FF or Chrome is wrong and you can file a bug after you find out which browser's behavior is wrong. If no expected behavior is defined and the implementation is left open to browsers then both browsers are right.
I'm using Lightbox2: http://lokeshdhakar.com/projects/lightbox2/.
The plugin seems to have been written in a way that produces a 'flash' effect when navigating to a new image in a collection. I believe this is because the old image simply disappears, rather than fading out first or crossfading (this would be ideal) with the new image that is fading in.
For a demo of this flaw, just view the example on the Lightbox2 link above.
Is there a way to add some sort of fade out transition when the user advances to the next image? As a developer rather unskilled in JS, what could I add to the lightbox.js script that would allow me to achieve 100% smooth transitions between images?
I can't work out a way to fade out the image like you suggested, but I think this really helps to avoid the white flash between images.
In the lightbox.css file between lines 43 and 51, simply change the background colour to black, or something similar, basically meaning you'll get a black flash instead of white. If you still want a white border around the image, just add one here (You'll also need to remove lines 59 to 61). So you'll end up with this:
.lb-outerContainer {
position: relative;
background-color: black;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
border: 4px solid white;
}
Also, if you're not happy with the fade in speed, take a look at line 313 in the lightbox.js file.
Specifically on line 316, change ('slow') to a numerical value e.g. (800).
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
I'm currently trying to find a workaround to having arrows on Niall Doherty's Coda Slider 2 to highlight the selected tab. Initially I tried doing this with images on the header image, although whilst it looked fine in Safari on my Mac, it wasn't central on other devices (see www.lukekendalldesign.co.uk/pss/productsandservices)
I tried creating this using CSS arrows but that proved rather difficult, so I've found a workaround using a background image, but I've come across yet another problem.
http://cl.ly/HovO (Sorry, I can't upload images - newbie!)
Please refer to the above linked screenshot. The lighter grey triangle that matches the background is part of the header image. The black triangle is positioned using the following CSS code:
.coda-nav ul li a.current {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
color: white;
height: 60px;
z-index: 20000;
background: url(../images/triangle.png) no-repeat 50% 100%;
position: relative;
overflow: visible;
}
What I'm trying to do, is position this black arrow where the grey image arrow is (if that makes sense at all?) How can I do this?
I have tried adding margins and padding, however it extends the grey background and doesn't push the background image black triangle down.
Whilst I have found solutions similar, none seem to apply because the class .current is applied using the following JS:
// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});
I would very much appreciate any help anyone can offer me on this - as it's a JS issue it's something that's a bit out of my depth! :(
I have tried this in Firefox using fire bug on windows. I think there are 2 problems. The first is that the margin on the ul element should be 167px (the black arrow is not in a nice place in the image (middle is at 232 px did you mean this?).
The the arrow just needs moving down which I did by setting the back ground position to be:
url("../images/triangle.png") no-repeat scroll 50px 60px transparent hope this helps.