Transitioning sorting what is displayed on webpage - javascript

Looking for a way to do something like this.
Where when you click on a section it nicely transitions them.
Would it be a Jquery plug in or done with CSS?

You can do it with both jQuery and CSS, however the CSS support is a little worse than the jQuery-centric solution.
Try something like this for use with jQuery...
$('outerdiv').click(function() {
// `this` being the html element clicked on
$(this).fadeOut(function() { //After fadeOut completes,
$('.page-to-show').fadeIn(); //Fade in target page
});
});
Let me know if you need more advice on how to get this set up.

It looks like you want something along the lines of this plug-in: Quicksand

try this one.
Note:.cont stands for the name of the div or the body that u want to fade or something
.cont{
animation: transitionIn 2s;
}
#keyframes transitionIn{
from{
opacity: 0;
transform: rotateX(-10deg);
}
to{
opacity: 1;
transform: rotateX(0);
}
}

Related

Javascript functions with jQuery not fully working

I am using a hamburger menu which toggles class with jQuery and fades in/out a hidden menu using Javascript all in the same click function. It is working except that the icon has to be clicked twice before the menu fades in initially, not even double clicking gets it to work at the same time as the icon toggles class, after that it is fine and works as expected, just the delay on first opening page, Or is there a way to do it better with jQuery, I did try a couple of ways but couldn't get it. The code is below:
// In javascript
$( document ).ready(function() {
$(".hamburger").click(function() {
$("#primary_nav").toggleClass("is-active");
}
});
// In CSS
#primary_nav {
opacity: 0;
pointer-events: none;
transition: opacity 300ms;
}
#primary_nav.is-active {
opacity: 1;
pointer-events: auto;
}
Its all inside an init() function so Im not sure if I need the document ready. (I am using Sage 9 for Wordpress)
Any tips welcome. Thanks
Update I scrapped the javascript fades to use the jQuery toggle and css as in below answer, so its like that at the moment.
The original Javascript target the js-btn on click. Wordpress generates extra classes menu-main-container etc as in image below. Just need this little bit to finish the nav. Thanks
You asked for another way, so that's what I'm providing. I don't like doing simple transitions like this in JS - I find them easier and more performant in CSS. So here's my suggestion:
// In javascript
$( document ).ready(function() {
$(".hamburger").click(function() {
$("#primary_nav").toggleClass("is-active");
}
});
// In CSS
#primary_nav {
opacity: 0;
pointer-events: none;
transition: opacity 300ms;
}
#primary_nav.is-active {
opacity: 1;
pointer-events: auto;
}
#media (min-width: 920px){
#primary_nav {
opacity: 1;
pointer-events: auto;
}
}

show a website loading image using only CSS (not Javascript or jQuery)

How can i put a logo and a loading image when a user open the website
when the user open the website the logo appear with a loading image than the home page appear after a certain moment like this website
http://www.theprofessionalslb.com/
and it possible to do that without using javascript or jquery only in css?
Yes, you can animate with pure CSS using the animate property.
For example, if you would want #img1 to show first, and #img2 to show after, you can set an animation-delay on your second image and make that equal to the animation-duration of your first:
#img1 {
...
animation-duration: 2s;
...
}
#img2 {
...
animation-delay: 2s;
...
}
Then in your animation you can animate e.g. the opacity property to simulate a fade-in effect.
More on CSS Animations here.
EDIT
I created a fiddle doing what you want.
For support in more browsers, please advice caniuse.com.
Use loader image and apply it to body. Show the image till page load and when page is ready remove the image.
jQuery( window ).load( function(){
//show the image here.
});
jQuery( document ).ready( function(){
//hide the image here.
});
The way they did it, it's handled by jQuery-Animations, something like this:
// Fade-In logo
$('#logo').fadeIn(2000, function() {
// When done, fade-in the slogan
$('#slogan').fadeIn(1400, function() {
// When this is done, wait 1s and then fade both out
$('#logo, #slogan').delay(1000).fadeOut(2000, function() {
// Finally fade-in the content
$('#content').fadeIn(2000);
});
});
});
The first argument of the fadeIn-method is the animation-time, the second argument is the callback-function, that gets executed after the animation is done. For more information see its documentation.
This technique assumes either, that your animated elements are either set to opacitiy: 0 in their CSS, or that you set them hidden in your JS:
$('#logo, #slogan, #content').fadeOut(0);
or:
$('#logo, #slogan, #content').hide();
You could also use plain CSS for this, where you would do something like this:
#logo, #slogan, #content {
opacity: 0;
}
#keyframes fadeInAndOut {
0% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
#logo {
animation-name: fadeInAndOut;
animation-duration: 6400ms;
}
#slogan {
animation-name: fadeInAndOut;
animation-duration: 4400ms;
animation-delay: 2000ms;
}
#content {
transition: opacity 2000ms ease-out 6400ms;
opacity: 1;
}
Please be aware that both examples are untested and should just give you an idea. You will probably need to also use the -webkit-keyframes prefixed version for the animation and also if you want the animation timings to be visually perfect, you'd need two separate fadeInAndOut-keyframes for both.

