I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.
Related
I am new to css and I am trying to use tailwind Carousel (from tw-elements) with my gatsby react app and everything is working fine except for the auto-scroll on page load. I copied the first example from this link, which already has auto-scroll enabled.
On playing with it a bit longer I realised that the auto-scroll starts working once I interact with the carousel - only via the next/prev buttons. If I click on the indicators before clicking on the next/prev buttons the autoplay never starts.
I tried some workarounds that are probably not ideal but didn't work anyway -
I tried manually clicking the next button on pageload with the help of ref.current.click but it still does not start the auto-scroll. I need to hover my mouse over the Carousel and then exit for the auto-scroll to begin.
I also tried setting data-bs-pause={false} to not make it stop on mouse hover but that just stops the auto-scroll completely.
Is this due to some differences between how gatsby and tw-elements work or am I missing something basic here?
ps - the attributes I passed for the the carousel were picked from the bootstrap documentation, since tw-elements are built on top of bootstrap.
I am after a similar effect to that found here https://waaark.com/works/ - when you scroll down out of the top section, further scrolling actually replaces what is in view and no further scrolling happens. I don't want as complex animations though a simple slide in from the side is what I am after. that site is WordPress, but my site will not be.
I have tried to at least crack the slide in, but a lot of examples I have looked at and tried do not work, or don't work with multiple images - i.e. slide them all at once and don't wait for the scroll, and only slid in the first time you scroll down - want it to work every time you scroll up and down.
You could use Fullpage.js - There are a few examples for different configurations and it is very easy to setup.
I probably need a step in the right direction as I'm not sure if this is a CSS transition issue or a Jquery issue.
I'm trying to implement the carousel listed here:
https://www.codeply.com/go/XPajZsz60p/bootstrap-4-responsive-carousel-4-slides-slide-one
But when I tried to implement it (see half way down the page under Recent Clients) and try to slide right, it does not have a smooth transition. The slide left works perfectly.
http://www.fordengineering.ca
When I slide right, the new icon appears almost immediately and covers over the whole slide.
Is this because I should be doing this on the bs.slid.carousel function instead of the bs.slide.carousel function in JQuery? Or is this because of a CSS issue?
I'm working on this site http://www.lodahl.aero/ which is using fullpage.js for the front page. Although it was working fine at one point, it's stopped now and (I'm sure its something silly) but i cannot figure out why. Basically you cannot scroll up or down with the mouse wheel or pageup/pagedown keys to or from the first slide. You can flip between the 2nd and 3rd slide fine, but the 1st one is not playing ball. Can anyone elighten me as to what I'm missing?
Thank you
Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.
Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:
I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.
I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.
I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.
This is an example of what I am after: http://www.zendesk.com/
Im sorry if that doesnt make sense. Its a tough one to explain.
If you don't find anything by the lib you can just use the DOM and some JS like in this question: How do you make something to appear slowly on a page using Javascript?
I managed to fix my own problem last night.
I had already tried this but couldn't get it to work right. All I done was added a flag variable which is true if any animation is running (var running = true; [or false])
If the user clicks the pager buttons to move the slide (lets say from slide 1 to slide 4), and if the slide is already in motion (then var running == true), then the code finds all queued effects in the system, deletes them, and then hides all the slides. It then just starts a new cycle to slide 4, as the user requested.
Doesn't matter how fast you click the pager buttons now, it works seamlessly. :)