I'm trying to change the opacity of a DIV based on how much is visible (height-wise) in the window. For example if 50% of the DIV is visible in the window then the opacity should be .5
Here is what I've got, I know it's amateur and not optimal code. It's my math that is the problem. When the DIV is roughly 50% on the screen, with my calculations it comes out to around 80%
$(window).scroll(function () {
var block = $('.block')
var blockHeight = block.outerHeight();
var bottom_of_block = block.offset().top + blockHeight;
var blockOpacity = 0;
if (bottom_of_block < ($(window).height() + $(window).scrollTop())) {
// Sets opacity to 1 if div is completely on screen
blockOpacity = 1;
} else {
// This is the math that I cant figure out completely
blockOpacity = ($(window).height() + $(window).scrollTop()) / (bottom_of_block);
}
block.css('opacity', blockOpacity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 500px"></div>
<div class="block" style="background: blue;height: 220px;width: 220px;"></div>
I think you need to calculate blockOpacity like this:
blockOpacity = ($(window).height() + $(window).scrollTop() - block.offset().top) / blockHeight;
Related
Got a strange issue, my tag has a greater width than my monitor, which it shouldn't. I have some JavaScript which gets the scroll offset and adjusts my background, to give it a parallax effect, but as you can see, once the background gets given an 100% width, it snaps and stretches out. You can see this by zooming out of the page, the background is larger.
Here is the website
Any idea what is going wrong with it? Here is my JavaScript, and view the CSS by inspecting the element. It has also gone a bit slow as well to be honest, was working nice and smooth.
var ismobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
if (!ismobile){
window.onresize = function(event) {
//Detect window size and make new padding
if (window.innerWidth > 835) {
var newPadding = parseInt(window.innerHeight)/2.8;
newPadding = newPadding.toFixed(0);
var limitPadding = 221;
//Apply new padding value to header
if (newPadding > limitPadding) {
doc("header").style.padding = newPadding + "px 0px";
}
}
}
window.onscroll = function() {
var speed = 0.7;
var newPos = "100% " + (window.pageYOffset * speed) + "px";
document.body.style.backgroundPosition = newPos;
}
}
Add the overflow property to your body tag...
body {overflow-X: hidden;}
I have 2 full height divs. When you scroll down the page the one div scrolls up and the other scrolls in an opposite direction. This works great.
I'm trying to keep this effect but put normal full width content underneath it whilst trying to maintain natural scrolling. So I'd like to keep the alternate scrolling effect but when I get to the bottom of the last div that uses this effect I would like to continue scrolling normally to see normal content underneath it.
Here's my jsFiddle, currently its floating over the effect I refer to: http://jsfiddle.net/u9apC/116/ and the JS is pasted below for reference:
(function ($) {
var top = 0;
$(document).ready(function () {
var contentHeight = $('.right').height(),
contents = $('.right > .content').length;
top = (0 - (contentHeight * (contents - 1)));
$('.right').css('top', top + 'px');
});
$(window).resize(function () {
var contentHeight = $('.right').height(),
contents = $('.right > .content').length;
top = (0 - (contentHeight * (contents - 1)));
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
});
$(window).scroll(function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
});
})(jQuery);
EDIT
Here's a illustration of what I want:
I hope this is what you're after - it's a little hard to visualise from the description.
There are a couple of tricks to get this working:
Reverse the scroll direction when the right col top goes positive
Ensure the .row div has a top margin sufficient to push it down to the bottom of the left col.
(function ($) {
var top = 0;
var contentHeight = 0;
$(document).ready(function () {
calcContentHeight();
});
$(window).resize(function () {
calcContentHeight();
});
$(window).scroll(function () {
setRightTop();
});
function calcContentHeight() {
var contents = $('.right > .content').length - 1;
contentHeight = $('.right').height() * contents;
top = 0 - contentHeight;
setRightTop();
}
function setRightTop() {
var rightTop = top + $(window).scrollTop();
//1. don't allow right col top to go positive
if(rightTop > 0) rightTop = 0 - rightTop;
$('.right').css('top', rightTop + 'px');
//2. Ensure .row has sufficient top margin
$('.row').css('margin-top', contentHeight + 'px');
}
})(jQuery);
See updated JSFiddle here: http://jsfiddle.net/u9apC/126/
I've also refactored your code a little to reduce duplication.
You just need to make height of the div.body equal to total height of elements within it. Either by js or css.
Working with this existing codepen (http://codepen.io/anon/pen/fDqdJ). I want to add another statement whereby at a certain distance from the top of the page, an already animated div then changes in scale whilst moving.
Really struggling with the syntax and to increment the scale of the animated div on the scroll. I'm guessing that I will need to use css transform, but need some help!
Please see below for js example:
var $window = $(window);
var $box = $("#box");
$window.scroll(function() {
var scrollTop = $window.scrollTop();
console.log(scrollTop);
if (scrollTop >= 250 && scrollTop < 400) {
$box.css({top: -250 + scrollTop});
} else if(scrollTop >= 400 && scrollTop < 460) {
$box.css({left: (10+(scrollTop-400)/2)+"%"})
} else if(scrollTop >= 460 && scrollTop < 580) {
$box.css({top: (50+(scrollTop-460)/2)+"%"})
} else if(scrollTop >= 580 && scrollTop < 620) {
$box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')');
}
});
Here is the html structure -
<div class="wrapper">
<div class="row" id="row1">
</div>
<div class="row" id="row2">
<div id="box"></div>
</div>
<div class="row" id="row3">
</div>
<div class="row" id="row4">
</div>
</div>
Any help much appreciated! :)
J
The problem with this code:
$box.css({transform:scale(1.1)})
...is that the value is incorrect. The value to set for the CSS property should be a string. As it is currently, the code is trying to call a scale function in your JavaScript, which probably doesn't exist. If you want to use the CSS function scale, replace the code with this:
$box.css({transform: 'scale(1.1)'});
Or more simply:
$box.css('transform', 'scale(1.1)');
...then you'll change the CSS scale. You're probably also wanting to use a dynamic value for the scale CSS function. Doing that will be a matter of making the string dynamic:
$box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')');
This whateverTheScaleShouldBe will be whatever your calculation is; it's not clear from your question how you want the scale to change as you scroll. If you wanted the scale to linearly grow by 0.1 per 100px, as an example, you could do this:
scaleAmt = 1.0 + (scrollTop / 100);
$box.css('transform', 'scale(' + scaleAmt + ')');
I'm working on a pen to move the body through the viewport and simulate pages outside of the window.
I have written a script that will detect the "right" css declaration and add or subtract 100% to simulate the viewport moving around the content. I would like to do this with the top using
var = vertical.
I'm not very good at Javascript, so please let me know if there are easier ways to work through my variables. After realizing that .css pulls a string, I had to use parseInt.
$('.right.arrow-link').click(function () {
var vertical = parseInt($('body').css('top'), 10);
var horizontal = parseInt($('body').css('right'), 10);
var newhorizontal = horizontal + 100;
var newhorizontal = newhorizontal.toString() + '%';
$('body').css('right', newhorizontal);
});
$('.left.arrow-link').click(function () {
var horizontal = parseInt($('body').css('right'), 10);
alert(horizontal);
var newhorizontal = horizontal - 100;
var newhorizontal = newhorizontal.toString() + '%';
$('body').css('right', newhorizontal);
});
Edit it Here:
Use CSS transitions, and just track horizontal and vertical numbers per click. You need the CSS transition on the .wrapper to make it all animate nicely.
.wrapper {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
However, you're redeclaring your vertical and horizontal variables on every click, which resets them, and will make it impossible to add more boxes and grids to the left and right of subsequent pages. This is causing stuff to fly around. [EDIT: added up and down as well] Try this:
$(document).ready(function() {
var vertical = 0;
var horizontal = 0;
$('.right.arrow-link').click(function(){
horizontal -= 100;
$('body').css('left', horizontal + '%');
});
$('.left.arrow-link').click(function(){
horizontal += 100;
$('body').css('left', horizontal + '%');
});
$('.up.arrow-link').click(function() {
vertical -=100;
$('body').css('top', vertical + '%');
});
$('.down.arrow-link').click(function() {
vertical +=100;
$('body').css('top', vertical + '%');
});
});
The .wrapper style with the transitions assumes that all of your extra pages will use that class. This will set up the CSS transition animation for all of them in one fell swoop.
Also, please note that in your CSS you've only specified -webkit-transform in a couple places, which makes this break in FireFox. You can fix that by just adding the transform version as well.
http://codepen.io/anon/pen/nsJDr
On you left arrow click, you don't want it to move 100% of the width of the screen, you just want it to move back to the start of the page. If there is going to be multiple sections, you will have to adjust this to move the width of the section your moving from though:
$('.left.arrow-link').click(function() {
var horizontal = parseInt($('body').css('right'), 10);
var newhorizontal = 0;
newhorizontal = newhorizontal.toString() + '%';
$('body').css('right', newhorizontal);
});
Here is a solution that keeps track of the wrapper and moves it the width of the current wrapper:
$(document).ready(function() {
var currentWrapper = 1;
$('.right.arrow-link').click(function() {
var vertical = parseInt($('body').css('top'), 10);
var horizontal = parseInt($('body').css('right'), 10);
var newhorizontal = horizontal + 100;
newhorizontal = newhorizontal.toString() + '%';
$('body').css('right', newhorizontal);
currentWrapper++;
});
$('.left.arrow-link').click(function() {
var horizontal = parseInt($('body').css('right'), 10);
var newhorizontal = horizontal - $(".wrapper.page-" + currentWrapper).width;
newhorizontal = newhorizontal.toString() + '%';
$('body').css('right', newhorizontal);
if(currentWrapper > 1)
currentWrapper--
});
});
I'm trying to do the inverse of this fiddle, make a square with a width based on an a 100% based height.
http://jsfiddle.net/j372H/6/
<html style="height:100%">
<body style="height:100%">
<div id="square" style="background-color:black"></div>
</body>
</html>
$(window).ready(updateWidth);
$(window).resize(updateWidth);
function updateWidth()
{
var square = $('#square');
var size = square.width();
square.css('height',size);
}
Thank a lot for your help.
Seb.
In CSS set the height of the div also
<style>
html,body,#square { height:100%; }
</style>
then the reverse for your js function
function updateWidth()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
Demo courtesy of wared - jsfiddle.net/wared/spSLP - - nice one, wared
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
NOTE - This needs the square div to have a height in the first place - height does not behave the same as width - just a heads up!
Using a simple math equation in the variable you can set a square div that re-sizes automatically.
change the 100 after * to give you a % width for your div.
see working jsfiddle for responsive width
$(document).ready(function() {
var height = ( $(window).height() / 100) * 100 ;
$('#square').width(height);
$('#square').height(height);
});
$(window).resize(function(){
var height = ( $(window).height() / 100) * 100 ;
$('#square').width(height);
$('#square').height(height);
});