Transition in Navbar when Scroll Down - javascript

My navbar color will be change when I scroll down. The color is changing. But there is no transition effects. How to give a transition for this. Here is my Code..
$(window).scroll(function() {
if($(this).scrollTop() > 0)
{
$('.navbar-trans').addClass('afterscroll');
} else
{
$('.navbar-trans').removeClass('afterscroll');
}
});
This is my script code. and my css is,
.navbar.navbar-trans.afterscroll { background-color:#1ba4df; }
How to give an animation to this.

Just add this rule in your css file. It will work for you, because here the transition property is set to all changes...
.navbar-trans {transition: all 0.3s ease; /* other css rules here */}
Read more about transition property here...

Thats it... Try this dude....
.navbar.navbar-trans.afterscroll {
background-color:#1ba4df;
Transition:0.3s all linear;
}

Related

On state change, do animation

Currently I'm working in Vue.js and have a navigation menu that I'd like to animate. What I'm looking to do is show two li elements when a user hovers over one of the navigational buttons.
Currently what I'm doing is setting a data type of showActivities to false by default and setting that to true on mouseenter and false on mouseleave. So this has the items appearing and disappearing on hover but they're not animated. How could animation for this be done?
<ul class="navs">
<li>Schedule</li>
<li #mouseenter="showActivities = true" #mouseleave="showActivities = false">Team Activity</li>
<li v-show="showActivities">tik tak tow</li>
<li v-show="showActivities">Bejewel</li>
<li>Resources</li>
<li class="logout">Logout</li>
</ul>
<script>
export default {
name: 'SideMenu',
data() {
return {
showActivities: false,
};
},
};
</script>
okay if i got you correct you want a type of animation like a slow fade In and Out.
In vuejs transitions, state are attached to CSS classes that can be called and modified ass you want it to be. The doc is clearer about it
Vuejs Transitions
for example if you add this in your css section the transition will be a slow fade In and Out:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

Render a component after a timeout through pure CSS

I'm aware that there is a way to achieve the effect of a component being rendered after a given timeout but I would like to do it in pure CSS through transitions. The problem is that when looking at tutorials for using css transitions - you usually have to hover over the element in order to trigger the animation - but in my case - I simply want the element to become visible after 2 seconds from being rendered. How can I achieve this?
animation can help :
p {
opacity:0;
animation:show 5s 2s forwards;
}
#keyframes show {
to {opacity:1}
}
<p>see me</p>
See https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after its execution.
A simple component is in this CodePen. You can simply apply the css animation on opacity.
var SomeComponent = React.createClass({
render: function() {
return (
<div className="myClass">My Component</div>
);
}
});
React.render(
<SomeComponent />,
document.getElementById('root'));
.myClass {
opacity:0;
animation:show 2s 1s forwards;
}
#keyframes show {
to {
opacity:1
}
}
<div id="root"></div>

Opacity transition works on fade out, but not fade in

