Images slideshow looping and animated with the rotation effect - javascript

I'm sure this exists but I don't know how it is called, so I don't succeed at finding it on the internet.
I'm trying to do an image presenter which can loop with a rotate effect, very similar to what you can find in video games such as the good old tomb raider 2 menu for example:
When you press left or right arrow, you can navigate between the items.
See that in action here: https://youtu.be/1T7ueLPuq94?t=197 (the player navigate to the left, he could have switched to more items, it rotates and loopes).
I would like to achieve that with this rotation effect and the loop with css3 and javascript. Can anybody help me with that?
I put part of my code in a pen https://codepen.io/Flaburgan/pen/jOOrEdx but I need help about the way to handle it. Should I start with nothing in my DOM and create elements with JS? Should I have all the nodes in my DOM as I know them from the beginning and they are not going to change? But then how do I loop back to the first elem?

Related

Tricky sprite movement control with JavaScript/jQuery

I'm currently trying to figure out how to animate the sprite properly without the help of extra libraries other than jQuery. This is the live demo of what I have right now.
Controls: A for left, D for right, Space for jump, left mouse click to fire.
Here's the problem: if I press the left and right keys really fast, the animation gets screwed up, try it yourself since It's kind of hard to describe the mess...
My code is very scrappy right now because I'm playing around with many methods, so please bear with me for now. Here's the JavaScript code. If you want to see the html and css, they are in the same directory.
$('#obj') is the object of the sprite.
I am too lazy to look at the links for your code. If you say it is acting crazy, sounds like you are not cancelling the animations before applying the next one. Call stop() before running the next animation.
$("#obj").stop().animate(...)

javascript masonry divs are resised with ccs and are overlapping each other, how can I get them to move out of the way?

But the key thing is I want them to do it in that tidy animated way, how do I get it to responsively move?
also what do I serch when I want an animation for when they appear, prefeerably a callback for their appearance so I can control that animation wuth transitions.
Lastly if I was to flick through a huge list of them on a phone how would I get the page to detect a fast flick to scroll down? Im creating an app for children between 3 and 6 for a uni project and when its flicked fast I want it to go "WHEEEEEEEEEEEEEE"
Any ideas as to how do able that is?
appreciate your time, thanks.

jQuery Random Particles Overlay on Element?

I'm wondering is it possible to achieve following effect via jQuery http://www.youtube.com/watch?v=Zlb6o_R_WoI
So particles overlay image, are random fade in and out etc? I've looked for plugins or experiments, but wasn't able to find anything closely similar.
Another question that appears is how big of an impact would such effect have in a browser? e.g if there are 8 images each has particle effect, however only one particle effect is displayed at a time others are hidden, lets say with Display None.
Here's a little something to get you started on HTML5 animation and changing the opacity over time (fade in/fade out). You can mess around with getting the random movement and stuff going, and feel free to ask me questions if you can't figure out what I did.
http://jsfiddle.net/eW6BB/

Making Slide Show by CSS3 Animation

Have a look at this picture:
http://oi43.tinypic.com/5cdm5g.jpg
This is my idea to design an slide show, which each slide can be a div tag and congaing some text or image and the small behind slide is the next one which is a bit transparent and when the user press the space bar or click somewhere the top slide fades out and the next one moves to forward and replaces, then another slide replace as the next one.
I know it is possible by JS, but what about CSS3? I know I have to put code here, but I have just started and do not know where to start. It would be great if some one help me and gives me some hints.
The best resource I have found for CSS3 questions is http://css-tricks.com/
This is another good resource and is updated regularly by the owner. http://css3.bradshawenterprises.com
It will be some advanced CSS3 techniques you'll be using such as transitions, transforms etc..
Good luck

CSS 3D Transform - opening a card

I'm making a ecard. When the user clicks the card, it will open and show its contents. How do I make this in CSS and javascript? I am using perspective and rotation, as you can see here. If you know an example that looks like what I'm trying to do, please post the link.
Here's the solution that I've played with:
Create a style that does the rotation animation.
Create a style for the end result of the animation (basically the same as your to section in the animation style.
Create a button or trigger to add the rotation style to your <div>
Set a timeout in JavaScript for the same duration as your animation.
Once the timeout triggers, remove the animation style and add the end result style
Here's a modification of your jsFiddle. Getting the back side to work had a few quirks. The backside has to be positioned so that its right edge lines up with the front side's left edge. Then, you must rotate the back side -180 degrees so that it starts out behind the front page. Also, I had to switch the z-indexes once the animation had reached the midpoint.
All of this is hard to explain here, so I devoted an entire blog post to it. I created a bunch of visuals to help make it clear.
There's also a more simple solution to work with; instead of switching z-indexes with a timer, you just need to specifiy that elements have no backside (-webkit-backface-visibility: hidden), and flip the yellow card 180 degrees, so its back touches the red backside.
This way, you only need to flip the container containing oth the yellow and red cards, which can be done by adding a class (e.g. class="card opened").
Here's your example code with these changes:
http://jsfiddle.net/pYJm6/90/

Categories