java script is a new area for me but i’m working my way through it. I’m stuck right now and just can’t get any further.
I would like the background to change depending on the position when scrolling. The whole page should have several color gradients and a smooth transition between the changes. I get the gradients, but not the smooth transition. Are transition already available for css/javascript?
Hope somebody can help me out
Cheers
\<script\>
{
var body = document.getElementsByTagName(‘body’)\[0\];
body.style.background = ‘linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(214,20,20,1) 100%)’;
window.onscroll = function (event)
{
var scroll = window.pageYOffset;
if (scroll < 300) {
body.style.background = 'linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(28,255,9,1) 100%), transition: background 5s ease';
}
else if (scroll >= 300 && scroll < 600) {
body.style.background = 'linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(171,156,46,1) 100%), transition: background 5s ease';
}
else if (scroll >= 600 && scroll < 1200) {
body.style.background = 'linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(46,161,171,1) 100%), transition: background 5s ease';
}
}
;
\</script\>
Related
I have a long array with data that I slice with Javascript in order to display data of different date ranges in my chart. This way the backend only needs to get the data once, and I can the just slice it on the client side.
// All data
var allLabels = [
// data here
];
var allData = [
// data here
];
Then I do:
var labelsCount = allLabels.length;
var dataCount = allData.length;
var updatedLabels;
var updatedData;
if($date_range === 'last_7_days')
{
updatedLabels = allLabels.slice(labelsCount - 7);
updatedData = allData.slice(labelsCount - 7);
}
if($date_range === 'last_30_days')
{
updatedLabels = allLabels.slice(labelsCount - 30);
updatedData = allData.slice(labelsCount - 30);
}
scoreChart.data.labels = updatedLabels;
scoreChart.data.datasets[0].data = updatedData;
scoreChart.update({
duration: 1000,
easing: 'easeInOutExpo'
});
This all works as expected. When switching from 30 to 7 days the points on the right of the 7 days disappear, and the graph scales and grows nicely to the new 7 days x-axis.
The other way around, when you have the graph of 7 days and then switch to 30, produces an ugly visual effect where the first point of the graph sticks to the side, overlaps the new data points and then animates.
After the animation the graph looks as expected, it's just the animation that's ugly. It's a little tricky to explain so hopefully the screenshots help. Green arrows indicate the animation direction. I've set the animation duration to 10s so I can take this screenshot, the red circle highlights the point that starts on the right of the graph and then animates to the left.
I've also tried adding this:
scoreChart.data.labels.pop();
scoreChart.data.datasets[0].data.pop();
scoreChart.update();
and this:
scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update();
Before the line scoreChart.data.labels = updatedLabels; but that gives the same result.
Another thing I can do is only update the labels. The result is that the chart just zooms on the timeline when changing date ranges, without the nice animation as they have in the example.
You could try to first remove all labels and the data when switching to 'last_30_days'.
if($date_range === 'last_30_days')
{
scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update({
duration: 500,
easing: 'easeInOutExpo'
});
updatedLabels = allLabels.slice(labelsCount - 30);
updatedData = allData.slice(labelsCount - 30);
}
I'm new to Swift Sprite Kit, I wanted to move a node with start speed = 0, until maximum speed when a button is press and hold for 2 seconds and decelerate with -5 speed until minimum speed when the button released. I've done something like this:
func moving(force : CGFloat){
self.player.physicsBody?.applyImpulse(CGVector(dx:force*cos(player.zRotation + 1.57079633), dy: initialforce*sin(player.zRotation + 1.57079633)))
}
In touch function:
let timerAction = SKAction.wait(forDuration: 0.05)
let update = SKAction.run({
if(self.initialforce < Constants.maximumMoveForce){
self.force += 1.0
}else{
self.moving(force: Constants.maximumMoveForce)
self.force = Constants.maximumMoveForce
}
})
let sequence = SKAction.sequence([timerAction, update])
let repeats = SKAction.repeatForever(sequence)
self.run(repeats, withKey:"repeatAction")
and how am I gonna decelerate it at touchEnd? Or am I making wrong approach? Need help.
I have a view with a SceneKit in the background and an AVCaptureVideoPreviewLayer in the foreground. I want a semi-transparent version of the background to be visible over the camera. So based on an older thread here, I added a UIImageView and put this in an action:
let background = sceneView.snapshot()
let cameraview = background.cgImage!.cropping(to: overlayView.bounds)
overlayView.image = UIImage.init(cgImage: cameraview!, scale: 1, orientation: .upMirrored)
This works. The problem is that I have to track the motion of the phone so that the grid aligns with the real world. So...
func trackMotion(motion: CMDeviceMotion?, error: Error?) {
guard let motion = motion else { return }
guard (self.camera) != nil else { return }
self.camera.orientation = motion.gaze(atOrientation: UIApplication.shared.statusBarOrientation)
let background = sceneView.snapshot()
let cameraview = background.cgImage!.cropping(to: overlayView.bounds)
overlayView.image = UIImage.init(cgImage: cameraview!, scale: 1, orientation: .upMirrored)
}
EXE_BAD_ACCESS on the sceneView.snapshot. I note again, it works perfectly if I just put the exact same code in an action. I suspect this is some sort of timing issue, because if I put a breakpoint there it does not crash, but instead, the SceneKit is all-black even after I continue.
Any advice?
I try to scroll a scroll
view to a certain position
by setPosition(x).
For a short moment the scroller
moves scroll area to the correct
position, but bounces immediately
back.
How to do this right?
With Famo.us 0.3, it seems to be working like this.
Let's say that:
My scrollview's display area is 250 pixels in height
The contents of my scrollview are total of 1000 pixels in height
I want to scroll to the very bottom of the scrollview
The code:
// Scrollview area height 250 pixels
var myScrollviewArea = 250;
// My scrollview contents' total height 1000 pixels
var myScrollviewContents = 1000;
// Contents - Area = total pixels to scroll
var scrollpx = myScrollviewContents - myScrollviewArea;
// Setting scrollview to use the first element as offset origin
myScrollview.getOffset(1);
// Setting scroll position with setOffset()
myScrollview.setOffset(scrollpx);
UPDATE
The above code seems to work very randomly, because the offset index changes.
Here's some updated code, still a bit twitchy but works:
function _scrollToBottom() {
if(myScrollviewSurfaces) {
// Pixels to scroll
var scrollpx = 0;
// Current first visible element
var index = myScrollview.getCurrentIndex();
// Offset from the top of the index
var offset = myScrollview.getOffset();
// Calculating the distance from index to bottom
for(var i = index; i < myScrollviewSurfaces.length; i++) {
scrollpx = scrollpx + myScrollviewSurfaces[index].getSize(true)[1];
}
if(offset > 0) {
scrollpx = scrollpx - offset;
}
scrollpx = scrollpx - myScrollview.getSize(true)[1];
if(scrollpx > 0) {
myScrollview.setVelocity(1);
myScrollview.setPosition(scrollpx);
}
}
}
I got it now.
The Scrollview adds a spring to the particle. When moving only the particle, the spring moves it back to it anchor.
Setting the the spring-anchor to same position fixes the problem.
scrollview.setPosition(x)
scrollview.spring.setAnchor(x)
Set the option on the scrollview. It is the size of the area (in pixels) that Scrollview will display content in.
Scrollview that spans 400px:
scrollview.setOptions({
clipSize: 400,
});
Scrollview that spans your entire context:
scrollview.setOptions({
clipSize: mainContext.getSize()[1],
});
I'm having an issue with a transition I'm using to slide a panel in and out.
Please take a look at the following jsbin http://jsbin.com/uvejuj/1/
Notice that when i click the toggle button the first time the transition occurs immediately.
However if i click the button again to close then the transition delays the amount of time of the transition before it executes.
What is causing the delay on close out and how can i get rid of it?
Thanks
Fixed JS Bin
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
It's because you're animating between 0 and 1000px max height but your content is only about 120px high. The delay is the animation happening on the 880 pixels that you can't see.
Either set max-height to the known height of your content (if you know it - example: http://jsbin.com/onihik/1/) or try a different method. Maybe something like https://stackoverflow.com/a/6486082/2619379
I fixed it in my case by using normal transition for opening (from max-height 0px to max-height 500px) BUT by using an animation when closing, starting from max-height 50vh.
This way the delay is not from shrinking from 5000px to the actual height of your content.
The only delay that can appear now is if your content is less than 50% of your screen height, but that works buttersmooth in my cases.
Here's my magic (scss format):
.slide-open{
max-height: 0;
overflow: hidden;
&:not(.open){
animation-name: shrink;
animation-duration: .3s;
}
&.open{
max-height: 5000px;
transition: max-height .9s ease-in-out;
}
}
#keyframes shrink {
0% { max-height: 50vh; }
100% { max-height: 0; }
}