onload add class animate.css - javascript

I have created a parallax but it is flipping slides.
I want to add animate.css class but it's only working on the first slide. On the other slide it's not working. It is working when page is loaded, but when I click on third slide the animation is already finished.
So, to make it work properly, I created a JQuery function when the slide is active, then animate CSSclass is to be added but it's not working:
$(document).ready(function(){
if ( $('#section2').hasClass('active') ) {
$('#section2 .col-md-6').addClass('rotateInUpRight');
}
});

Add this class to the slide that has to be animated.
Not to a container containing all slides.
You have to wait at least 1 animation-frame after adding the new slide to the DOM before adding this class to the new slide.
(Or 1 animation-frame after you made it visible, in case of display:none)
If you don't know how to work with animation-frames you could use a timeout of 50ms, just to be sure.

Related

Issue related to bootstrap carousel

I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});

CSS3 keyframes animation on click (with addClass). How to restart CSS3 animation with adding css class?

I have a problem. Im using Bounce.js to create nice menu animations (with some cool effects). Bounce.js using css keyframes animations which can be problematic to restart. I got menu and when I click a button and when .show class is added it should fire show animation. But when I press that button again hide class should be added with hide animation (which is just reverse version of previous animation).
Js is working (classes are adding and removing properly) but animation is fired only once - and there is no hiding animation (menu element just disappears with out animating it self).
You can do it in a serval ways.
One way is to trigger re-flow of the element before adding animation class to it.
element.offsetWidth = element.offsetWidth;
For example (vanilla JS):
if (element2.classList.contains('show')) {
element2.classList.remove("show");
//restarting css3 keyframe animation
**element2.offsetWidth = element2.offsetWidth;**
element2.classList.add("hide");
}else{
element2.classList.remove("hide");
//restarting css3 keyframe animation
**element2.offsetWidth = element2.offsetWidth;**
element2.classList.add("show");
}
jQuery version:
if(settingPopup.hasClass('show')){
settingPopup.removeClass('show');
//line below is a fix to restart css3 keyframe animation
//settingPopup.outerWidth(settingPopup.outerWidth)
settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide');
}else{
settingPopup.removeClass('hide');
//line below is a fix to restart css3 keyframe animation
//settingPopup.outerWidth(settingPopup.outerWidth)
settingPopup.outerWidth(settingPopup.outerWidth).addClass('show');
}
And here is working fiddle for it:
https://jsfiddle.net/zpawpvke/2/
Based on: https://css-tricks.com/restart-css-animation/

Animate divs when others disappear

I have a layout of divs that all 'clear', like in a list. I use jQuery's built in fadeOut function to make them disappear after a certain amount of time. That all works great. The divs disappear one at a time starting from the top. jQuery uses to fading opacity and finally display:none to 'fadeOut' the div. When the top div finally fades out (to display:none) the divs underneath it all move up, but they jump up. I was wondering if there is a way to make this a smooth (slide) transition? TIA
Maybe you can do your animation before setting the display:none to you your previous div. Set first div opacity to 0, move your second div to the fist div position with a setInterval or setTimeout, then hide your first div with display:none ... then rinse and repeat.

adding class to show active slide

I am trying to show active slide for a slide show. I have hard coded the divs since I know how many slides would be there so it looks like this
var activeSlide = $('<div class="slidePosHolder"><div class="slidePos"></div><div class="slidePos"></div><div class="slidePos"></div></div>');
Now I am adding an active class which I am trying to index it to this .views-field-field-slide-description..The concept is when the class changes it shows the active state on the current slide. Rest of my JQuery looks like this
$('.slidePos').removeClass('active');
$('.slidePos').eq($(this).index('.views-field-field-slide-description')).addClass('active');
It is adding the class to the starting slide but not removing it as the slides progress. I am assuming I am indexing it wrong. Any ideas? I am using jquery 1.4.4

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/

Categories