For example - http://www.tumblr.com
Log out and try to click buttons "Log In", "Sign up", "30 reasons why you'll love Tumblr" (especially interesting).
How to create this slide effect?
P.S: i'm not asking for provide me working code, just guidelines and advices.
UP: seems like i found the possible solution. Code from tumblr js files.
return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01,
beforeSetup: function(effect) {
effect.element.hide().makeClipping().makePositioned();
},
afterFinishInternal: function(effect) {
new Effect.Parallel(
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
new Effect.Scale(effect.element, 100, {
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
], Object.extend({
beforeSetup: function(effect) {
effect.effects[0].element.setStyle({height: '0px'}).show();
},
afterFinishInternal: function(effect) {
effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
}
}, options)
);
}
You'll find a working demo of a full-page slide here: http://acarna.com/full-page-slide.php
View the source and the CSS as both are requird for this to work. The main keys to note are...
You need a container in which 2 (or more) screen-sized pages are held (#wrapper in my demo)
This container needs to have its overflow property set to hidden
You must detect the screen height each time you run the animation (in case the window size has changed)
Have you check out the scripts and css they have used in their pages?
just check it out you will get the clue how to do it.
I made this effect on my own site too. I don't know how tumblr did that, but I have figured out my own way to do this(for tumblr's effect as an example):
step 1. before redirect to a new url, slide the bottom section up of current page
step 2. slide down the top section when the new url document.ready
Update years later:
Since I just got a new vote-up, I discovered this old answer which is now a little bit outdated.
With modern javascript, you just need to use history.pushstate, all effects are performed in one page. After changing the page content with js, you can use pushstate to change the url, which makes it like navigating with effects.
To read more about pushstate, please refer https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
Holla, I need to reset the animation when I close menu and open it again. How can I do that? Animation works only the first time when I open menu.
CSSPlugin.defaultTransformPerspective = 600;
TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);
Here is the code: http://codepen.io/hafsadanguir/pen/qOdaab.
Thanks for help!
Is this the kind of result you were after?
JavaScript:
CSSPlugin.defaultTransformPerspective = 600;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logotitle = $('#logotitle');
var listItems = $('ul#menu li');
var timeline = new TimelineMax({ paused: true, reversed: true });
timeline.fromTo([logo, logotitle], 0.6, { top: 300 }, { top: -50, ease: Power2.easeInOut });
timeline.staggerFromTo(listItems, 1.2, { autoAlpha: 0, rotationX: -90, transformOrigin: '50% 0%' }, { autoAlpha: 1, rotationX: 0, ease: Elastic.easeOut.config(1, 0.3) }, 0.1, 0.3);
toggleMenu.on('click', function() {
$(this).toggleClass('on');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
A few things have changed so here are the details:
First and foremost, I didn't see the need for the hidden class so I have removed it from my solution.
Plus, the on class toggled on the .menu-section element seemed pretty unnecessary as well. I removed it, but kept the properties defined on the .menu-section CSS rule.
On to the fun part, the JavaScript.
You basically needed a TimelineMax to operate upon.
Judging by the imports you had in the JavaScript settings panel, I am assuming that you have some idea of what TimelineMax (and TimelineLite) are all about. By in any case, TimelineLite is about building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances and TimelineMax is an extension of TimelineLite, adding more power to it.
So, what happens in the code is that a TimelineMax instance has been initialised, tweens have been added to it and then, upon clicking of the .menu-toggle button element, this timeline is either played or reversed.
The line timeline.reversed() ? timeline.play() : timeline.reverse(); is basically a shortened, fancy version of an if condition and it comes to down to personal preference more than anything else, no performance gain or anything that I am aware of. In a normal if clause, it would have been written like this:
if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
The condition that is being checked is .reversed() property of timeline. You would notice that while initialising new TimelineMax(...), I set reversed: true property on it. What it does is that after all the tweens are added to timeline, it would behave as if timeline was immediately reversed such that the orientation of the timeline had been flipped. Read more about it in the TimelineMax documentation link I shared above.
The .play() and .reverse() methods are pretty self-explanatory as they make the timeline go forwards or backwards respectively.
That is about it.
Hope this helps.
I searched all around for it but couldn't find a solution which would turn off sliding (or any animation for that matter) animation on page transition. I have simple application with 4 views which just displays a bunch of data. I am testing performance of my application on various devices and thought turning off animations would be one of the test cases to follow.
I tried several ways, such as: (caution: these are all the solutions I found on the internet, some of them might not make sense. I am still learning the framework :)
Trial I: (in launch function)
Ext.override(Ext.Window, {
animShow: function(){
this.afterShow();
},
animHide: function(){
this.el.hide();
this.afterHide();
}
});
Trial II: (in launch function, replacing Trial I)
Ext.Anim.override({
disableAnimations:true
});
Trial III: (inside my view class)
config: {
showAnimation: false,
hideAnimation: false,
navigationBar: {
hidden : false,
animation: false
},
items: [
{
xtype: 'logincard',
flex : 1
}
]
}
However, I could turn off animation in navigation bar using: (in my view class as well)
navigationBar: {
hidden : false,
animation: false
}
So is there someway of totally disabling the page transition animation in Sencha Touch 2.2.1?
Any help would be highly appreciated!
Finally got it working. I guess I didn't have adequate information on my question. I was using Navigation View which would consequently push other views via controllers.
All I had to do was put the following layout configuration inside config of my Main view which extends Navigation View.
layout: {
type: 'card',
animation: false
}
This would disable the animation on screen transition. Additionally, you can override duration, type, etc of the animation using the following configuration:
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-out',
type: 'slide',
direction: 'left'
}
}
This is the default configuration for animation for Navigation View. I found help from here.
I had the problem after disabling the animation I got errors like:
Uncaught TypeError: Cannot read property 'dom' of null
The solution is a super-fast animation:
animation: {
duration: 1,
//easing: 'ease-out',
type: 'fade'
//direction: 'left'
}
I'm having trouble to integrate the Galleria image gallery plugin onto one of my Jquerytools tabs. When navigating directly to the page with Galleria (example: www.domain.com/index.php#tabnameofgalleriapane), there's no problem.
Whenever the pane with galleria is not loaded immediately (default pane is another pane), Gallery throws an error: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px., which is logical, because when the Galleria pane is not active, it's css is probably display:none;...
Defining the height & width literally does not seem to work. This was the previous setup:
jQuery("#jp_nav").tabs(".jp_pane", { history: true } );
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
So I was thinking to bind the load of the Galleria plugin onload of the pane that contains the Galleria plugin, because in that moment, the Galleria pane does have a height... I've found something to help me on my way, but now I'm getting other JavaScript conflict errors (see below for explanation).
jQuery("#jp_nav").tabs(".jp_pane", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
pane.load(src, "#jp_images", function(){
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
});
},
history: true
});
For reasons beyond my control, the website I'm writing this for uses both jQuery and Prototype/Scriptaculous. So please take into account that the script has to be written in noConflict mode. (Which I'm doing in my setup $.noConflict();)
Can someone please tell me if the script below puts me on the right track?
Can someone help me modify the script to work when the #jp_images tab is loaded?
Right now, the above script gives me conflict errors with Prototype.
Anxiously awaiting your expert views!
Regards,
Maarten
I've managed to find a quick and dirty solution (thanks to vfxdude)
Anytime the tab with the Galleria is clicked, I force a page reload, like so:
tabName = 'jp_images';
jQuery('#jp_nav a[href="#'+tabName+'"]').click(function() { if (location.hash == '') location.replace(location.href+'/#'+tabName); });
After this, I can just use the regular old Galleria plugin initialisation.
Granted, it is a little dirty, but it's an easy and quick fix for when on a deadline.
Is it possible to have YUI menus e.g. slide in as opposed to simply popping up?
Of cause. You should set up SLIDE effect for the widget.
var oMenu = new YAHOO.widget.Menu(
"productsandservices",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.SLIDE,
duration: 0.25
}
}
);
One of the older (be careful as at the time I used it, it required patches) series of examples for YUI MenuBar hacks in this functionality using various events:
http://developer.yahoo.com/yui/examples/menu/topnavfrommarkupwithanim.html
I don't think this is available out of the box, which is a bummer. Another peeve of mine is that there's no (built-in) way to hide submenus automatically once the user has moused over some options. This makes sense for accessibility (and is the reason it is like that, according to the YUI team), but there's nothing I can do about clients who will only see it as broken.