I'm using JS libraries: GSAP along with ScrollMagic.io by Jan Paepke.
Scrollmagic.io allows me to trigger some CSS changes on scrolling once certain trigger element is reached, the JS script looks like this:
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween(new TimelineMax().add([
TweenMax.to("header", 0.5, {backgroundColor: "rgba(40,80,01, 0.95)", height:"6%", width:"100%", top:"0", borderRadius:"0px"}),
TweenMax.to(".headernav", 0.5, {color:"white", fontSize:"1.5em", marginTop:"10px"}),
TweenMax.to(".circle", 0.5, {height:"35px", marginTop:"10px"}),
TweenMax.to("#logo", 0.5, {width:"70px", marginTop:"-10px", marginRight:"500px"})
]))
.addTo(controller);
In general - it would change position, background-color and font color of my menu once it is scrolled over white area of website so that it will still be noticable and easy to read.
The problem is my a:hover within menu stopped working.
I've found a workaround by using this:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
This makes it work fine, but there's still one thing to be worked out - while background of menu is "white", color:"dimgray" of font is well noticable/readable, but it will also remain "dimgray" on the green background after scrolling.
Here's screenshot explanation to show it more clearly:
Default menu state with no hovers:
On:hover using js - changes color using script shown above:
Here some properties of menu have changed along with font color to be more readable on green background:
And here's how it looks like when the mouse is OUT of the link, leaving it "dimgray" because the script makes it:
My question is - how may I implement a conditional into this script:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
}
function out(){
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
so that it would read the current color value and run TweenMax.to with specific color according to this value?
I'm fairly green with JS so any kind of advice would be highly appreciated.
Regards,
Damian.
Actually it seems that the longer I don't get answer, the more creative i become.
Already worker it out, pretty much basic JS/jQuery was needed, posting it so maybe somebody could have some use of it later on.
Here's working code of function hover:
$("#verticalnav p").hover(over, out);
function over(){
TweenMax.to(this, 0.5, {color:"rgb(181, 171, 171)", scale:"1.1"})
};
function out(){
var kolor = $("header").css("background-color");
if (kolor == "rgba(255, 255, 255, 0.901961)") {
TweenMax.to(this, 0.5, {color:"rgb(105, 105, 105)", scale:"1"})
}
else {
TweenMax.to(this, 0.5, {color:"white", scale:"1"})
}
};
Related
Is it possible to blur a closed path element that has a fill using paperjs? Would I have to create an SVG feGaussianBlur primitive for each path that I wanted to blur? How would that affect performance if there were a few hundred path elements on the canvas? I thought about making use of the shadowBlur with some color magic, where the shadow would match the selected path, but it's not quite the same effect. I do not want to use raster.
A trick could be to use the shadowBlur property of the item.
The only thing is that the shadow is only drawn if the item has a fill.
And we don't want the fill to be displayed but only the shadow.
So we could make clever usage of blend modes to hide the fill but not the shadow.
Here's a simple sketch demonstrating this.
new Path.Circle({
center: view.center,
radius: 50,
shadowColor: 'black',
shadowBlur: 20,
selected: true,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply',
});
edit
This technique indeed seems to reach a limit when trying to stack items on top of each other.
We can prevent the multiply blend mode from "bleeding out" by wrapping the item into a group which has a blend mode of source-over. This has the effect to scope the children blend modes.
But there is still a trick to find to compose the items together.
Here's a sketch demonstrating where I stopped my investigation.
I'm quite sure that you can find a solution following this track.
function drawBlurryCircle(center, radius, blurAmount, color) {
const circle = new Path.Circle({
center,
radius,
shadowColor: color,
shadowBlur: blurAmount,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply'
});
const blurPlaceholder = circle
.clone()
.set({ shadowColor: null, fillColor: null })
.scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width);
return new Group({
children: [circle, blurPlaceholder],
blendMode: 'source-over'
});
}
drawBlurryCircle(view.center, 50, 20, 'red');
drawBlurryCircle(view.center + 30, 40, 30, 'lime');
drawBlurryCircle(view.center + 60, 30, 30, 'blue');
I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.
CSS
.vis-item.vis-background.preupgrade {
background-color: rgba(0, 153, 255, 0.2);
}
.vis-item.vis-background.prerelease {
background-color: rgba(102, 204, 255, 0.2);
}
.vis-item.vis-background.postupgrade {
background-color: rgba(204, 204, 255, 0.2);
}
Controller
$scope.visData = new vis.DataSet([
{start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
{start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
{start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
$scope.visOption = {
editable: false,
autoResize: true,
moveable: true,
margin: {
item: 10,
axis: 20
}
};
Visjs timeline HTML
<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline>
I am also providing a plunker link for this problem.
Update Also why my plunker does not show region color changes?
Updated plunker link with some CSS changes, but how to add tooltip on top of background areas and how to add custom markers as shown in image with tooltips?
Update
Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.
Updated Plunker link
Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.
http://visjs.org/docs/timeline/#Editing_Items
Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.
I want to move the text indicator to little down, am able to change the color and change the size of it but not the position.
Below is my code.
require(['dojox/gauges/GlossyCircularGauge','dojo/aspect', 'drawGreenYellowRedCurves', 'dojo/domReady!'], function (GlossyCircularGauge, aspect, drawGreenYellowRedCurves) {
var gauge = new GlossyCircularGauge({
background: [255, 255, 255, 0],
title: 'Value',
id: "glossyGauge",
width: 300,
height: 300
}, dojo.byId("CircularGauge"));
gauge.set('textIndicatorFont','normal small-caps bold 22pt Arial');
gauge.set('textIndicatorColor','#FFFFF');
aspect.after(gauge, "drawRange", drawGreenYellowRedCurves, true);
gauge.startup();
});
for reference http://jsfiddle.net/rameshcharykotha/dsmfg/14/
you can change the value of the internal attribute _designTextIndicatorY to update the text indicator position. Default value is 267.81589, but you can use a greater value to lower down the position of the text indicator.
Example:
require(['dojox/gauges/GlossyCircularGauge','dojo/aspect', 'drawGreenYellowRedCurves', 'dojo/domReady!'], function (GlossyCircularGauge, aspect, drawGreenYellowRedCurves) {
var gauge = new GlossyCircularGauge({
background: [255, 255, 255, 0],
title: 'Value',
id: "glossyGauge",
width: 300,
height: 300,
_designTextIndicatorY: 317.81589
}, dojo.byId("CircularGauge"));
gauge.set('textIndicatorFont','normal small-caps bold 22pt Arial');
gauge.set('textIndicatorColor','#FFFFF');
aspect.after(gauge, "drawRange", drawGreenYellowRedCurves, true);
gauge.startup();
});
This is not directly answering your question but it might still help, dojox/gauges have been deprecated your are encouraged to use dojox/dgauges instead. See doc: http://dojotoolkit.org/reference-guide/1.9/dojox/dgauges.html#dojox-dgauges
A little while ago i answered a similar question. There someone wants to change the rangecolors in the new dGauge. Have a look at this fiddle: http://jsfiddle.net/v7WwD/
Here's the part in the new dgauge that's intresting for you:
// Indicator Text
indicator = gauge._elementsIndex.scale._indicators[0];
var indicatorText = new TextIndicator();
indicatorText.set("indicator", indicator);
indicatorText.set("x", 100);
indicatorText.set("y", 100);
gauge.addElement("indicatorText", indicatorText);
To make it clear how to implement this, look at the entire code in my fiddle.
Regards, Miriam
I have a jQuery function that adds an Alpha channel to a background-color when an event occur.
Here is my jsFiddle.
CSS
div { background-color: rgb(100,100,100); }
JavaScript
function addAlphaChannel() {
var oldBGColor = $('div').css('backgroundColor'); //rgb(100,100,100)
var newBGColor = oldBGColor.replace('rgb', 'rgba').replace(')', ',.8)'); //rgba(100,100,100,.8)
$('div').css({ backgroundColor: newBGColor });
}
This code works fine, however I wonder if there is a better way of adding/changing alpha channel?
Any help will be much appreciated.
If you want to change the rgba css property using javascript, you'll need to use the replace method, however, you can improve your code like this:
CSS
div { background-color: rgba(100, 100, 100, 1.0); }
JS
function addAlphaChannel() {
var oldBGColor = $('div').css('background-color'), //rgb(100,100,100),
newBGColor = oldBGColor.replace(/[^,]+(?=\))/, '0.8'); //rgba(100,100,100,.8);
$('div').css({ backgroundColor: newBGColor });
}
Hope this can help you.
I'm trying to use dojo toolkit and exactly this gauge.
In fact, I want a feature to majorTicksColor and minorTicksColor, I want the color depends for the interval, eg : from 0 to 30 green, from 30 to 70 yellow and from 70 red to 100, or maybe it is degraded.
Like this image.
Is that possible ?
Thank you.
Regards,
Something like this fiddle?
The principal here is to use an aspect to enhance the drawRange method of the dojox/gauges/GlossyCircularGauge widget.
//
// Use the new "drawGreenYellowRedCurves" as an *after* aspect to the existing "drawRange" function.
//
require(['dojox/gauges/GlossyCircularGauge', 'dojo/aspect', 'drawGreenYellowRedCurves', 'dojo/domReady!'],
function (GlossyCircularGauge, aspect, drawGreenYellowRedCurves) {
var gauge = new GlossyCircularGauge({
background: [255, 255, 255, 0],
title: 'Value',
id: "glossyGauge",
width: 300,
height: 300
}, dojo.byId("CircularGauge"));
aspect.after(gauge, "drawRange", drawGreenYellowRedCurves, true);
gauge.startup();
});