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 9 years ago.
Improve this question
Soo, I have seen that I can use both javascript and css to resize my pictures to fit the browser.
Which one should I use, is there any pros / cons?
Would appreciate and example of what I could look like aswell.
Best regards
Lost boy
If you use JavaScript's resize event, there will always be some delay which could cause horizontal scrollbars to flicker on your page.
So use CSS. width:100% works perfectly.
I've voted to close, but regardless:
CSS. It's lighter weight, doesn't require javascript, runs without javascript enabled, and will render faster (javascript will have to wait for the image to load, while css will not).
It really depends on what you are doing.
If you just want an image that is 600px tall by 800px wide (or is 10% of the width of the browser, or fills the entire page), then use CSS.
If you are already doing things with javascript and want the images to adjust on another condition, then you can use javascript to resize them.
In short: if you already are using javascript, go ahead. If you aren't, CSS will do for most simple purposes.
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 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 am making a website with a parallax header. This header needs to contain both images and video. I wanted to make a pure css approach, however that creates new "problems".
I tried http://keithclark.co.uk/articles/pure-css-parallax-websites/
Problems CSS:
- You have to put the whole page in a scrollable div with a 100% viewport height, this means that native ipad scrolling behaviour is not working anymore, things like js scrollTop are not working anymore, fixed navbars are displayed over the scrollbars and so on. See demo of this here http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
Problems JS:
- Performance, animation looks jumpy most of the time
- Needs a lot more code
- Needs extra code to make video behave like a fixed background
I really do not want to use any third-party plugins, to prevent a "plugin overkill" for this website.
I am now at a point where I have to choose to go on and keep the CSS version or to go with javascript. What I am just curious about, is what is the best way coding wise, performance wise, to make a parallax? Hope someone can enlighten me on this.
Thanks!
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 recently found recently the JavaScript library - tracking.js
Is there any way to detect what div I see now by image or camera?
I have two elements on the desktop, the left and right columns, and I would like to check if I see left div ( with console.log() ) or right div. This library is simple, and I know how to add a script, but I don't know how to detect my eye and detect what element I see.
Maybe there are other ways to detect this.
Thats a bit complicated because you need detect minimal ocular movements and the common webcams, haven't resolution enough, but with some hardware like this project http://pupil-labs.com/pupil/, could do that.
A good solution is tracking.js because this library simulate human behavior with a some algorithms and should be enough to make simple decisions like the columns position.