I have this plunker that roughly demonstrates what I am intending to do. I'd like to select the kind of animation based on a method called. pushPage() would navigate and slide the entering page over the top - popPage() would slide the leaving page off the top.
https://plnkr.co/edit/atFX5SVUfpWAg6i2dXuM?p=preview
nav.pushPage(['angular', 'route'])
nav.popPage(['goes','here'])
I am just starting to learn how to use angular animations, any tips on how I could make this happen?
Related
I have a slider already rendered and then the user makes a change on a drop down causing an ajax request.
Based on the result I need to remove the current slides and add new ones. Can be more or can be less.
Any ideas on how to achieve this? I would like to avoid removing the entire slider and creating it again, seems like an overload to me.
I also have bullet navigation and will expect them to be refreshed too.
Regards,
Sergio
I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !
Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you
I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.
I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/