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!
Related
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 6 years ago.
Improve this question
I found this site Storj.io. I really like the design of the site and was looking at the header. There is a background-image and then on top of this there are those points that are moving. How can such a animation be achieved? Is this done with html5 and how or is JavaScript used?
Inspection reveals they are using Particles.js
Particles JS
They provide documentation to get you started and achieve the effect you are looking for.
Your question is too broad for a complete answer. Try asking about smaller parts of it when you get stuck.
From Scratch: In essence you'll want to look into using the <canvas> element to draw particles. Take a look at this simple example of what can be done. Here is a blog post on particles with canvas to get you going (which culminates with the previous example).
With a library: https://storj.io is using particles.js. But that doesn't tell you how it's accomplished. On the plus side though, the library can easily be included from https://github.com/VincentGarreau/particles.js/ (see the demo on codepen).
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 6 years ago.
Improve this question
I want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.
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 7 years ago.
Improve this question
I'm working in a place that we have to use images as page structure, I would like to know how wrong it is, because in my eyes is very wrong and.. I can never make perfect the layout because of the difficulty to fix the correct content over the image.
Is there any right way to do this? Any course to teach me an easy way?
Example: http://bit.ly/1GILaQs
BG: http://bit.ly/1GILfDy
We need give support to IE8, so is more difficult.
Thanks
The goal should be to reduce that file size of that image because it is very large and takes a long time to load. And also to make the layout more flexible so that when you change something you don't have to open up an image editor and rearrange things.
I don't think it is possible to replicate what you have there exactly without using large images but what I would do is try and replace some elements with simpler more easily repeatable patterns. For example replacing the red background with a simpler symmetrical gradient and removing the shadows/folds from the white image. Then for the shampoo bottles you could use individual image tags and place them within your content.
Amanda, you can have a background image that can be repeated, the red part of the layout background. Then you can have a div with the white part.I believe that's the best you can have.
I don't believe there will be a magic way that will give you the layout flexibility you're looking for. You will have to work with Photoshop and adapt the content accordingly given the nature of the layout.
Code School offers some good courses, they have one about css that can help you on that: https://www.codeschool.com/courses/css-cross-country
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 8 years ago.
Improve this question
I'm trying to build a JavaScript carousel exactly like the simple version of the famous JCarousel but I want to do it with no jQuery at all. Why do I want to do that? Well, because I'm trying to really learn and understand how JavaScript works.
I've been searching forever to find an example with no use of libraries but I haven't been able to find anything. If anyone can point me out to something similar to what I need I'd appreciate.
Now, basically my question when it comes to build the carousel is related to the movement of the images in the list. So I have all the images in a list, I have buttons for the arrows left and right, ok but when I trigger the event I just don't know where to start in order to move all the images left or right...
Any clues?
You'll likely find examples that use libraries because some of these things are pretty intense. The theory is that you'll want to make a very wide div with all the images arranged horizontally, then on button pushes, set the div's css's left position to add or remove the value of the image's width. Libraries are very good at wiring up button clicks to callback functions, querying and setting an element's css, measuring an element's width, and manipulating the dom to take (for example) a list of <li> tags and making it into a very wide div. Add the graphic design constraints, and though I applaud and reverence your desire to do it by hand, you'll spend a very long time reinventing the wheel.
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 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.