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");
});
Related
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?
I have a phonegap application that uses iOS native scrolling through -webkit-overflow-scrolling in a div. I want to be able to manually halt an ongoing scroll when the user clicks a button (to scroll back to the top of the page). Is this doable?
This is actually very possible when using fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.
After including fastclick and attaching it to the body element, my code to stop scrolling and go to the top looks like this:
scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.
Unfortunately this is not possible at the moment. The scroll event is triggered only when the scrolling has come to an end. As long as the momentum keeps moving the content no events are fired at all. You can see this in Figure 6-1 The panning gesture in Apple's "Safari Web Content Guide".
I also created a fiddle to demonstrate this behavior. The scrollTop value is set after iOS is done animating.
You can capture a touch event using 'touchstart' instead of 'click', as the click event sometimes doesn't seem to get fired until the momentum scroll completes. Try this jQuery solution:
$('#yourTrigger').on('touchstart', function () {
var $div = $('.yourScrollableDiv');
if ($div.scrollTop() === 0) {
return false; //if no scroll needed, do nothing.
}
$div.addClass('scrolling'); //apply the overflow:hidden style with a class
$div.animate({
scrollTop: 0
}, 600, function () {
$div.removeClass('scrolling'); //scrolling has finished, remove overflow:hidden
});
}
where the 'scrolling' class simply has the CSS property, overflow:hidden, which as #Patrick-Rudolph said, will halt any momentum scrolling in progress.
.scrolling {
overflow: hidden;
}
Note: It's best to use a callback function to tell when your scroll animation finishes, rather than setting a timer function.
See the effect in the photos in the article here:
http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation
Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?
It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above)
Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show!
This functionallity can be found in a jQuery plugin called "Before/After"
Link: jQuery BEFORE / AFTER
You could of course just write your own that isn't dependant on jQuery UI.
;(function($){
$.fn.slidingThingamajig = function () {
return this.each(function(){
var $this = $(this);
$this.find('.handle')
.css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
.on('mousedown', function(e) {
$this.addClass('resizable');
$this.parents().on('mousemove', function (e) {
$('.resizable').css({width:e.pageX - $('.resizable').offset().left});
}).on('mouseup', function(e) {
$('.resizable').removeClass('resizable');
});
e.preventDefault();
});
});
}
})(jQuery);
You would probably need to tweak this a little, but it's mostly all there.
I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot:
here is the link : http://www.soleilnoir.net/believein/
Any ideas how to achieve the similar effect?
Thanks
This effect is called parallax.
Here are some links related to this effect:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
You could achieve that through a combination of watching the scroll offset position and then animating different elements based on that scroll position. You would set an event listener and at certain positions fire functions to animate an element onto the page.
If using jQuery, something like this:
$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() {
var scrollPos = $(window).scrollTop();
switch (scrollPos) {
case (500):
doSomething();
break;
case (1000):
doSomethingElse();
break;
}
}
function() doSomething {
// use animate to animate element(s) at 500
}
function() doSomethingElse {
// use animate to animate element(s) at 1000
}
I'm sure that could be optimized better than that, but that should be enough to get started.
I have a little jQuery animation which fades in a link when hovering an :
$(function() {
$('.delete').hide();
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').fadeIn('fast');
}, function() {
$(this).parents('li').children('.delete').fadeOut('fast');
});
});
But if I quickly move my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?
Thanks, Eric
The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.
One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:
$(function() {
$('.delete').fadeTo(0, 0);
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
}, function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
});
});
Hope this solves your issue!