Recreate jQuery's slideUp and slideDown, but for slideRight and slideLeft instead?

I'm using slideUp and slideDown to animate sections hiding and showing using AngularJS's ngShow. It works fine, but I'd much rather have slideLeft and slideRight. How would I go about recreating slideUp and slideDown for those?
slideUp automatically hides the the element and slideDown automatically shows it - how would I be able to configure this such that they hide and show when I want then to? e.g.:
$(element).slideLeftAndHide();
$(element).slideLeftAndShow();
As opposed to
$(element).slideUp(); // $element.slideUpAndHide();
You can use the following to achieve this:
$('#element').show("slide", { direction: "left" }, "fast");
Since you tagged Angular.js, I assume you're also using Angular. You should prefer using something like ng-class instead of literally showing and hiding elements with jQuery. This is a good, modular way to do what you want using existing Angular.js capabilities and fast CSS animations.
I also assume that you're doing the show/hide part in response to some sort of conditional value changing, is that right?
If so, to start off:
1. When the conditional value changes, let the DOM know by adding a class name when a condition turns true.
<div ng-class="{showing: myDataFinallyLoaded}">...</div>
In this case, if myDataFinallyLoaded is true, the div has a showing class attached.
2. When the div has a showing class name attached, animate it into view.
div {
transform: translate(-100%) scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
div.showing {
/* Any CSS rules can go in here! */
transform: translate(0px) scale(1);
opacity: 1;
}
3. When your condition becomes true, update the scope.
someRandomAPI.loadEverything().then(function() {
$scope.myDataFinallyLoaded = true;
});

jQuery fadeOut() skips after CSS fade in

I'm having a bit of a frustrating problem regarding fading out an element using jQuery after it has been faded in with CSS. I set up a CSS animation to fade in an element when the page loads using the following (I've also got the relevant browser prefixes included too, I'm using Stylus):
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
opacity: 0;
animation: fadein 500ms ease-in 1ms forwards;
}
My issue is that when an event handler is activated that runs the following, the fadeOut does not fade but instead skips straight to nothing:
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
I've been able to replicate the issue in this JSFiddle. Can anyone help me out? :) Thanks a lot!
I would say it's conflicting with the CSS you're using. jQuery is probably using other opacity related properties than what your CSS is. An all jQuery solution might be this:
CSS
.elem {
display: none;
}
jQuery
$('.elem').fadeIn(1000); // on page load, fade in with jQuery
$('#go').click(function(){
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related: Conflict between CSS transition and jQuery fade
I know you asked for FadeIn and FadeOut... here's your code with animate and opacity instead.
$('#go').click(function(){
$('.elem').css('animation','none').animate({
'opacity' : 0
},function(){
$('.elem').animate({
'opacity' : 1
});
});
});
It seems that the css-animation has higher precedence than the inline style that jQuery applies to the element when fadeOut is used. This means the animation's opacity : 1; overrides any opacity setting jQuery applies, up until jQuery sets the element to display:none;
You can do this to get around:
$('#go').click(function(){
$('.elem').css('animation','none').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});

firing javascript after css3 page fade-in to make animation smoother?

I have some javascript that slows down my page fade-in animation. I am wondering how it would be possible to prevent javascript from firing until my css3 animations have reached an end? Or at least fire the javascript after X amount of seconds.
Do you have any advice? Im still new to JS so any critics and feedback is welcome as I love to learn news things.
I thought of adding all scripts after window onload but it doesnt really help.
Thank you in advance for your feedback,
In chrome you can try:
window.ontransitionend - for css transitions
window.onwebkitanimationend - for css animations
I have used them in the past. The event contains the class name of the animation.
an example:
the css
#-webkit-keyframes doubleme {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
.tag:hover {
-webkit-animation: doubleme 1s;
}
the javascript
window.onwebkitanimationend = function (event) {
console.log(event.animationName,event.srcElement.className);
// if correct animation
// execute javascript
};
then execute you javascript after you get the correct end to your animation.
You can use .delay on the Javscript to delay how long before it fires. http://api.jquery.com/delay/

Categories

Resources