So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!
You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'
Related
I would like to trigger an SVG animation (thats coded into the SVG file itself) to happen when the user scrolls down. I believe this is done by setting "begin: indefinite" on "" and then setting it to 0 with jquery/js when the user scrolls? Anything I have tried does not seem to be working so I was wondering if anyone can give me some better direction on how to accomplish this.
Setting the begin time of an animation element to "0" tells it to start immediately after the document loads. Since the document has already loaded by the time your user is scrolling, it won't have any effect at that point.
To trigger an animation element using Javascript, use the beginElement() or beginElementAt(delayInSeconds) methods. The first method starts the element immediately, the second starts after the specified delay. More info in the SVG specs.
window.addEventListener('scroll', function(e){
document.getElementById("animateOnScroll")
//.setAttribute("begin", 0); //this doesn't work!
.beginElement(); //this does!
});
http://fiddle.jshell.net/k95aZ/
I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've got:
HTML:
<div id="feed"></div>
JS:
var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
++wIndex;
if (wIndex >= myCars.length) {
wIndex = 0;
}
$('#feed').removeClass('animated slideInLeft');
$('#feed').addClass('animated fadeOut').addClass('hidden');
$('#feed').text(myCars[wIndex]);
$('#feed').removeClass('animated fadeOut').removeClass('hidden');
$('#feed').addClass('animated slideInLeft');
}, 3000);
http://jsfiddle.net/tjfo/5a3SL/
The initial change from the first element in the array to the second works properly, fade out, slide in. All the following transitions just change the text in the div with no fade out, slide in. Animate.css is the preferred method for completing this task. Can anyone help figure out how to make it work properly?
Thanks!
I think you're looking to remove the animated and slideInLeft classes prior to applying subsequent classes. Maybe remove those classes right off, then in a timeout of say, 25ms, do the rest of the logic.
Here's a demo: http://jsfiddle.net/5a3SL/3.
When animating with CSS this is a fairly common thing since you need to give the browser time to calculate the new layout without those classes before applying new classes, otherwise the correct state won't exist in the layout for the new class to properly animate.
Also, that honestly seems like too much CSS for a simple animation... the trickiest thing about animations is having to re-write your CSS declarations for 4 different vendor prefixes as well as the standard declaration.
Another way to handle this would be to set a timeout at the end of the loop that is at least as long as the animation (the slide-in) and remove the unnecessary classes then.
I'm wondering if this is possible with jQuery or JS.
I have a margin set on a div that is set by getting the height of a container that contains images.
var articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
However, the container's images are essentially a slider, so the height of this container can change.
I'm wondering if it's possible to update the articleImageHeight variable live as the height of the container changes?
I am using slidesJS for the slider in the container.
Here's an example of what I'm working on: http://goo.gl/FdftC
Many thanks,
R
What I would probably do for this is to add your snippet of script as a function and then to call that function every time the slide changes. This will mean you need to make a slight modification to the plugin. Having a look at the plug the main animate function is simply called animate().
So as a quick example
updateHeight = function(){
articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
}
The above adds your bit to a function and then add updateHeight(); to line 236... if you're using the un-minified version of the plugin.
Just above the line that says } // end animate function
.. just a thought a what might look a bit nicer is to use .animate rather than .css for updating the top margin... but hey I don't know what you're working on so is entirely up to you.
----EDIT----
Just an update... we found an animateComplete() callback on the plugin which worked a charm.
I want to create scroll behavior like what can be found here. If you scroll down the page you will notice the crabs, sharks, waves etc are animated whenever the page moves. How can this be achieved? Is this a script or CSS animation?
Edit: text bubbles also appear and disappear at different scroll points.
If you would like a more robust jQuery script to help you out: Per the answer at Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?:
A slightly more full fat solution to the already great one suggested
by Justin is to use jQuery Waypoints to manage the in viewport events.
...
(the answer by Nicholas Evens)
It is a script, just bind a function to the window 'scroll' event with a callback function to do whatever you want. You can tell how far you've scrolled with window.scrollY.
$(window).bind('scroll', function () {
console.log(window.scrollY);
});
You need to subscribe scroll event using jQuery and move your element basing on the scrolling offset whitch can be reached using .scrollTop() property
$(window).scroll(function () {
var scrollOffset = $(this).scrollTop();
// move element to the offcet
});
I didn't look at the site's source code, but I believe it depends on JS. Javascript is necessary to listen to the scroll event of the page, and act according to the current value of document.scrollTop. Then the elements can be positioned with JS, and images can be switched either directly in JS, or by using CSS to change some element's CSS class.
That is definitly a script, you can attach an onscroll event and get the percentage of the current scroll and just position your "crabs" depending on that.
There was already a lot of scripts of how to get the percentage here
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.