I'm wondering if someone can shed some light on how this effect is achieved?
This site shows a constant changing background colour.
http://bdw.colorado.edu/#/index.php
I want to utilize the same "ever changing" background colour effect on my site.
Here is the link to my example site:
http://continuous.be/
(I've found the CSS but not sure how it relates? )
/* == Dynamic Colors ==
.dynamicbgcolor {
background-color: rgb(0,149,191); }
.dynamiccolor {
color: rgb(0,149,191); }
*/
You won't be able to do this using CSS alone. As Vladislav says there is a spectrum() function that does the work using javascript and jQuery. Basically:
Store an array of colours.
Use Math.Random randomly pick
one of the stored colours.
Using jQuery.animate() to animate the backgroundColor property of the required element.
On completion of the animation, use jQuery.delay() to call the above function in XX seconds time.
Update
I've had a look at the test you put up. You're missing the closing }); at the end of your script file. Also, you've only defined the function spectrum, you don't call it. Add spectrum(false); at the end of your file, just within the }); that you've just added.
Try using Firebug for firefox, this pointed out the missing }); straight away.
this is done using JavaScript - the script animates the CSS. Look in http://bdw.colorado.edu/js/main.js for function spectrum(bool)
The idea is simple. They load js script to their page. And there (from line 373) you will find necessary code (together with hardcoded background colors.
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
I came across a book giving a tutorial and partial code for building a coloring book, in HTML and JavaScript. I have setup a project in jsbin to test my code, and hopefully it can be shared with you all at this link: my source code
I would like the user to be able to select a color and then click on an area in the svg, where it is then applied. Currently when you click on a color, nothing happens.
It would be better if you cut down your code to a simple test case.
However, I noticed a couple of things wrong:
You are trying to attach events to paths with class colorable. However there aren't any of those in your SVG.
jQuery functions that operate on classes will not work with SVG elements. This is because the class attribute of an SVG elements is not the same type as the class element of an HTML element. So path[class="colorable"] won't work.
You'll need to use change this code:
$('path[class="colorable"]').bind("click", function(event) {
// colour changing code
})
to something like:
var paths = document.getElementsByClassName("colorable");
for (var i=0; i<paths.length; i++) {
$(paths[i]).bind("click", function(event) {
// Your colouring code
});
}
I'm trying to use some features from the pixastic libary and combine it with kineticjs. One of which is to apply the sepia effect in pixastic to an image created with kineticjs.
I have a jsfiddle setup here:
http://jsfiddle.net/SkVJu/28/
I thought the following would work:
function sepia() {
Pixastic.process(darth, "sepia");
layer.draw();
}
but the image just stays the same. Have i missed something or is this not even possible to combine the both libraries together?
My guess is that you can't apply a Pixastic function directly onto a Kinetic.Image object, as it is slightly different than a regular image object.
Alternatively, you need to grab the original source of the image, then you can run the Pixastic effects on that image, and then set the Kinetic.Image object with the new affected image after.
function sepia() {
var sepia = Pixastic.process(darth.attrs.image, "sepia");
darth.setImage(sepia);
layer.draw();
}
Here's the full code: jsfiddle
Note: You'll have to run this on your local server, as it won't work on jsfiddle (the pixastic library can't be loaded as an external resource, without a CDN host)
2nd Note: You had to declare var layer outside of the imageObj.onload function, or else your sepia() function could not access the layer from inside the imageObj.onload. You can see how I did it in the jsfiddle.
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});
i tried doing it with css, the closest i got was: http://jsfiddle.net/XyDec/
It kind of works, but don't hide the content inside it and i would like some smooth animation
, so i guess it's scripts time.
i can't write them or don't know where to look for them, could anybody help me ?
you may take a look at the jquery javascript framework (user friendly and powerfull)
here is an example of smooth slide down of div using jquery:
http://api.jquery.com/slideDown/
this is made with one line : $("div").slideDown("slow");
hope it help
Have you tried jQuery? You can treat the div as an object and assign an action to an event, through jQuery methods.
For instance:
function hide(){
$('#the-div').hide('slow')
}
Then you just call the function on the hover event.
If you want to go a step further, you can assign a timer for it to show again. Or even use a callback.
function hide(){
var x = $('#the-div')
$('#the-div').hide('slow', function(x){
//do something with the variable x
})
}
I think that should work.
Hope that helps.
Cheers.