I'm trying to fade in an element based off when it first enters the viewport then have it equal 100% opacity by the time it hits the end of the viewport. I have working as far as reaching 100% opacity when it gets to the end. However, when it starts animating, it starts out at about 60% which I know is because I am basing it off the scroll position. So my question is how can I calculate the opacity starting at 0 once it enters the viewport?
This is what I have so far:
$('.left-cont').each(function() {
var $this = $(this),
leftPos = $this.offset().left,
fadeStart = leftPos - winWidth,
fadeUntil = leftPos,
opacity;
console.log( winWidth - (leftPos - scrollPos));
console.log(fadeStart);
if( scrollPos <= fadeStart ) {
opacity = 0;
}
else {
opacity = scrollPos/fadeUntil;
}
$this.css({
'opacity': opacity
});
});
I can provide more context if needed. Any help is appreciated.
1) Is this jQuery function only executed once or is it placed inside the onScroll-binded function?
$( window ).scroll(function() {
/* get scroll top and left values here */
$( ".box" ).each(function(){
/* do position check and css adjustments here */
});
});
2) The calculation for the opacity is:
(1 - ((box_offsetTop - scrollTop) / windowHeight))
3) I made a working example here for scrolling vertically: http://jsfiddle.net/0mks8eut/1/
You can change it to calculate opacity based on horizontal scrolling by (un)commenting the other calculation inside the function.
! Make sure that there is enough content (or padding/margin) after/next to the object. Otherwise it will never reach opacity:1 (e.g. the top/left of the screen).
Related
I'm using the following pen by Bramus to animate(FadeInUp) divs when entering the viewport. However currently the div only starts fading in when the div is completely in the viewport. What I need is the flexibility to start the animation when a div is a certain pixels inside the viewport. For example it will start the animation FadeInUp when the div is 100 pixels in the viewport. How can I do this with the current code/pen I'm using (see code below)?
Is this also possible with percentages? F.e. when a div is 20% in viewport the animation starts?
Thanks.
jQuery(function($) {
// Function which adds the 'animated' class to any '.animatable' in view
var doAnimations = function() {
// Calc current offset and get all animatables
var offset = $(window).scrollTop() + $(window).height(),
$animatables = $('.animatable');
// Check all animatables and animate them if necessary
$animatables.each(function(i) {
var $animatable = $(this);
if (($animatable.offset().top + $animatable.height() - 20) < offset) {
$animatable.removeClass('animatable').addClass('animated');
}
});
};
// Hook doAnimations on scroll, and trigger a scroll
$(window).on('scroll', doAnimations);
$(window).trigger('scroll');
});
Offsetting is already foreseen in the code. Tweak the value of 20 in this line:
if (($animatable.offset().top + $animatable.height() - 20) < offset) {
You might also need to change the - sign to a + to suit your needs.
I'm trying to get an overlay div's opacity to fade to black as you approach a targeted element in the middle of the page, and then fade back to transparent after that element exits the viewport.
(Broken) Example: https://jsfiddle.net/dtcgbxcn/3/
As you approach the 'blue' section, it should get darker. The page should be solid black before the blue section enters the viewport. Then, after the blue section exits the viewport, it begins to gradually fade out the opacity. By the time you reach the bottom of the page (or another targeted element), the overlay should be fully transparent again.
Note that, due to responsiveness, the height of any of these sections is indeterminate.
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
offset = $('.blue').offset().top - $('.blue').height(),
opacity = st / offset;
_docHeight = $('.red').height() + $('.blue').height() + $('.yellow').height();
$('.overlay').height(_docHeight);
if (opacity > 2) {
opacity = 3 - opacity;
}
$('.overlay').css('opacity', opacity);
});
I have fiddled around with your example, Hopefully this is what you were looking for as far as functionality. It should be 100 opacity right before the blue appears, and 100% clear as the blue comes off the screen. I would prob warp this whole thing in a closure, and cache the selectors so you don't have to call $() every time, but other than that - this should work.
Your fiddle was a little different than your example above - but let me know if this is what you are looking for.
https://jsfiddle.net/gmydzzmf/1/
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
win_height = $(window).height(),
offset = $('.two').offset().top - $('.two').height() - ( win_height / 2),
_docHeight = $('.one').height() + $('.two').height();
if (st<offset ){
// fading in
opacity = st/offset;
} else {
// fading out
opacity = ((_docHeight - st)/(win_height*2));
}
$('.overlay').height(_docHeight); //move this to resize event
$('.overlay').css('opacity', opacity);
});
I'm making a navigation bar which becomes visible slowly as the user scrolls through it in larger screens.
I don't want the opacity to become completely
I want the navigation bar to be a little transparent atleast and the font within it to have opacity value 1.
How can I do it? This below code makes the opacity of the navigation bar completely 1 on scroll action.
$(window).resize(function() {
if ($(window).width() < 480) {
$('.navbar').removeClass("navbar-fixed-top");
$('.navbar').css('opacity', 1)
} else {
$('.navbar').css('opacity', 0)
}
});
$(document).on('scroll', function(e) {
if ($(window).width() > 480)
$('.navbar').css('opacity', ($(document).scrollTop() / 900));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
if you want just background little bit transparent then use background-color: rgba(); .. it will give opacity to background only. otherwise giving opacity to whole wrapper will apply on children too weather you give opacity to children 1.
I am coding my page so that the content fades in and out as you scroll.
when you scroll away from the "trilogy" section, then scroll back up, it is not 100% opacity when at the top again.
Also the content fades out half way the trilogy section, then fades back in again. I need the content when at the top (minus the green header area) to be 100% opacity when in view.
Code:
$(document).ready(function() {
$(window).bind('scroll', function(e) {
setParalaxContent();
});
function setParalaxContent() {
var trilogy = {
scrollTop: $(window).scrollTop(),
windowHeight: $(window).height(),
contentTop: $('.trilogy2').position().top,
contentHeight:2200
};
// determine scrollTop's bounds where content enters & exits the window
trilogy.lowerBound = trilogy.contentTop - trilogy.windowHeight;
trilogy.upperBound = trilogy.contentTop + trilogy.contentHeight;
// determine scrollTop's position percentage (x2) in relation to bounds
trilogy.percent = (trilogy.scrollTop - trilogy.lowerBound) / (trilogy.upperBound - trilogy.lowerBound) * 2;
}
$('.trilogy2').animate({
opacity: 1 - Math.abs(trilogy.percent - 1)
}, 1);
Please see full code at:
http://jsfiddle.net/warrior_76/pnr4fdyg/
I'm trying to change the opacity value of a div block on scroll.
$(window).scroll(function(e) {
var s = $(window).scrollTop(),
opacityVal = (s / 200.0);
$('.blur').css('opacity', opacityVal);
});
If the div block is somewhere in the middle of the page.By the time I reach the div block the opacity value changes . How do I start $(window).scroll() to work when I reach the div block?
Include the div element scrollTop and window height in your calculations. This will begin your opacity animations when the div is at the bottom of the visible window area. I've also added a 'clamp' function to keep it in 0-1 range.
$(window).scroll(function(e) {
var s = $(window).scrollTop() - $('.blur').scrollTop() - $(window).height(),
opacityVal = Math.max(0, Math.min(1, s/400));
$('.blur').css('opacity', opacityVal);
});
See: http://jsfiddle.net/AGcYH/