I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html
$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}
Related
var totalHeight = 0;
$(".scroll-section").each(function(){
totalHeight += $(this).height();
});
$(".site-content").scroll(function() {
var scrollTop = $(".site-content").scrollTop();
var movePos = (scrollTop / totalHeight) * 100;
movePos = movePos + 100;
console.log(movePos);
$(".page-fixed").css("background-size", `${movePos}% 100%`)
});
I tried margin, does not work
Doing this for webflow so yeah... Would need to get it webflow compatible as well
This is my first project related with Parallax effects. I have tried to implement parallax libraries but they are not working properly on mac safari, scrolling is not smooth. So i tried to implement custom code which i found on google and its working better than libraries but still scrolling is not smooth. Major scroll effect on mac safari.
Note:- Website is made in PHP, single page website with parallax and animations (wow.js) on page scroll. There are large content on the website, all are images implemented into "section" tags. So there are almost 10 different "section" tags on the page, contains approx. 10 images per "section" tag. Page size is more than 45 MB (with 2 videos playing of 22 MB in size).
Tried solution:- Before that all the images was in PNG format, then i had converted them to JPG format and compressed them also. All images are in higher resolution, out of them some are even 2500*1800. Four different parallax images on different "sections", one parallax image on one "section".
Current Parallax script i am using:-
var scrolled = $(window).scrollTop()
$('.parallax').each(function(index) {
var imageSrc = $(this).data('image-src')
var imageHeight = $(this).data('height')
$(this).css('background-image','url(' + imageSrc + ')')
$(this).css('height', imageHeight)
var initY = $(this).offset().top
var height = $(this).height()
var diff = scrolled - initY
var ratio = Math.round((diff / height) * 100)
$(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px')
})
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
$('.parallax').each(function(index, element) {
var initY = $(this).offset().top;
var height = $(this).height();
var endY = initY + $(this).height();
var visible = isInViewport(this);
if(visible) {
var diff = scrolled - initY;
var ratio = Math.round((diff / height) * 100);
$(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px');
}
});
});
function isInViewport(node) {
var rect = node.getBoundingClientRect();
return (
(rect.height > 0 || rect.width > 0) &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
Anyone, please help!
I made the scroll to top and scroll to bottom in jquery. In that i make to scroll as with percentage. For example:
If the scroll from top to bottom is 50% then it scroll from top to bottom as 50% it already works. But now i want to scroll the 50% if i again click then it scroll the remaining 50% to the bottom of the page. I am not sure how to do this in jquery.
Here is the fiddle Any suggestion would be great.
http://jsfiddle.net/TkYpY/
Thanks,
vicky
$('#spnTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if(scrollAmount > 0 )
{
scrollAmount = scrollAmount - (height * percentage);
}
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if( scrollAmount < height)
{
scrollAmount = scrollAmount + height * percentage;
}
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});
It does not scroll on the second click as you have already reached the scrollAmount.
If you want to scroll further then declare var scrollAmount outside the function and when you click again on the bottom link, calculate the next scroll Amount with max being your document height and add it to the global scrollAmount declared var.
$('#spnTop').on("click", function () {
var percentageToScroll = 80;
var percentage = percentageToScroll / 100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
scrollAmount = scrollAmount + height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});
I modified your fiddle a bit. Seems to me some calculation problem. Here is your fiddle .
Is this what you needed?
First declare a global variable height with default value.
In top scroll code, replace
var height = $(document).scrollTop();
with
height -= $(document).height() - $(window).height();
and in bottom scroll replace this var height = $(document).height() - $(window).height(); with height += $(document).height() - $(window).height(); .
I'm using jquery.parallax-1.1.3.js for a parallax effect. (site: http://ianlunn.co.uk/plugins/jquery-parallax/)
Problem: it works with css background-position. This works for background images but not for text in my html.
What I want: add some code to this js file that allows me to use the parallax effect on html text (H1, H2). I prefer with an ID. So a H1 would have a div around it with an ID that is connected with the parallax effect.
This is the js:
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
This is how to call the js from html:
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#third').parallax("50%", 0.5);
})
</script>
You give a div an ID. You give this Div a background-image. You connect the ID to the parallax effect above. I want to do the same, but then with an H1.
I want to implement a floating image that would scroll up/down when the user scrolls the page.
I googled up a code that works awesome in a practice board, but when I insert it (just right before the end-body-tag as instructed) in my Wordpress footer.php, it just sits there and won't scroll as I scroll...
The code is as follows:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<img src="http://nailian.ca/wp-content/uploads/misc/coupon.png">
<!--END OF EDIT-->
</layer>
<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="fromtop"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
A link would be here : http://nailian.ca/
I think the css style position: fixed is what you need here.
Here's an example.