Im using scrolling-nav-js Scrolling nav to animate padding and fix my navbar to the top of my page and i want to give the navbar a subtle opacity animation. How can i add the transition to change the opacity property?
I have the following code in the JS and the CSS files:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
Nevermind :) adding this is perfect.
transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;
and
.top-nav-collapse {
padding: 0;
opacity: 0.6;
Related
hi i was doing a search about how to make my navbar fadeIn while scrolling down and fadeOut while scrolling Up and found nice topic helped me alot
Fading bootstrap navbar on scrolldown, while changing text color
also http://jsfiddle.net/f5UTL/
the problem is it's not fading in or out while scrolling its just appear and disappear no dynamic animation it's even moving my page while this process it is appreciated if some one told me where was my mistake at
< script >
$(function () {
var header = $('.opaque');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn();
} else {
header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque');
}
});
});
< /script>
.navbar-fixed-top {
background-color: rgba(128,128,128,1);
transition: background-color all 2s;
-webkit-transition: background-color all 2s;
-moz-transition: background-color all 2s;
-o-transition: background-color all 2s;
}
.navbar-fixed-top .opaque {
background-color: rgba(128,128,128,0);
transition: background-color all 2s ;
-webkit-transition: background-color all 2s ;
-moz-transition: background-color all 2s ;
-o-transition: background-color all 2s ;
}
here is the simplified version of what you want to achieve .
$(function() {
//caches a jQuery object containing the header element
var header = $('#nav');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= header.height()) {
header.fadeOut();
} else {
header.fadeIn();
}
});
});
Hope it will help you to continue.
updated fiddle.
I dont get the fade of the background picture to work in Firefox but any other Browser. Help is appreciated!
Just click on the image.
$(document).ready(function(){
$(".click_me").click(function(){
$('.click_me').css('background-image', 'url(https://placekitten.com/500/500)');
});
});
.click_me {
height:500px;
width:500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
-webkit-transition: background-image 700ms linear;
-moz-transition: background-image 700ms linear;
-o-transition: background-image 700ms linear;
-ms-transition: background-image 700ms linear;
transition: background-image 700ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>
Since you are using jQuery already why don't use its animate function instead of CSS transitions, this will do the trick for you very easily.
$(document).ready(function() {
$(".click_me").one('click', function() {
$(this).animate({
opacity: 0
}, 'fast', function() {
$(this)
.css({
'background-image': 'url(https://placekitten.com/500/500)'
})
.animate({
opacity: 1
});
});
});
});
.click_me {
height: 500px;
width: 500px;
opacity: 1.0;
background-image: url(http://placekitten.com/g/500/500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_me"></div>
When I scroll and the anchor touches the top of the window, the background color of the box is supposed to change but I can't seem to get it to work properly.
https://jsfiddle.net/6p2pnnq4/1/
var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".footer_wrap").addClass("topper");
} else {
$(this).find(".footer_wrap").removeClass("topper");
}
};
$(window).scroll(scrollFn);
You don't need the
$(this).find
It is useless, try the following:
var targetOffset = $('#footer_wrap').offset().top,
$window = $(window);
$(window).on( 'scroll', function(){
if ( $window.scrollTop() >= targetOffset ) {
$("#footer_wrap").addClass("topper");
}else{
$("#footer_wrap").removeClass("topper");
}
});
And The CSS
#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#footer_wrap.topper {
background-color: #000;
}
Then when #footer_wrap is at the top it will change the background.
Check out the Fiddle
When I load the page, the div is at the top of the screen, but when I start the scroll, it jumps to where it is supposed to be.
Check out the website here:
calretirement.com/classes-test.php
CSS:
.register{position:fixed !important; bottom:120px !important; width: 340.453px;
margin-top: 29px;
}
#stickyForm2015 {-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
jQuery:
<script>
$(window).scroll(function(){
if
($(window).scrollTop() > 670){
$("#stickyForm2015").addClass("register");
}
else
{
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
<script>
$(window).on("scroll", function(){
if
($(window).scrollTop() > 2500){
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
Open to suggestions!! Need help!
If you want to animate scroll with jquery you can just do:
$('html, body').animate({scrollTop: '0'}, 400);
If you want to animate with css you need to animate from something to something, your classes don't appear to be doing that.
.original-class{
position: relative;
top: 500px;
transition: top .4s ease-in-out; //only necessary if you plan on animating back
}
.animate-original-class{
top: 0;
transition: top .4s ease-in-out;
}
I have an element that I want to move and the, half way through the move, start fading out. By the time the move is complete, it has 0 opacity. I am using the transit library to make these animations smoother. Opacity on its own works. Move on its own works, but the 2 do not play nice together. where am i going wrong?
$(function() {
$("#go").click(
function(){
$("#block").transition({y:'90px', queue:false}, 2000);
$("#block").transition({ x: '90px',queue:false }, 2000 );
$("#block").transition({ opacity: 0 ,queue:false , delay:1000 }, 1000 );
});
});
fiddle: http://jsfiddle.net/bastiat/5844Q/
I would consider using CSS transitions and just triggering them with jquery: JS Fiddle
CSS
div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
x:50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
margin-left: 0px;
}
JQuery
$("#go").click(function () {
$("#block").css('margin-left', '90px').css('opacity', '0');
});
JQuery (if you want the opacity to fade after it moves over): JS Fiddle
$("#go").click(function () {
$("#block").css('margin-left', '90px')
.delay(800)
.queue(function (next) {
$(this).css('opacity', '0');
next();
});
});
To actually use the transit plugin to solve this problem, you need to add them to the same transition() call.
$(function() {
$("#go").click(
function(){
$("#block").transition({ x: '90px', opacity: 0, queue:false }, 2000 );
//$("#block").transition({ opacity: 0 ,queue:false , delay:1000 }, 1000 );
});
});
Working fiddle: http://jsfiddle.net/qngmwmo2/