How to make a transform animation - javascript

I have a script for my HTML page. I want to make the following in that script:
Show a preloading #id for some seconds and then fade out;
While the div is loading the main page under that div which is shown cause my opacity is to 0.7 I want to tranform the nav-bar up to browser windows so bassically hide it and in that position to tranform a new nav-bar.
I want that to take place while the preloading page is working not after!
And I want to show more contects in parraler with the nav-bar animation.
I created the script but I get lost in how to position my actions and I don't know if I made anything corrdctly. I make the fade out preloader.
$(window).load(function(){
$("#fade").css({opacity: 0.7})
$("#fade").delay(4000).fadeOut(1000, function() {
$('#nav-before').transition({ y: '40px' }); //now I want to hide the nav
//and show the new with id="nav-after"
//and in parraller with the above to be able to load more contects
$("#fade").remove(); //when evrything finished kill the div
});
});

$( "#fade" ).animate({
opacity: 0.0
}, 5000, function() {
// Animation complete.
});
You can play with animate. Here is the reference: jquery.com/animate/

Related

Is there anyway to prevent page jumps (from loading images) while scrolling to a div?

I use the following code on page load to smoothly scroll to a div
$(document).ready(function() {
$('html,body').delay(50).animate({scrollTop:jQuery('#3342').position().top-10}, 'slow');
});
It works wonderfully to smoothly scroll the page to a predefined div id (in this case div id=3342, but the actual div ID changes depending on what button the user clicks).
The problem is that if there are any images in the pages above div 3342, then after the scroll finishes, the page jumps and the entire positioning scroll is for nothing, as that content is no longer on screen.
This is on mobile safari btw. I know Google chrome has recently introduced Scroll anchoring, and I believe this is the functionality i'm trying to reproduce somehow.
Just FYI, I have no way of knowing the sizes of images or the ratio of the image sizes ahead of time. They are random images from around the web
Thanks!
EDIT: I don't want to change to window/load event as that means I would have to wait for all the images to load first, which would delay the scroll event massively on some pages
EDIT: The image URLs are all on the source page, no ajax loading of pages after the fact
Repeat until complete:
$(document).ready(function() {
var div = jQuery('#3342');
var complete = false;
function adjust () {
if (!complete) {
$('html,body').delay(50).animate({scrollTop:div.position().top-10}, 'slow', adjust);
} else {
$('html,body').delay(50).animate({scrollTop:div.position().top-10}, 'slow');
}
}
adjust();
$(window).on('load', function () {
complete = true;
});
});

Velocity JS slide and scroll

So I have some text on a page that is hidden and when I click a button the text is revealed with a "transition.slideDownIn' and when a button is clicked the text is hidden again using a "transition.slideDownOut". The problem is that the reader is left further down the page and I want them to be brought pack up to the parent div of the text which is slid down/up, ideally animated simultaneously with the slideDownOut. I have tried several different things (queues, etc) but I can't seem to figure out what I am doing wrong. Am I approaching to problem incorrectly or misusing the functions?
Below is my most recent attempt.
$read_close.velocity('transition.slideDownOut', 1000, function() {
$('#services').velocity("scroll", {duration:1000, easing: "spring"} );
});
If what you wish to accomplish is simply scroll back up after the transition then do something like:
$read_close.velocity(
'transition.slideDownOut',
{duration: 1000,
complete: function () {
$('#services').velocity('scroll', {duration:1000, easing: "spring"});
}});
Assuming your scroll call is correct.

Slide in menu - off canvas

I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)

How to make appearance of jssor slide a triggerable event?

Using a basic JSSOR Slideshow, with n div image placeholders, where the divs are read in descending or top-down order, just like any other normal HTML page, I can add javascript into a div, or add javascript somewhere else on the page to make something happen within a slide div (animation, fade, etc.).
The problem is it will trigger once, as when the document is loaded. How do I make a javascript function "re-triggerable", so that it is called when that one slide (let's say slide #2) appears in the display loop?
Feel free to ask more questions if this is not clear enough.
Here's an example: Slide Show On the first slide appearance, a gold medal scrolls to the middle of the slide, using jQuery animate(). It will only do this once, not each time the slide appears. The reason is that the gold medal animate script only loads once, when the html page is loaded. I want that gold medal animate script to reload again and again, each time slide #1 makes its appearance.
Please do this job when slideshow plays over at slide 0.
var jssor_slider1 = new $JssorSlider$(...;
function SlideshowEndEventHandler(slideIndex, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
if (slideIndex == 0) {
//runs the animation when slideshow plays over at slide 0
$("#goldmedal").animate({
opacity: 0.99,
left: "+=490",
height: "toggle"
}, 2500, function () {
// Animation complete.
$("#goldmedal").animate({ opacity: 0.0 }, 4000, function () {
$("#goldmedal").css("left", "0px");
});
});
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SLIDESHOW_END, SlideshowEndEventHandler);
//As it would not play slideshow at the beginning for slide 0, make a manual trigger at the beginning then.
SlideshowEndEventHandler(0);

Change a div background with jQuery

I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.

Categories

Resources