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 + ')');
Related
Suppose I have 5 divs with 100vh height each in a container.
<div class="mycontainer" >
<div id="diview0" class="diview">0</div>
<div id="diview1" class="diview">1</div>
<div id="diview2" class="diview">2</div>
<div id="diview3" class="diview">3</div>
<div id="diview4" class="diview">4</div>
<div id="diview5" class="diview">5</div>
<div id="diview6" class="diview">6</div>
<div id="diview7" class="diview">7</div>
<div id="diview8" class="diview">8</div>
<div id="diview9" class="diview">9</div>
</div>
I scroll in that container but what happens is if a scroll up then it scrolls the div too much.
What I want is that it scroll a limited portion only.
For ex: if I scroll down 100px then it's good but on more than that(like 200 or 300) it should only scroll down 110px
same goes for scrolling up if I scroll up 100px then it's good but on more than that(like 200 or 300) it should only scroll up 110px.
Requirement is only of JavaScript. No jQuery or any other external library can be used.
How can I do it?
This is a way of doing it:
let maxS = 110;
let t = 2;
function isScrollable(x) {
let y = (Boolean(x))?"auto":"hidden";
document.documentElement.style.setProperty("overflow", y);
}
function timeoutScroll() {
let a = window.pageYOffset;
const temp = setInterval(function() {
if (window.pageYOffset >= a + maxS || window.pageYOffset <= a - maxS) {isScrollable(false)}},
100)
setTimeout(function() {isScrollable(true); clearInterval(temp)}, t*1000);
}
And the timeoutScroll function would stop scrolling the page for t seconds for more than maxS pixels
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;
I am implementing my own horizontal scrolling with controls (left/right)
How can I find how much scrolling I got to the right?
My code is as follows:
$scope.scrollFilters = function(dir) {
var leftPos = $('.filters').scrollLeft();
var containerWidth = $('.filters').width();
var scrollTo = 0;
if (dir == 'right') {
scrollTo = leftPos + scrolled >= containerWidth ? containerWidth : leftPos + scrolled;
} else {
scrollTo = leftPos - scrolled <= 0 ? 0 : leftPos - scrolled;
}
$('.filters').animate({
scrollLeft: scrollTo
});
};
What I'm interested in is getting the actual $('.filters').width(). At the moment it would just return the width I set up in the CSS, I want to get the actual width if I wouldn't limit the div in width.
P.S. its an AngularJS application, but don't think it does me any good this time.
Thanks for the help!
you should try and grab its max width
var theWidth = Math.max.apply(null, $(".filters").map(function() {
return $(this).outerWidth(true);
}).get());
If there is scroll, it means that an inner element is bigger than an outer element, so you should calculate the difference between the inner width (bigger) and the outer width (smaller) or their heights.
This may help you as you have to apply the same concept: How to get maximum document scrolltop value
I'm using this function:
$(window).bind('load resize scroll',function(e) {
var y = $(window).scrollTop();
$('.tm-parallax').filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '50% ' + parseInt(-y / 50) + 'px');
});
to achieve parallax effect on background images when scrolling down.
I would like to limit y position to certain value (for example 100px), so background image center stays visible after reaching this value.
Here is the code: http://jsfiddle.net/esedic/vw2n16r8/4/
Because bakcground images are quite large it's best seen on fullscreen: https://jsfiddle.net/esedic/vw2n16r8/4/embedded/result/
Because I'm using parallax background images on multiple elements, I'm looking for solution to set different values for each element (maybe using data attributes?).
Thanks for your help!
You should try reversing its polarity, but try this:
$(window).bind('load resize scroll',function(e) {
var y = $(window).scrollTop();
$('.tm-parallax').filter(function() {
if have return $(this).onset().top < (y + $(window).height()) &&
$(this).onset().top + $(this).height() > y;
}).css('background-position', '50% ' + parseInt(-y / 50) + 'px');
});
So, I have a div which I'm trying to keep 100px from the top of the page between to points of the page whilst scrolling. At the moment, my code works-ish but the div is not kept at exactly 100px from the top, instead altering between 0px - 200px
here's what I'm using atm:
$(window).scroll(function(){
var tpxl = $(window).scrollTop();
if( tpxl<100) {
$('#div').css('top',-Math.abs(tpxl)+100 + 'px');
}
else if(tpxl>700) {
$('#div').css('top',-Math.abs(tpxl)+800 + 'px');
}
});
You don't need Math.abs() because tpxl will always be a positive number. To set the position of the div to be 100px from the current top of the window, use $(window).scrollTop() + 100 + 'px'.
I don't really understand why you have the if / else if structure. The following would keep the div fixed at 100px all the time:
$(window).scroll(function () {
$('#div').css('top', $(window).scrollTop() + 100 + 'px');
}).scroll();
Demo: http://jsfiddle.net/G5BVU/
To only set the position "fixed" when the scroll point is less than 100 or more than 700 like for your original code try this:
$(window).scroll(function () {
var tpxl = $(window).scrollTop();
if (tpxl < 100 || tpxl > 700) {
$('#div').css('top', tpxl + 100 + 'px');
}
}).scroll();
Demo: http://jsfiddle.net/G5BVU/1/
EDIT: To have the element scroll normally except when the window is scrolled between those two points just reverse the if condition from my previous example:
if (tpxl > 100 && tpxl < 700)
$('#div').css('top', tpxl + 100 + 'px');
http://jsfiddle.net/G5BVU/2/
In all cases provide an initial top setting as appropriate.