How to fade in/out a navbar, which gets fixed after scrolling? - javascript

So far I have a navbar with transparent background when you land on the page. After a certain threshold of scrolling, it gets the class navbar-fixed, which makes the navbar fixed and changes the appearance.
However, I would like it to have a smooth fade in and fade out effect when it appears (and when you scroll up again, disappears).
How could I achieve that? Jquery fadeIn and fadeOut does not work since it actually totally hides the navbar with the fadeOut.
<div id="nav" class="navbar-trans">
</div>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav').removeClass('navbar-trans').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav').removeClass('navbar-fixed').addClass('navbar-trans');
}
});
});
</script>

Use a css transition
#nav {
transition: opacity 0.25s;
}
.navbar-fixed {
opacity: 0.75
}
.navbar-trans {
opacity: 1;
}

As #realseanp says, CSS transitions would work nicely here. However, you probably want to apply the transition to the nav's background color rather than the opacity.
#nav {
transition: background-color 0.3s ease;
background-color: rgba(255,255,255,0);
}
#nav.navbar-fixed {
background-color: rgba(255,255,255,1);
}
Here's a fiddle to demonstrate. After a 1 second timeout, the class "fixed" is applied to the nav.

Related

Hide swiper js navigation buttons(left and right) when no more images are present in the particular direction

How can I hide swiper js navigation buttons(left and right) when no more images are present in the particular direction
Eg. When there are no images in the right direction then the right navigation button should get hidden.
I found a simple solution using CSS
.swiper-button-disabled{
display:none;
}
This will automatically hide the navigation button of that direction when no images are present in that direction.
If you want to hide it with a fading effect you can simply do this:
.swiper-button-next, .swiper-button-prev {
opacity: 1;
transition: 0.5s ease-in-out;
}
.swiper-button-disabled {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
}
Using jQuery, you could do something like:
if (swiper.activeIndex===0) {
$('.left-slide').hide()
$('.right-slide').show()
} else if (swiper.activeIndex === swiper.slides.length-1) {
$('.left-slide').show()
$('.right-slide').hide()
}
First condition is the first slide

CSS transition while keeping the object in center viewport

I have a css transition on max-height
.container {
max-height: 70vh;
transition: max-height 0.2s ease 0s;
}
.container .expanded {
max-height: calc(70vh + 500px);
}
I'd like to keep the center of the container in the same place - so effectively have it "collapse down" when the expanded class is removed, but have the bottom of the container remain in the same place in the view port (effectively scrolling the page as it animates)
I've got a somewhat working version of this using JavaScript, like so
setTimeout(() => {
if (nextStateIsMinified && this.viewMoreButtonRef && this.viewMoreButtonRef.current) {
this.viewMoreButtonRef.current.scrollIntoView({
block: 'end',
behavior: 'smooth',
});
}
}, 100);
But it's fairly janky and not a good UX.
Is there a native way to do what I'm trying to do?
Here is an example in CodePen.
https://codepen.io/jonluca/pen/XWJPogj
I'd like to have the button remain in the center of the viewport when you click it.

Make transition between 2 header logos

I am having 2 different logos in the header and i applied this function for them to replace each other at certain point.
Hovewer i want to apply some fade in and fade out to them when they make transition. Is this possible only with JS or CSS is included?
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('.logo-image.logo-light img').addClass('active')
}
if ($(this).scrollTop() < 500) {
$('.logo-image.logo-light img').removeClass('active')
}
})
});
.logo-image.logo-light{
background:center center no-repeat;
background-size:contain;
background-image: url('http://www.plaforma.me/wp-content/uploads/2018/04/logo-zastavica.png');
}
.logo-image.logo-light img{
opacity:0;
-webkit-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
}
.logo-image.logo-light img.active{
opacity:1;
}
This is the result - i want second logo to be first one which is by default first but now appears as second one when transitioned. Also the logo does not completely disappear, first time doing transitions so for sure my mistake somewhere.
Look - http://www.plaforma.me/studio/
Solution - Reversed opacity in order and added background-color to be black so it does not be transparent.
It might easier to just rethink your HTML Markup and use CSS to do it. All you would need to do is toggle a class.
var logo = document.querySelector('div.bar')
window.setInterval(()=>{
logo.classList.toggle('other')
}, 5000)
div.bar > span.logo
{
display: inline-block;
width:100px;
height:100px;
}
div.bar > span.logo1 {
background-image: url(http://placekitten.com/100/100);
}
div.bar > span.logo2 {
position: realtive;
margin-left: -105px;
background-image: url(http://placekitten.com/g/100/100);
opacity: 0;
transition: opacity 3s ease-out;
}
div.bar.other span.logo2 {
opacity: 1;
transition: opacity 3s ease-out;
}
<div class="bar">
<span class="logo logo1"></span>
<span class="logo logo2"></span>
<span>Hello there!</span>
</div>
Did you try using jquery's .fadeIn yet?
I've made up some code.
Not sure if this works but i'll be worth a try
Hope this works,
Ramon
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('.logo-image.logo-light img').fadeIn(0);
}

Javascript/jquery, why does my fadein/fadeout not work?

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?
You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle
Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});

Fading in page on load

I am trying to use j-query to fade in my pages body upon load, however for some reason the body's background image is not being affected by the j-query. Please see the code I have below:
J-Query Code in head section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>
CSS Code:
body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}
Everything contained within the body (div's / paragraphs / headings etc) fade in on load as per the j-query code, however the body's background image (body.png) loads instantly with the page. Please can anyone suggest what I'm doing wrong with the above code?
body behaves funny. You would need to wrap the contents of the entire page in another div and fade that in.
<body>
<div id="wrapper">
# Page Contents #
</div>
</body>
CSS:
#wrapper{
background-image:url('some-image.jpg');
display:none;
}
jQuery:
$(document).ready(function(){
$('#wrapper').fadeIn();
});
See this JSFiddle.
Like the #ITFarmer wait, you can do it in CSS3, but you could probably also animate the background-image with CSS3 too.
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeinbg {
from {
background-image: none;
}
to {
background:url('body.png') no-repeat;
}
}
.container {
animation: fadein 2s;
}
.body {
animation: fadeinbg 2s;
I'm not sure if it would also affect the background image, but you could do the fade-in effect also without jQuery. At least in browsers which support CSS3:
#keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
.someElement{
animation: fadein 2s;
}

Categories

Resources