I've been working on the Sequence slider from www.sequencejs.com. The slider is very intuitive but it can only do one kind of animation on an object, from what i've observed so far, here's how the slider works:
1.the html section consist of an unordered list which in turn have list-items
2.the js file edits the li's class to "animate-in" marking the rest of them "animate-out"
3.after 5s, the second li is marked "animate-in" and rest are marked "animate-out"
4.the css file uses the css3 transitions to animate classes when "animate-in" is triggered on that class
What i need?
I need to do multiple animations on one object. But not together, rather one after another, for instance, an image would slide in from the right; then scale up.
Maybe there's some way of doing it that i might not know, i would appreciate your help with that
Or, I was thinking if the javascript file could add more classes at certain times, I could get the effect. I went through the javascript but I'm not skilled enough to understand that yet.
Could you guys take a look at it and explain me which parts handle the class changing? How can I make it add more classes between "animate-in" and "animate-out"?
You can get the slider from here: sequencejs.com/slider-parallax/
Hope I was clear enough.
Related
I need to show numbers on thumbnails, in the slider on my product page.
Problem is, most sliders I've come across, do not have a numbered-thumbnail function. And the few that do, don't support other features I'm looking for.
So, is there a way to add sequential numbers to thumbnails, in a slider that doesn't natively support them?
I have attached the normal way sliders work for each page. They usually have some CSS class applied to them. If find that class you can usually make the effect that covers up the number disabled.
Usual HTML Setup for Sliders
If you are more specific with what slider you are using we can help further.
How do I create a text animation like on this page.
http://www.kikk.be/2016/
When you hover over Main Menu item this menu item starts random animate each latter in this menu titel.
The animation you are talking about, don't even use javascript. You can see this when you disable javascript and visit the site.
My guess would be, that they just use css for the animation and that it is not realy random, but just a set of animation frames played fast.
Here is an explanation on how to use css animations in general.
And here is an explanation on the hover selector in css which allows you to specify mouseover actions and can be simply used together with the animations.
Basically, on a website I want to display a number of elements in the same space one after the other with a fade effect to transition between them; this would be used to display quotes from customers on a website. I've achieved this before using images and using CSS effects to fade in/out from the first to the last and it looked good, the only issue is the fact that obviously images have sizing issues when it comes to making the site responsive, and the images take up unnecessary space on the server and effect loading times, depending on how many are used. My question is simple to ask if anyone knows of a more efficient way of creating a similar effect that can use plain text instead of images? Possibly by hiding all text bar one line within an element and then fading to the next line? Preferably using only CSS but js answers are welcome too. Thanks in advance!
Also, a website using images for the effect I want to achieve: http://portsmouthtap.co.uk/
I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.
Please look at the image at the end of this question whilst trying to answer.
Updated Question:
At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.
My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.
In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).
Here's the image:
I would recommend using an already made jQuery slider, like this one:
http://basic-slider.com/
For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.
These are a good start for achieving what you want with jquery:
Animate: http://api.jquery.com/animate/
Capture a click: http://api.jquery.com/click/
Show/hide elements: http://api.jquery.com/show/ http://api.jquery.com/hide/
Set the html of an element: http://api.jquery.com/html/
If you have a problem with anything specific with these functions, you can ask again or just search Stackoverflow, there's a good chance whatever questions you might have have been answered already.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.