This is frustrating me to no end. Before I post the code, here's a summary:
The goal, in simple terms: when I double click X, I want it to fade out; when I click Y, I want X to fade in.
The method: I'm using CSS to create the actual fade-in and fade-out "animations." I'm using JavaScript to apply the classes when necessary using a little trickery.
The problem: the fade-in transition doesn't work -- the element just appears instantly. What is driving me insane is the fact that the fade-in, when instantly added back onto a faded-out object, works perfectly. I'll explain this better as a comment in the JS code.
(Yes, I've added opacity: 1 and transition: opacity onto the base elements. It had no effect at all.)
The code:
CSS
*.fade-out {
opacity: 0;
transition: opacity 400ms;
}
*.fade-in {
opacity: 1;
transition: opacity 400ms;
}
*.hide {
display: none;
visibility: hidden;
}
JavaScript
$( '#ArtistEmblem' ).on( 'dblclick', function() {
fadeOut($( '#ArtistEmblem' ));
fadeIn($( '#btnShowLogo' ));
});
$( '#btnShowLogo' ).on( 'click', function() {
fadeOut($( '#btnShowLogo' ));
fadeIn($( '#ArtistEmblem' ));
});
function fadeOut(element) {
element.addClass( 'fade-out' );
setTimeout( function () {
element.addClass( 'hide' );
/*
* I tried immediately adding the 'fade-in' class here
* and it worked -- as soon as the element faded out, it faded
* back in (using the CSS transition). However, outside of this,
* it REFUSES to work; everything appears instantly
*/
console.log('timer triggered');
}, 400);
}
function fadeIn(element) {
element.removeClass( 'hide' );
element.removeClass( 'fade-out' );
element.addClass( 'fade-in' );
}
Relevant HTML
<div id="ArtistEmblem">
<img src="img/logo_artist_2.png" />
</div>
<div id="PopMenu" class="collapse">
<article>
<header>
<b>Debug Menu</b>
</header>
<section>
<button id="btnOpenOverlay">Open Overlay</button>
<button id="btnShowLogo" class="hide">Show Logo</button>
<button id="btnClose">Close Menu</button>
</section>
</article>
</div>
I apologize if this is something obvious but I've wasted far too much time trying to solve it. I am also open to better, faster, or more efficient solutions if that would be the best answer. Thanks in advance!
The problem is that the initial opacity of "hidden" element is 1 by default. You just need to set it to 0. And also remove display: none –
*.hide {
opacity: 0;
}
Also I would do a little refactoring and remove setTimeout:
$('#ArtistEmblem').on('click', function() {
fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
fade($('#ArtistEmblem'), $(this));
});
function fade(inElement, outElement) {
inElement.removeClass('hide');
inElement.addClass('fade-in');
outElement.removeClass('fade-in');
outElement.addClass('fade-out');
}
If you don't want the hidden element to occupy space and you want it to be displayed-none, then you need to set display: block before starting the fadeOut.
I know you're asking for a JS heavy answer, but I highly recommend toggling a class of "active", "open" or something similar and using CSS with the transition. Less is more here.
Here's an example fiddle of something I've transitions not only the opacity, but also the z-index. That's the key with these transitions if you intend on having any elements below such as buttons that require hovering, clicking, etc.
JS Fiddle
Key parts:
.container {
z-index: -1;
opacity: 0;
transition: z-index .01s 1s, opacity 1s;
}
.container.active {
transition: z-index 0s, opacity 1s;
z-index: 500;
opacity: 1;
}
EDIT
I was just messing around with this type of thing for my own project, and observing how beautiful Stripe handles their navigation bar. Something so simple changes everything, and that's pointer-events. If you're okay with its support, (notable no ie. 10) this is infinitely easier to integrate. Here's another fiddle of the simulation in a nav bar.
The key part is pointer-events: none, as it ignores click events if set to none, almost as if it wasn't there, yet visibly it is. I highly recommend this.
https://jsfiddle.net/joshmoxey/dd2sts7d/1/
Here is an example using Javascript Animate API. Animate API is not supported in IE/Edge though.
var element = document.getElementById("fade-in-out")
var button = document.getElementById("x")
button.addEventListener("click", function(event) {
element.animate([{opacity: 1, visibility: "visible"},{opacity: 0, visibility: "hidden"}], {duration: 2000})
setTimeout(function() { element.remove() }, 2000)
})
button.addEventListener("dblclick", function(event) {
element && element.animate([{opacity: 0}, {opacity: 1}], {duration: 2000})
})
<input id="x" type="button" value="Click here" />
<div id="fade-in-out"> FADE ME </div>

jQuery hover animation efficiency

I've got my hover working - but i'm interested in trying to make it more efficient as it does seems to 'lag' when it's finding the .overlay div. I also had the issue where I was animating all .overlay divs on a page, which I consider to be quite a noob mistake.
Anyway, let's learn how to make the below better!
jQuery:
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
// get the overlay div
var feature_overlay = $(this).find('.overlay');
$(feature_overlay).stop().fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop().fadeOut();
});
Markup:
<aside>
<div class="feature">
<div class="overlay">
button
</div><!-- overlay -->
<div class="text">
<p>text</p>
</div><!-- .text-->
<div class="image">
<figure>
<img src="" alt="">
</figure>
</div><!-- .image -->
</div><!-- .feature -->
</aside><!-- aside -->
Fiddle: http://jsfiddle.net/9xRML/5/
Edit - Final Code
Thanks #Shomz, and #Afro.
Final code choices were to use tranisitons, and coupled with modernizr detection for transitions, I changed my hidden overlay div to opacity: 0; *display:none; and javascript as a fallback:
CSS
.overlay {
*display: none;
opacity: 0;
transition: 0.4s all linear;
}
.overlay:hover {
opacity: 1;
}
jQuery
$(function () {
/*=====================================
= Feature overlay =
=====================================*/
if (!Modernizr.csstransitions) {
// get aside feature
var aside_feature = $('aside .feature');
// on hover, fade it in
$( aside_feature ).hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
// on hover out, fade it out
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
}
});
With risking of having my answer out of scope here, if you want to really get performance, you should switch to CSS animations. It's totally possible with your example by setting the default opacity of the overlay to 0 (instead of display: none;) and making it show up on .feature:hover. The trick is to add the transition property like this:
// applies a 4ms transition to any possible property with no easing
transition: all .4s linear;
See the whole example here: http://jsfiddle.net/9xRML/6/
See a nice article about the performance difference (CSS vs. JS) here: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ (there are many more, of course)
I think I have solved your issue using the same HTML but changing the following:
JQuery
$('aside .feature').hover(function() {
$(this).find('.overlay').stop(true, true).fadeIn();
}, function() {
$(this).find('.overlay').stop(true, true).fadeOut();
});
CSS
.feature {
background: #ccc;
}
.overlay {
display: none;
}
This means the overlay will only display on hover.
Details on .stop() can be found here.
.stop(true, true)
We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain.
DEMO

