I would like to do something like this in HTML5 where I have something like:
I want to be able to make it so that when I click on the Start button, the tickmark gradually moves to the next tick and increments by 1 per second, clicking on stop stops the behavior, and clicking on start again resumes from the current spot. The box at the top just shows the number of seconds corresponding to the red tracker bar. Assuming the user can specify the number of tickmarks (i.e. could be 20 seconds/tickmarks wide ro 10 seconds/tickmarks wide).
I have seen the JQuery UI Slider http://jqueryui.com/demos/slider/ though it has no tickmarks and am unsure if it really is the best way to go about doing what I described or if there is some better way.
What is the best javascript, jquery, html approach of doing this?
Try this - I felt like doing an exercise!
http://jsfiddle.net/zBKJk/
Only quirk is that the ticks along the bottom don't align exactly with different values of TICKS_ON_BAR. Probably a minor CSS/math issue.
You can change these variables
var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)
Also added a handy callback function
function timerComplete(){
// Do something further when the timer hits the end of the bar
}
Edit: If you want this to run smoothly, you could make the interval lower or (since you specified HTML5) use a linear CSS3 transition to make the changes animate:
http://jsfiddle.net/zBKJk/1/ (a bit glitchy, I just dumped in the example css from w3schools)
Animating this as is with jQuery is glitchy also: http://jsfiddle.net/zBKJk/2/
Related
I am trying to add a class to my sticky container once the user scrolls the page past 100px, but it is lagging, and toggling the class uncontrollable.
$(function () {
$nav = $(".topmenu-container");
$(document).scroll(function () {
if ($(this).scrollTop() >= 100) {
$nav.addClass('scrolled');
} else {
$nav.removeClass('scrolled');
}
});
});
This is what I have so far.. I had the same function without an if clause and the toggleClass function instead, but same effect there.
Here you see the container that sticks to the top on scroll, and that I want to add the class to once the user scrolls past 100px from top for example
Edit: I now output the scrollTop value and saw, that it seems to get stuck at the point where the toggle should happen. It keeps jumping between 156px and 87px which makes the toggle happen multiple times a second. Does anyone have an idea?
What you need is rate limiting for your scroll events. In your case, I would suggest throttling, which means that your scroll events are limited to a certain number per second or time unit.
Another option is to use debouncing, but this would cause the event to be triggered only once at the end of the scrolling, which might not be the best solution for your case.
Read more here: Difference Between throttling and debouncing a function
Nice visualization: http://demo.nimius.net/debounce_throttle/
Depending on your use case you may actually get away with the new sticky value for the position property in CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Additionally, instead of using debouncing and throttling, you could consider using the IntersectionObserver API. The events for InteresectionObserver fire only once (depending on settings) and surely less than scroll which is a hard to optimize event since it fires all of the time. See here:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Now, if you have some elements inside the element that depend on the class, such as... the logo having a scaling animation or such, you will definitely have to use IntersectionObserver. It looks like your threshold is 100 pixels, you can definitely configure Interesction Observer to do that.
You can also take a look at this example from Wes Bos which seems to be in one of his free classes:
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
I'm hoping you can try these solutions instead of the antiquated scroll thing.
I am working on something that might require a bit of animation in html/css or some jQuery or such. The essence of the question lies in alternating one div with another (both located in the same area on the website) constantly...perhaps in ten second intervals. This fiddle here:
http://jsfiddle.net/arunpjohny/asTBL/
the html is here:
<div id="quote1">
<span class="quote">I am a quote</span>
<span class="author">Author Name</span>
</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
and javascript is here:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
basically covers the alternating divs every x amount of seconds. The main issue I have is the animation/transformation part of it. Maybe using the fiddle's elements and layout, how would one make the divs alternate in a revolving door style animation. Where the first div revolves into the page essentially and the other side of that revolving door is the new page? And it does this every 10 seconds or so? I researched and maybe html2canvas is the way to go but I am unsure I could grasp that content. Any help?
UPDATE:
I'm an extreme newbie to coding. I found this wonderful site
http://davidwalsh.name/css-flip
that has the flip effect I'm looking for. Is there a way to use this with jQuery to make this effect occur every ten seconds on some div? Instead of the effect occurring everytime one moves the mouse over it?
The whole thing can be done just with CSS animations and 3D transforms, which give you functions to rotate things round an axis, and to do that continuously at regular frequencies.
For the continuous animation part of it, see an article at http://css-tricks.com/almanac/properties/t/transition/. For a demo of what can be achieved see a small continuously rotating display I put on one of my own sites at http://www.dataprotectioncourse.co.uk/ (it needs a recent version of IE to see it in action, but works on all the other browsers fine). And you already have the reference you quoted to tell you how to rotate things.
You just have to combine the rotations with the continuous animating to get what you want.
Is it possible to translate an element by a constant amount with CSS? For instance, we want to move a div in 50 pixel increments up the screen. Right now, we use update the translate value manually, but this creates a choppy effect.
Here's the code, where translate equals a value that increments by 50 every time this line is called:
$(element).css( '-webkit-transform', 'translate3d( 0, ' + translate + 'px, 0)' );
We need this work on mobile devices so we can't use jQuery animate because it is not smooth enough (in our experience) on mobile. We need to translate by a constant amount because we need to track the element's position so we call the translate code every X ms.
Instead of constantly firing off repeated animations I'd just set one animation with appropriate values, then detect the current position in your loop rather than trying to do the animation in it. This updated example from the linked question seems to indicate it would work.
You may want to interrogate the transform property to get the current translation values if they're going to be more complex than simple top/left. You should get a value that looks something like this:
matrix(1, 0, 0, 1, 0, 300)
There are several jQuery plugins that extend the animate method to use CSS3 and make animations very smooth on mobile devices.
I've used in the past a couple of plugins, don't remember the ones I used, but a quick Google search gave me this one:
http://ricostacruz.com/jquery.transit/
It would be something like this:
$(element).transition({ y: '+=50' });
I've got this, and it's "good enough", but my original vision was to have the numbers roll up like an odometer:
setTimeout(slideUp,2000);
function slideUp() {
$('#odometer').slideUp('slow','swing',slideDown);
}
function slideDown() {
$('#odometer').removeClass('highlight').slideDown('slow');
}
So what it does is: when the page loads, the number is highlighted. Two seconds after the page loads, it slides up out of sight and then slides down in a normal font.
But what I'd like for it to do is count up to the number like an odometer.
I could give it a starting number as well, so that the user wouldn't have to watch
it count to an exorbitantly high number.
You may go and read the source code of ScrollerJS. It does exactly what you want to achieve with both CSS transition and DOM animation support.
And most importantly it's open source and doesn't depend any third party libraries including jQuery, D3, Velocity etc.
How can I create a smooth animation that eases in toward a target as it changes position?
As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates.
What would be the ideal implementation / structure to achieve the desired effect?
Ok, answering my own question here in case anyone else has this problem.
Instead of calculating change (change = finish - begin) each time moveTarget() fires, it is constantly being calculated in onEnterFrame(). So moveTarget() only responsible for getting the new X and Y positions.
This allows the values to ease toward the target.
I also permanently set the time value of the easing function to always be 1:
easeIn(1, begin, change, duration);
The example answer is in this revision jsFiddle: http://jsfiddle.net/dannygarcia/LqP2R/45/