I have a Revolution slider plugin on my website and it has some kind of effect or something that when I scroll it moves up and down and I don't know how to remove it, I don't have access to the plugins configuration either.
So far I've tried with jQuery/js to move it down a little bit but when I scroll it keeps moving.
document.getElementById("rev_slider_3_1_wrapper").setAttribute("style", "margin:15px auto 80px;padding: 0px;max-height: 740px;left: -105.5px;position: absolute;width: 1351px;overflow: visible;height: 521px;");
This puts the slider 15px down but when I move the scroll it moves all around and breaks my layouts, is there anything I can do?
Thanks for helping me out.
Revolution Slider allows you to enable/disable parallax effects due the options which you can add to the initialisation script.
To enable Parallax:
jQuery('#slider').show().revolution(
{
delay:16000,
startwidth:1170,
startheight:700,
hideThumbs:200,
parallax:"mouse",
parallaxBgFreeze:"on",
parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
});
To disable Parallax effect simple remove any parallax based option like this:
jQuery('#slider').show().revolution(
{
delay:16000,
startwidth:1170,
startheight:700,
hideThumbs:200
});
Note, there are over 40 options you can set due the slider initialisation, and you may want to have different options also enabled/disabled, so i would recommend to get the full documentation by following the link: http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Also, all questions about Revolution Slider can be answered here: http://www.themepunch.com/support-center/
Hope this helps you further !?
Related
I require some help creating a scroll effect for a client.
Example: If you scroll down the page, notice how the image on the right animates to become full width and it almost has a parallex type animation where the width and image position is changing at slightly different speeds.
https://videinfra.com/work/fci
I have had a go myself using JS and some CSS animations but can't get the desired result. Does anyone know the code or a plugin which may handle this?
You could use "Animate on Scroll" libraries, such as WOW.js (https://wowjs.uk/) and AOS (https://michalsnik.github.io/aos/).
These two are excellent when it comes to firing animations when your element becomes visible in the viewport. I've been using WOW for years. Have a look at their documentation, it will get you started.
I need to build a vertical carousel like the one in the image, where I'm able to scroll and use touch.
When the active slide is clicked, the user is redirected else it scrolls to to the element.
Any tips for libraries that can help me achieve this?
Thanks in advance!
I ended up making the carousel myself following this tutorial:
How to build a carousel from scratch in vanilla js
It uses CSS3 animations to move the elements and javascript to swap classes to trigger the animations.
I'm looking for a way to slow down scrolling between two specific pixels, for example 1 to 100 from the top. Would that be possible in any way?
Here's a link to a website that have that feature I'm looking for.
http://goo.gl/isH5o0
When you start scrolling the dark blue overlay div disappears using CSS3 Translate3d, but then the scroll seems to stop or go really slow, which makes the underlying div not scroll to far at the same time the overlay div slides up.
Can someone please give me a hint of what technique to use to accomplish this or maybe help me with some code.
I think that there's nothing special with the scroll on that page, just the divs moving using 3d transforms. But if you want to achieve special effects with scroll, you can use the jQuery animate function:
$('html').animate({scrollTop: position-to-scroll}, 300, 'ease-in');
More about animate.
It may be using disable scrolling. I noticed that if i drag the scroller on the right hand side of the window it is uneffected by the "slowing" however the mouse scroll is. This is similar to the effect of the demo described here How to disable scrolling temporarily? .. at a point you can temporarily disable the scroll and then re enable it to stop them going too far down
I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
I am using flexslider and Joomla to make a mobile swipe responsive CMS site, however the swipe angle required to change from slide to slide is too sensitive. More often than not vertical swiping through the content will activate a horizontal slide. Anyone worked with this and/or have any clue where in the js script i can change the limits of horizontal swiping? Thanks in advance!!
I recently encountered the same problem and was able to resolve it with this fix:
https://github.com/wearebully/JS-Snippets/tree/master/Flexslider%20Touch%20Sensitivity%20Fix
Hope it helps.