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 7 years ago.
Improve this question
I just wondering about following situation:
Description
Pictures slider placed on website by: HTML5 Video element or Javascript slider (It does matter which solution will be chosen: raw javascript or libraries).
Assumptions
One slider in fixed place on a website
Fixed numbers of pictures in a slider
Pictures don't change
Browser support doesn't matter
Parameters influencing on result
Usage of CPU/GPU
Loading speed
Weight of file or files
Ready time to show
Problem to solve
Which way is more efficient?
Have guys any experiences in this topic?
Cheers!
Ok, based on the sliders you referred to at jssor.com, it seems like a slider should be much more efficient in most ways. If there are no animations except when the user is moving the slider, then there should be no CPU/GPU usage either (assuming the slider is implemented efficiently). A video playing in the background will always use some CPU/GPU. If it's a format that most GPUs can accelerate (MPEG-2 or H.264), the CPU usage may be very small, but you can't count on that.
Of course most of those slider demos have animations going all the time. That will use CPU too.
As far as loading/startup time, a few JPEG images will usually be much smaller than a video file. The slider should start up at least as fast as a video, and use a lot less bandwidth.
As usual, the only final answer to "which is more efficient?" is "Try both and see."
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 5 months ago.
Improve this question
My current site has horrible optimization. A mobile score of 10 and a desktop score of 60 does anyone have any information on what I can do to make these scores better? Would love some suggestions on what to do. Here is a link to google insights. Thank you to who can help.
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=desktop
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=mobile
Mobile Score
Desktop Score
I personally focus on the Core Web Vitals, which come from real user experiences, and not the PSI scores, which are based on a single simulated test.
I'll audit your home page:
LCP
This is the time it takes to show your carousel image. A first improvement would be to do a preload on that image so that it starts loading earlier. And then remove the lazy load from its img tag.
Important images that are above the fold should not be lazy-loaded but eagerly loaded.
Some of your lower-down images are lazy-loaded, which is good. But some are not. In particular, I saw the image in the expandable sections are not lazy-loaded. If you make them lazy-load, they will not get in the way of loading more important resources, like your LCP image.
Your JavaScript bundle is running a few long tasks. This can get in the way of rendering and therefore LCP. Consider looking into reducing or delaying what it is doing. In particular, delay the starting of animations.
CLS
Your green selector at the top of the page is added late and pushes down the whole page. This layout shift alone means you fail CLS. Try and pre-allocate the space for it, so nothing shifts.
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 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 details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I am on the 11th level of my game (plan to have 20-25) and listening to the music that is going to be on the game, over and over, to see if it fits while testing it.
Now I've decided it is time to start working on the media player for it.
I plan to have all the songs on a loop. You can skip songs or go previous and play/pause. There also will be a button to mute.
I know how to add the GUI to the screen and use the mouse clicks to trigger methods. Just wondering what is the most used way instead of building it from nothing and wasting time.
I am just wondering if there a tut/guide as I plan on pulling an all-nighter to do this.
I'm in college but it's summer so decided this would be great for my portfolio.
Here's a demo vid of it. It is my first game so go easy! :)
Use the <audio> tag. It has functions such as .play() and .pause(). To switch tracks, you'd modify the src to point to a different audio file, much in the same way you'd switch the src of an <img> tag to display a different image.
EDIT: I just watched video and I want to play this thing. The twist on the normal platformer (all the platforms being ones that you slowly fall through) could either be really awesome or really frustrating. I'm leaning towards awesome but that remains to be seen!
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 used to build sites that used flash for background animations & background movies while having regular (selectable) Html text on top.
Flash really fit the bill because it allowed for streaming movies WITHIN the animation itself, so you could layer things really well and get a very creative website going.
BUT FLASH IS DYING...
So I'm here to ask you good folks what solution (or solutions) should I look towards that can accomplish the same goals in modern non-Flash platforms (web-mobile etc).
It would need to:
Create animations that can have within them movie files. I would need to control the movies from the animation, not just slap them as background
NOTE: I have looked at all kinds of plugins etc for putting a movie as a site background, but this would NOT yield the result I need as it is just a movie playing and cannot be scripted as an animation in Flash was. I also checked out Adobe Edge. It comes closest to what I need but I have found no way of working with video inside it the same as in Flash - Please correct me if I'm wrong.
I'm no Javascript maestro by any means. I would dive deeper into it but I'm not sure it would work for what I need.
I hope I have not confused you with this long winded question and I thank you for your help.
Try the html canvas element. You can pipe video to the canvas using a hidden video element and any animation you can think of is possible through canvas. Since these are dom elements, you can of course put other HTML on top of them.
For good canvas frameworks check: http://www.backslash.gr/content/blog/webdevelopment/7-10-javascript-canvas-frameworks
I'm personally a big fan of paper.js and processing.js