I have this site: http://362.a07.myftpupload.com/
The password is: aynhoe_park
I need to fix it so that the Revolution Sliders on each Section to only load when its scrolled onto. Can anyone suggest / give me some jQuery to force this to only start the sliders when the user is on the page with it. You will see that the site is a parallax and it has multiple sliders on the parallax.
I have tried this code below, from the people at Revolution Slider, which doesn't seem to work:
revapi5.on('revolution.slide.onloaded', function() {
// slider reaches top of screen
jQuery(this).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'up') {
jQuery(this).revresume();
}
// slider scolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return -jQuery(this).height();
// slider reaches bottom of screen
}}).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'down') {
jQuery(this).revresume();
}
// slider scrolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return jQuery(window).height();
}});
});
So If someone can help me out that would be great! As I would love just one bit of code not one for each slider to force it to run the slider only when it is in the screen, not before hand.
Thanks in advance.
Chris
The code is so far correct. Please make sure that you change the "revapi5" against to the correct references.
If i check your site, i see revapi1, revapi2, revapi25, revapi26, revapi3, revapi4, ...28, ...29. No revapi5 which would exactly declare why this not working for you. Changing your example above from revapi5 to revapi1 i.e. would start/stop the First slider on the page dependent on the scroll position.
In case you wish to drive all your sliders in the page, you will need to add for each one an individual script based on the example above, or a script which takes care of all sliders in one go like this:
jQuery('.rev_slider').each(function() {
jQuery(this).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'up') {
jQuery(this).revresume();
}
// slider scolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return -jQuery(this).height();
// slider reaches bottom of screen
}}).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'down') {
jQuery(this).revresume();
}
// slider scrolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return jQuery(window).height();
}});
});
hope this helps you further ?
Related
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function() {
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 115) {
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
} else {
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
if (scroll >= 300) {
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
} else {
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
});
});
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
I have an image embedded in a container with a background image to give the effect of scrolling within the page. Initially, I had the scrolling effect take place on page load, with this simple bit of script which worked perfectly.
$(window).on("load", function () {
$(".embedded_scroller_image").animate({ scrollTop: $('.embedded_scroller_image')[0].scrollHeight}, 2500, "easeInOutCubic");
}); // end on load
However, the element is too far down the page now and I want that animation to fire when the element enters 80% of the viewport. That part is also working fine with this code here (I'm using a scroll limiter to improve browser performance)
// limit scroll call for performance
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 500 //(milliseconds) adjust to the highest acceptable value
};
$(window).on('scroll', function() {
var flag = true;
if(scrollHandling.allow) { // call scroll limit
var inViewport = $(window).height()*0.8; // get 80% of viewport
$('.embedded_scroller_image').each(function() { // check each embedded scroller
var distance = $(this).offset().top - inViewport; // check when it reaches offset
if ($(window).scrollTop() >= distance && flag === true ) {
$(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
flag = false;
}
});
} // end scroll limit
}); // end window scroll function
The problem is this: I want the autoscroll to happen once and then stop. Right now, it works on entering viewport, but if I then try to manually scroll the image, it keeps pushing back down or stutters. You can't get the element to scroll normally. I attempted to use the flag in the code to stop the animation, but couldn't get that to successfully work.
How can I have this animation fire when the element is 80% in the viewport, but then completely stop after one time?
Here is a codepen I mocked up as well http://codepen.io/jphogan/pen/PPQwZL?editors=001 If you scroll down, you will see the image element autoscroll when it enters the viewport, but if you try to then scroll that image up in its container, it won't work.
Thanks!
I have tweaked your script a bit:
// limit scroll call for performance
var scrollHandling = {
allow: true,
reallow: function() { scrollHandling.allow = true; },
delay: 500 //(milliseconds) adjust to the highest acceptable value
};
$(window).on('scroll', function() {
if(scrollHandling.allow) { // call scroll limit
var inViewport = $(window).height()*0.8; // get 80% of viewport
$('.embedded_scroller_image').each(function() { // check each embedded scroller
var distance = $(this).offset().top - inViewport; // check when it reaches offset
if ($(window).scrollTop() >= distance ) {
$(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
scrollHandling.allow = false;
}
});
} // end scroll limit
}); // end window scroll function
I have kicked out your flag and simply made use of scrollHandling.allow declared already.
Try if it works for you :)
Cheers!
I need to use Slider Revolution to animate content when the slider is scrolled into view. I already have working solution - http://www.themepunch.com/faq/start-animations-when-slider-scrolls-into-view/ but it has one serious bug.
When user already seen slider it start to animate again when user scrolling it again.
I want to make slide not to re-animate when user scroll to it after he already seen it.
Clarification: user scrolls down to slide - slide start to animate - (super!) - user go down to the end of the page - then go back - and slider start to animate from the beginning (bad (for me)). I want to make slider stop after he played the animation for first time.
Update with relevant code:
var win, slider, sliderHeight, sliderPaused = true, winHeight,
// Change the "revapi6" part here to whatever "revapi" name that your slider uses
slider = revapi6.on('revolution.slide.onloaded', function() {
win = jQuery(window).on('scroll', checkScroll).on('resize', sizer);
sizer();
});
function sizer() {
sliderHeight = slider.height();
winHeight = win.height();
checkScroll();
}
function checkScroll() {
var scrTop = win.scrollTop(),
offset = slider.offset().top;
if(offset <= scrTop + winHeight && offset + sliderHeight >= scrTop) {
if(sliderPaused) slider.revshowslide(2);
sliderPaused = false;
}
else {
if(!sliderPaused) slider.revshowslide(1);
sliderPaused = true;
}
}
It's in "Custom JavaScript" block in my slider settings. All just like here - http://www.themepunch.com/faq/start-animations-when-slider-scrolls-into-view/.
Site - uhhu.net
Resolve. Maybe it's not the best way, but it works and i don't know better
Comment this part
/*else {
if(!sliderPaused) slider.revshowslide(1);
sliderPaused = true;
}*/
I let you here my solution:
1- Go to Slider Revolution:
2- Select your slider:
3- Click on Slider Settings Tab:
4- In the right panel click on "Parallax and 3D" and compare with your current configuration:
5- In the right panel click on "Scroll Effects"(bellow of "Parallax and 3D") and compare with your current configuration:
6- To finish Save the configurations:
http://www.deviantart.com/ is vertically scrolling the content of one of their container upwards when you move your cursor over it. and on mouseleave, it scrolling back down.
You can see it in action on their main page - right now at least - in a container with the text "Project Giveaway: 100 point giveaway #4". I'm wondring how they do this?
Found this line of code trough firebug:
onmouseout="if (window.LitBox) LitBox.out(this)" onmouseover="if (window.LitBox) LitBox.hover(this, true)".
So I tried to google for "LitBox" - but didn't get any luck. All I found was lightbox and listbox...
The exact effect is what I'm looking for.
Anyone know how?
$(document).ready(function () {
if ($('.content').height() > $('.container').height()) {
$(".content").hover(function () {
animateContent("down");
}, function () {
animateContent("up");
});
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height();
var speed = "slow";
if (direction == 'up') {
animationOffset = 0;
speed = "fast";
}
$('.content').animate({
"marginTop": animationOffset + "px"
}, speed);
}
See in JSFiddle
my code based on this code :)
Well.. it's really not that difficult to implement with jquery or css3. With jquery, on mouseover you start running a function to scroll the div up, using animate() perhaps. Then on mouseleave you stop the animation and run another animation to scroll it back.
With css 3, you can achieve it with transitions.
You can check out http://www.w3schools.com/css3/css3_transitions.asp.
I am building a mobile site and I have a slide show of images that allows sliding through images horizontally. The javascript library I'm using is bxslider. However, if one touches the slide show and wants to scroll the page up/down, the slide show blocks vertical scrolling and hence another section of the site must be touched.
Could someone please tell me how I could keep vertical scroll enabled (i.e, not allow the slideshow to block the normal scroll?)
Thanks!
Try this, Change the onTouchMove fn in the bxslider library to this
var onTouchMove = function (e) {
if (slider.settings.mode != 'fade') {
var orig = e.originalEvent;
var value = 0;
// if horizontal, drag along x axis
if (slider.settings.mode == 'horizontal')
{
var hchange = orig.changedTouches[0].pageX - slider.touch.start.x;
var vchange = orig.changedTouches[0].pageY - slider.touch.start.y;
if(Math.abs(hchange)>20 && Math.abs(hchange)>Math.abs(vchange))
{
value = slider.touch.originalPos.left + hchange;
setPositionProperty(value, 'reset', 0);
e.preventDefault();
}
// if vertical, drag along y axis
} else{
e.preventDefault();
var change = orig.changedTouches[0].pageY - slider.touch.start.y;
value = slider.touch.originalPos.top + change;
setPositionProperty(value, 'reset', 0);
}
}
}
If you goto the options page for the bxslider website, search for preventDefaultSwipeX, and preventDefaultSwipeY
Those are what you are looking for.