help with fade on mouse over

How do i make my sites welcome page be faded before you mouse over it but then once you do it becomes more visable? it is a tumblr page so i think it has to be html.
any help on this? thanks
http://realhighlife.tk/
since the picture in question is also a clickable link is it possible to do this?
<center><img src="http://i52.tinypic.com/29p40eo.jpg"></center>
#ilia-choly is right, but if you want it to work in some older browsers also, you could try jQuery, specifically:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
/* Config */
targetElement = 'center a'; /* Select the element(s) you want to fade in and out */
fadedOpacity = .3; /* The opacity value you like for your faded state */
animDuration = 250; /* The duration in ms for the fade animations, smaller is faster */
/* This block runs once the document loads to bind the plugin behaviour to your target */
$(function(){
$(targetElement).fadeInOnHover(fadedOpacity, animDuration);
// ... You can bind the behaviour to other elements here if you need to, e.g:
// $('div.new-target').fadeInOnHover(fadedOpacity, animDuration);
});
/* This small jQuery plugin behaviour can be applied to any element */
$.fn.fadeInOnHover = function(fadedOpacity, animDuration) {
$(targetElement)
.fadeTo(0, fadedOpacity)
.bind('mouseover',function(){
$(this).fadeTo(animDuration, 1);
})
.bind('mouseout',function(){
$(this).fadeTo(animDuration, fadedOpacity);
})
;
};
</script>
look into css3 transitions. http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3
keep in mind these will only work in modern browsers.
html
<img id="test" src="http://static.adzerk.net/Advertisers/2333.jpg" />
css
#test {
opacity: 0.5;
-webkit-transition-property: opacity,
background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; }
#test:hover {
opacity: 1.0;
}
fiddle: http://jsfiddle.net/SW5CV/

Categories