I'm having a react project.
When users reach a page, they don't realize there are more options only if they scroll down.
So I want to automatically scroll vertically in a smooth way, on page load to show users all the options they have.
What is the way to achieve this in react?
I would suggest 2 ways.
First is to transition the entire page with animation on load.
CSS
body{
animation: scrollUp 1s;
}
#keyframes scrollUp {
from {transform: translate(1000px)}
to{transform: translate()}
}
Second would be to set window.scroll value manually on page load to lets say 1000 or whereever you want and then use window.scroll to smoothly scroll to top.
Before first render (maybe use requestAnimationFrame)
window.scrollTo(1000, 0)
Then on next frame
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Related
I have moving line animation, powered by CSS:
.line {
transition: all 30s cubic-bezier(0, 0, 0, 1);
transform: translate3d(-1000px, 0px, 0px);
}
The line is moving 30 seconds to -1000px on X axis.
The problem:
When I switch browser tabs to the other websites, animation on the tab with this animation could set on pause, but when I return back to the tab with this animation, animation resumed.
The behavior I need:
I need to make animation move constantly without pausing, when user switch the browser tabs.
I do not think that is possible with just CSS. For optimization purposes inactive browser tabs or windows are not redrawn. You could however use JavaScript to count how many frames have passed using real time and Page Visibility API to skip to the correct frame.
If I understood you correctly, then you need to continue the animation after the user has left the current tab of the browser. The visibilitychange event will help with this. I have made the usual example code below, but you need to customize this code for your task.
I also specified line.style.animationPlayState = 'running' - it is in this place of the condition that the logic of the animation continues.
let line = document.querySelector('.line');
document.addEventListener("visibilitychange", function() {
if (document.visibilityState == 'hidden') {
line.style.animationPlayState = 'running';
} else {}
});
I have the following animation code attached to my component
animations:[
trigger('slide', [
state('show', style({
height: '*'
})),
state('hide', style({
position: 'relative',
height: 0,
overflow: 'hidden'
})),
transition('show <=> hide',animate('130ms ease-out'))
])
]
This is quite hard to explain, (and I can't seem to get animations to work on plunker) but here goes.
The current functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
User click button again.
Table smoothly slides out of the view up into the div.
The desired functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
More rows are added to table (could be a large number of rows)
Animation handles the new table height and instead of just instantly being displayed there is a smoothing animation to gradually move to the new height.
User Clicks button.
Table slides back up under div again.
Edit: here is a plunker demo. You can see when you add/remove rows from the table the animation does not smoothly move to the new height.
The problem is caused because if you are in true state and rows are added.
The animation will not transition to true again, because it is already in true state.
So how will I trigger a transition to the "newHeight" state when items are added?
I made a quick, rough, animation example using angular animations API:
https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/
I would play around with that plnkr until you get the animations right. You can hide the element behind something by either removing the table entirely after animating it down by toggling the animation with an *ngIf in your template, or do it the way I show in the plnkr, but toggle the visibility of the table after the animation is complete. I prefer the *ngIf way.
For individual rows being added or removed:
I would add an #animation to every row of the table and enable the up animation if the number of rows increases, or down if it decreases.
First timer here, I installed Lightbox and it is running brilliantly.
Buttons are not visible normally, but when i hover the where it should be, buttons becomes visible.
You have to check your lightbox.css file. By default Lightbox hides the controls. In the css you will see lines where the opacity is set to zero. So what you might be looking for is something like the following.
.lb-prev, .lb-next {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); //change to 100%
opacity: 0; //change to 100%
}
Since you say you say your a first timer I would recommend going through the CSS file and where you see something recarding the opacity change it saved it and check what it did, till you get the result you want.
I've been building a photography website here but i'm having an issue with the :hover transitions in the gallery pages. It loads two links that lay over the thumbnails, one opens the image in fancybox and the other sets the image as the background.
Everything works fine, but if you hover off of the thumbnail before the transition is finished, it animates back to its original state.
Is there a way to let the transition play out before reverting to its idle state?
Assuming JavaScript isn't out of the question, jQuery will certainly let you have this behaviour using the .hover() method's ability to accept two callbacks, one for the hover, one for when the hover stops.
$("div.thumb").hover(function(){
// show the magnifying glasses
$(this).animate({ top: "0", opacity: 1 });
}, function() {
// hide the magnifying glasses
$(this).animate({ top: "-100px", opacity: 0 });
});
I'm using a php styleswitcher and alternate stylesheets to try to duplicate the function of browser zoom (keyboard cmd-plus or ctrl-plus).
Right now, the "zoom in" graphic is linked to an alternate stylesheet with the following css:
body {
zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0}
}
This works fine, but ideally I'd like to have the link trigger a relative zoom rather than an absolute zoom value -- so i would need to establish a variable that determined the user's current zoom level, and then increase that zoom by 120%. This way the same link could be clicked multiple times to increase the zoom incrementally.
Any idea how to do this?
I think this will need JavaScript.
If I remember it correctly, you can change/create CSS-styles with JS. So if you save a variable in JS and multiply it with 1.2 everytime the onClick of the link is triggered, it should create the same effect.
EDIT: I don't know if it's possible, but if you can multiply variables in LESS, you could that 'language'. As it's a combination of CSS & JS