html5 cube slideshow - javascript

I'd like to know how to make the faces of a 3D slideshow interactive i.e adding links on it.If creating multiple faces or walls is the way to go does that mean I put a layer over each wall and is so how would I do that?
In the end each wall should be able to be treated individually but all still in this cube form.
This is the slideshow I'm talking about
http://www.script-tutorials.com/html5-3d-cube-slideshow/
Thanks alot for your time!!

Well, they aren't really html objects. The "walls" are created using the canvas tag - which basically just means javascript. If you want to make it more interactive, I'd recommend that you look into CSS animation instead. You could probably achieve the same results using CSS. Search google for CSS animated cube or something like that.

Related

Is there a way to make a triangular, clickable box in html/css?

Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.

Three.js - Dynamically "build/draw" TextGeometry

I want to simulate 3D text being drawn out or built inside my scene. The idea is to take the final score from a game and display it dynamically at the end of the game. If you don't know what I mean, imagine somebody graffiti-ing/tagging some numbers on a wall. The numbers don't pop in like they would if you typed them, but are constructed by building up each number.
Reference for graffiti-ing
I'm pretty sure that I want to use TextGeometry for this but I have absolutely no idea how I would go about making it appear dynamically and there aren't really any examples of this.
My only thought would be to hide each vertex in the TextGeometry and then make each vertex visible with a delay in between but I have no idea if that is anywhere near the right way to do it.
I know that it's possible to animate a line being drawn, but I'm going to need to use TextGeometry as I am using a specific font.
This JSFiddle is a great example of what I want, but with text instead of a line.
I don't have any code for this as I have no idea where to start, thanks in advance for your suggestions, any links/references/code examples are appreciated!

How can I do complex animations within JavaScript?

so I'm wanting to have various sized triangle particles fly in from a random direction (all over the screen) and then assembles to spell the word "Zoid". I have been looking and three.js looks to be the API that I should use for this kinda stuff.
What three.js example should I be looking at?
I am not looking for someone to make this for me, I am only wanting the name of the technique/animation.
http://anime-js.com/ take a look at this seems like a pretty good framework for animated javascript

Is it possible to make curved shape in 3d perspective div?

There is a video of concept desktop. https://www.youtube.com/watch?v=4ftpcHD3378
Well, may there is a way to make curved shape div... or at least to fake it. All I want to do is to bend div as it looks like a bit curved in 3D. I don't need any features as in video. If there is a way to do this in javascript/jquery tell me plz.
Another possibility is to use the perspective CSS property, I created a web photo gallery wall using this method, with similar results that you are looking for.
I used this website to help me build my gallery:
https://css-tricks.com/almanac/properties/p/perspective/

Implementing Image collage to a 'Word' shape using HTML5/JS

I would like to implement an image collage, where the photos are arranged on the page within a 'Word' object.
This is really hard to explain, this maybe why I haven't found any examples on the web. But as an example, let's take the word 'HTML'.
I would like to create a shape on a canvas on the screen, and then have photos transition onto the screen (easing, sliding, flying) and then arranging themselves sporadically around that shape. Then have the images clickable/zoomable. If possible, draggable as well within the shape.
Now, my first question, is this achievable, and how would I go about doing something like this?
I don't know too much surrounding HTML5 canvas, and am using this project to get my teeth into it. So I would really like to know briefly how something like this could be done.
thanks!
You can do something like a mask in photoshop you would get an image with invisible area with the shape you want to mark and then put the world image in the background.
This might also be of help http://www.html5rocks.com/en/tutorials/masking/adobe/

Categories