I'm looking for a JavaScript library, pure JS or JQuery-based, that will allow me to create a slider similar to AnythingSlider or http://basic-slider.com/demos/. The most important feature I'm looking for is the ability to dynamically append new slides and then trigger a transition to it. The ability to transition to any slide is also important.
Most libraries I've investigated require that you append the slide to an element then retrigger the slider. This is fine however most scripts I've tested change the current slide position or there's a noticeable change in the elements on screen that disrupt the user experience.
Thanks.
I'm a personal fan of bx-slider. It's pretty basic, but it works really well. http://www.bxslider.com/
It just requires a basic div set up, and it's a plugin, so just call it from $('#myID').bxSlider();
Have you taken a look at the Nivo Slider? I have used this before and have never seen the problem you are describing (with retriggering the slider).
Related
I've been looking for a library or a solution to implement Tumblr's scroll effect.
I previously worked with libraries like fullpage.js but the thing is Tumbler effect is a bit different.
To be more specified, when you scroll up/down sections cover each other, but in libraries like fullpage.js sections push each other to up and down.
I'll appreciate if you guys have any solution or library to implement this effect.
Update 2018:
There's an article about it here. Which makes use of fullPage.js. instead.
You are looking for pagePiling.js, the small brother of fullPage.js.
You can even use fullPage.js to do exactly the same as long as you use the parallax extension with the offset value set to 100, and then place all your content in the background element. So it will move at the same time that the background.
The advantage of using fullPage.js is that you'll have plenty of more options, methods and callbacks than when using pagePiling.js, which hasn't been updated in a long time.
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
What I am trying to achieve is that when the user scrolls the page using the mouse-wheel (as there is no scrollbar), the page slides down with an animation to the next section of the page and while the animation is being played, mouse-wheel won’t work (to tidy things up, which is a good act).
The behavior I want can be seen in http://google.com/inbox or http://www.luxaqua-design.com/.
The thing I liked in Google’s inbox website is that it has the same effects with touch screen devices and their scrolling mechanisms.
I only need some pointers about the events that happen in this kind of scrolling and how I can manage them (specially, I am looking to achieve the same functionality with touch devices).
That is a parallax website, and actually there are many ways to accomplish that. But I would like to suggest to you the FullPage.JS by Alvaro Trigo, you can also try Skrollr by Prinzhorn
. Those are libraries that you can use to easily finish your goal.
By the way, you can also manually do that by creating a CSS that will make the images fit in every slide, then add JS so whenever you scroll it will go to another slide, but I tell you it is better to use libraries. :D
It is called Parallax scroll effect .. Here is a tutorial on how to make it!
https://www.youtube.com/watch?v=D75WTf_Y738
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.