Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to create a slider with stripes effect like in the image below:
How do they "cut" the image in a number of stripes? I would like "cut" my image in custom shape stripes (not the default rectangular ones like in the example, but curved in a custom manner).
Link to the actual example slider: http://www.jssor.com/demos/x-stripe.html
I just need the conceptual explanation, the starting point, I don't expect or want the actual code. I searched on the internet but the tutorials only reffer to simple effects as sliding or fading which I know how to implement
I've seen this done a couple of places ...
The general idea for these effects, is to create a series of elements that align the image within them to the appropriate part of the transitioning image.
This could be done a couple of ways. Either using background-image settings in css. or putting img elements inside each strip, and setting the positioning to absolute and the left to a negative offset matching the strips position. you then animate the strips. Once the animation is complete, remove all the strips and replace with the original image.
hopefully this points you in the right direction. Let me know if it doesn't make sense.
as for curved cuts - this could be a bit tricker to pull off with html/javascript ... however you could possibly use border-radius to cut the corners of the strips. doing so with large numbers - eg 100px radius, you could possibly pull off circles.
another alternative perhaps would be using SVGs with background images - but i haven't tried mixing those together - you'd need to look into that.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I've been learning how to code for some time and I come to you because I'm stuck on the construction of an animation. I've been trying to figure out how to make it for two days (image attached) but it seems that I don't have the knowledge to build this animation alone. I've been looking in css but the revelation of a text at a fixed position is not possible with a moving element, and I don't master java script frameworks.
The animation starts with the right image (this is the default state), it then goes through the left image to then let appear only the orange background and the texts.
Animation description
What I can't manage to do is the progressive revelation of the text by this orange form (the two little bars are important and I want to keep them even if it's more complicated).
I simply don't know what to search on google to find the answer, nor if I should do it with css or js or a framework.
I don't necessarily want you to give me the code already pre-made but mostly a direction to exploit.
Thank you in advance for your answers.
You’ll might want to make an SVG shape, and then use clip-path to create a mask. These two articles work their way up to something like what you’re after:
https://css-tricks.com/clipping-masking-css/
https://css-tricks.com/animating-with-clip-path/
The SVG itself could be animated, or you might animate the clip-path property which is covered more in that second link.
Hope that’s helpful!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm currently working on website allowing users to select colors from input, that will then be affected on a specific area of an image.
Here is an image example :
Result example : If the user selected red color, the 1 zone will be colored red and so on.
Is there a way to do it directly on the image with JavaScript/CSS, or I have to use canvas component? Otherwise, if there is already an existing tool allowing to achieve this?
I found this fun tool, but they are using geoJSON standard : https://www.amcharts.com/demos/selecting-multiple-areas-map/
So, must I have to generate by myself a geoJSON format to work directly on, or it's possible to work directly on an image?
If you have any ideas, I'm interested!
You could work with the image by splitting it into the areas you need, but this is not the way I would do it.
You could use an SVG and put it above the image inside the SVG you could define areas and just hide/show them when needed.
But if you find some library that automatically does things for you that might be the better solution.
An open-source library like HTML5-Paint-Bucket-Tool can help you bucket fill color into a bit map image. The downside is that you do not know which zone is colored what since it's just an image.
For vectors or SVG, state controls are easier but to display and render a map will require a lot more effort.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to create the classic solitaire game in Javascript, but I am uncertain about how to design the HTML/CSS part of the game.
Requirements:
Animation. Dealing cards, shuffling cards etc. should be animated.
Each card can be dragged and dropped.
Here is my question:
What are the general strategies/techniques to position the elements in HTML5 games? Apparently in this game, we may not want to simply hard-code a card's position to something like top: 30px; left: 50px etc, because it has to adopt itself to different screen sizes, not to mention it has to align with other cards.
It depends mostly on how you want to go about it, but I would recommend using <canvas>. It supports animations, click handlers, everything you would need.
Also, there's the absolutely beautiful library CreateJS that you can take advantage of, which handles things like bitmaps, tweens, sounds, pre-loading large images, you name it!
If you'd prefer to just use a regular canvas, plenty of tutorials like this one that work specifically with card games in canvas.
As for clicking and dragging, the general concept is that you calculate where the object is by calculating the offset from the edge of the canvas. CreateJS allows you to easily have an 'object' that sits on the canvas, so it will automatically come complete with its own width and height. You can both define the offset and move it around with standard object syntax, using something along the lines of:
card.x = game_board.x + 100;
Having said that, there's no need to re-invent the wheel! Simon Sarris has created a great tutorial on clicking and dragging objects in canvas, which can be found here.
Hope this helps! :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am building a web page dedicated to explaining Math and other topics. I'd like to animate the process of doing certain mathematical steps like adding numbers and solving an equation. I know I can create an animated .gif but this comes with the draw back of having to find some way of drawing the symbols in a picture or maybe exporting a LaTeX rendering, etc. I'm wondering if there is some more programmable, systematic solution.
Suppose for concreteness that I want to animate the solution to 2(x-1)=10 and then several other similar equations, and the process of dividing 123 by 45.
For some context, I have some decent but non-pro skills with HTML, CSS, JavaScript, other C-like languages, Python, and similar stuff.
What I'd do (this is broad) is take the input of each number or symbol a person types and moves them to a specific area on a canvas with JavaScript. For example, every time a person enters in a number it will move that input into a small box or something. From there you can just use the symbols to add/subtract/multiply etc. If you wanted to make this smooth so that it goes in multiple steps you could always you the setTimeout function with JavaScript so it shows each part of the equation step by step. Also an added tip would be to check on websites that have similar functions like Cymath
I will choose Canvas with HTML5 and Javascript to create the animations, the good point with Canvas is that you have full control of pixels, the cons is that you will have to deal with all the stuff to create and render every single function.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Is there anyone who knows if there is a better alternative for the filmroll js library: http://straydogstudio.github.io/film_roll/ ? I use it because it's almost exactly what I'm looking for: It centers the active image in the middle of the screen and it works great with responsive designs.
The reason I'm looking for an alternative is because it contains a few bugs, which I discovered after one hour usage already:
It removes the cover from the beginning or end of the slider before it rotates. It would be better to first duplicate the image, so It won't display a white gap at the end of the slider while rotating. Anyways, I used a dirty fix by just loading the covers multiple times so it contains more images than what fits on the screen.
Every div contains a hardcoded width, which changes so now and then, because I use a bigger size for the active image. The problem is it doesn't always recover the width correctly of the parent div, so it will show white gaps between the images.
With touchSwipe enabled it is very very buggy.
I can't duplicate the slider multiple times with the same classname.
It truly is a great concept, only those bugs are quite bothering me. So before I start making adaptions, I'm just curious: Does anyone know a library which does exactly the same? Or almost the same.
You can try Iscroll as an alternative
http://cubiq.org/iscroll-5