I want to create the same animation when scrolling, like here but using pure no 3rd library JQuery: https://codepen.io/aPenHasNoName/pen/bGEoYym
Well, I have achieved that, however it scrolls like 4 times while I am going to the next section. Here is my code:
function scrollBanner() {
$(window).on('scroll', function () {
var scroll = $(window).scrollTop();
$('.intro-home-section').css({
transform: `rotateX(${(scroll)}deg)`
})
});
}
scrollBanner();
And I want it to be scrolled only once, while I go from $('.intro-home-section') to the next section. What is my problem?
Related
I'm trying to make some buttons work here.
http://www.sepulturaimpex.ro/portofoliu is the website.
When i click left/right buttons i'd like to move from project to project exactly
The images are random width.
How can i achieve that?
Here is the script i'm using.
$(document).ready(function () {
$(".prev").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "-=700"
})
}), $(".next").click(function () {
$(".p_horizontal_wrap").animate({
scrollLeft: "+=700"
})
})
}),
The answer is in your question; if the images are random width, then you cannot scroll w/ a fixed width
I think your best bet is to look ahead and find the x position of the next object, then scroll to that. Depending on your markup, you may need to keep track of the object index you're scrolling into view.
Your next button (and your next/prev could be the same) would look like this:
$(".next").click(function() {
var targ = /** find out the next item to be shown **/
var left = $(targ).position().left;
$(".p_horizontal_wrap").animate({
scrollLeft: left
});
});
I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.
Normally I could do something like this:
jQuery(window).scroll(function() {
jQuery('.arrow').css("display", "none");
});
However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.
Is there a way to hide the animation that is not based on scrolling detection?
http://codepen.io/sol_b/pen/ORGKbP
Thanks.
EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.
You can do the following in your jquery.
jQuery(window).scroll(function() {
document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});
This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function
$.fn.scrollStopped = function(callback) {
var that = this, $this = $(that);
$this.scroll(function(ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
});
};
And then on scroll stop you can start the animation again.
$(window).scrollStopped(function(ev){
document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});
If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...
I was able to fix this by replacing 'window' with my content wrapper. Like this:
jQuery('#wrapper').scroll(function() {
jQuery('.arrow').css("display", "none");
});
I have a form that is sticky on every page, and I need it to stop being sticky when it reaches the top of the footer. I have this working properly, but I need it to become sticky again when scrolling back up the page. Anything glaringly wrong?
$(window).scroll(function(){
var footerTopPos = $('#footer-wrapper').offset().top;
var navBottomPos = $('#footer-form-wrapper').offset().top;
if(navBottomPos >= footerTopPos) {
$('#footer-form-wrapper').addClass('sticky');
} else {
$('#footer-form-wrapper').removeClass('sticky');
}
});
To clarify, the first part works perfectly. The css changes from "fixed" to "absolute" and the form stays in place. The problem is, I want it to revert back to "fixed" when you start scrolling back up the page (my else statement). This part does nothing at all.
Here is a rough jsfiddle to show the issue http://jsfiddle.net/L693f5bg/14/
--Edit--
To keep what you have started with the same and not use any other plugins you have to make sure you are declaring the variable outside the scroll function so that it doesn't get changed every time you scroll and change its position.
$(function () {
var footerTopPos = $('#footer-form-wrapper').offset().top;
$(window).scroll(function () {
var windowTopPos = $(window).scrollTop();
if (windowTopPos >= footerTopPos) {
$('#footer-form-wrapper').css('position', 'absolute');
$('#footer-form-wrapper').css('top', '0');
} else {
$('#footer-form-wrapper').css('position', 'fixed');
$('#footer-form-wrapper').css('bottom', '0');
$('#footer-form-wrapper').css('top', 'auto');
}
});
});
Updated your JSFiddle
Personally I recommend using Waypoints.js and the sticky elements plugin. It does everything and it's super clean and easy to implement. include the jquery.waypoints.js and the sticky plugin then initialize using:
var sticky = new Waypoint.Sticky({
element: $('#footer-wrapper')[0],
offset: '90%',
stuckClass: 'unstuck'
});
I updated the JSFiddle using the Waypoints.js plugin
I'm using jquery on a single page web site to slide the next "page" onto the screen when the user clicks a button. I would like the current page to slide out to the left as the new page slides in from the right, so that there is no empty space shown, but currently I am only able to get the current page to disappear as the next page slides in. The code I'm using is here: http://jsfiddle.net/xoa029jz/5/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
$(nextPage).css('display', 'block');
$(currentPage).animate({left: '-100%'});
$(currentPage).removeClass('current-page');
$(nextPage).addClass('current-page');
$(nextPage).animate({left: '0%'});
}
Your CSS transitions are fighting with the jQuery animation. Until I hear which you prefer I have turned off the CSS transition.
The other fixes are to set the initial position of the elements about to animate and to wait for the panel to leave completely before removing the current-page class.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/xoa029jz/8/
function slideToNext() {
var currentPage = $('.current-page');
var nextPage = getNextPage(currentPage.attr('id'));
currentPage.css('left', '0%').animate({
left: '-100%'
}, function () {
currentPage.removeClass('current-page');
});
nextPage.css({'display': 'block', 'left': '100%'}).addClass('current-page').animate({
left: '0%'
});
}
I also cleaned up a few redundant items (chained selectors etc).
You are better off just using jQuery animation, initially while you get it working, then adding a plugin (like velocity.js) to make the animations use CSS transitions, rather than try to mix the two.
Here is the fiddle I'm working with: http://jsfiddle.net/fz5Yk/5/
As you can see, it has a one-page scrolling navigation. I want to achieve a highlighting effect (preferably using .animate function) to the headings in <strong> </strong> tags when scrolling to a section. Just scroll the page manually and you will see a highlighting in the navigation menu; item of the scrolled section, but I can't quite resolve the js codes in order to apply the same to the headings, and an intervention in it with .animate function seems much more difficult to me. Can you help me?
The plugin-page seems well-documented; https://github.com/davist11/jQuery-One-Page-Nav.
Just put an animation on the location you scroll to inside the end: definition;
$('#nav').onePageNav({
end: function() {
//I get fired when the animation is ending
}
});
Test update
$(window).scroll(function() {
var visible_start = window.pageYOffset;
var window_height = window.innerHeight;
var section3_height = $('#section-3').height();
var section3_start = $('#section-3')[0].offsetTop;
if ((visible_start - window_height >= section3_start) &&
$('#section-3').css('background-color', 'yellow');
}
});