I recently asked a question about scaling an SVG / Raphael JS layout to fit an entire screen using percentages and transformations. What I didn't fully realize, is that SVG (or, at least, Raphael) scales from the center, which is no good. This makes it look a little odd when trying to align various elements.
My design goal is to create a base layout at 1280 x 720 and have it automatically detect the screen resolution to fit the height and keep its aspect ratio. The important content fits right in the middle, and two panels can slide in or out if the width is too small, or whatever (need to work on that later).
The solution I was thinking about (which I haven't really tested), was to pretty much ignore element.transform(), and create a custom scaling function. Each element would, somewhere, require an additional attribute where it is to be scaled to (for example, bottom-right corner, top, etc). And, the, the element would just be redrawn with the new dimensions. An element that has its 'anchor' set to top, would shift one pixel to the top and left, and expand one pixel to the right at a time. Or, something like that. As for text, I was just thinking about using percentages for the font size.
So, my question before I start tinkering, is- are there any SVG-based javascript libraries out there they have this functionality built in already? I was looking at Snap, svg.js and D3 (which I did not understand at all), but I couldn't find anything related. Or, are there some things I am missing with Raphael?
Or, maybe I am thinking about this too much and going about it wrong?
Related
I'm using a library called ParticlesJS for part of the background of my website - this library dynamically generates a canvas element sized according to its parent, and fills it with animated particle effects, creating a neat effect. With that said, I have run into some practical issues when trying to use it as the background:
If the canvas element is the same size as the content, the visuals become pixelated and distorted if the height changes, such as with the addition of new content. Reloading the library is not a solution to this as it creates a visually distracting effect.
If the canvas element is an arbitrary extreme height and not sized according to the content (with the overflow simply hidden), the performance of the website suffers, as the library consumes excessive CPU power.
If the canvas element is simply given a fixed position in CSS, performance is good and it sticks, but it looks out of place as everything behind it moves during scrolling.
After some consideration, it seems like the best way to make it work is to give it a modest size (like 200% page height), and then make it repeat infinitely during scrolling - performance would be acceptable, and there wouldn't be any distortion. However, I can't find any way to do this - I'm aware that there's a background-repeat property in CSS, but that seems to only work for images.
Is there any way to do what I'm trying to accomplish? Both CSS and JS based answers are welcome.
After some trial and error, it looks like the only means of accomplishing what I'm trying to do is as follows:
Create 3 or so background divs, each the size of the view port, and stack them vertically
Record user scrolling activity, and set a trigger for when a user has scrolled a height equal to the height of the view port
when the trigger is hit, place the div that just left the view port at the end of the list, and insert an empty spacer div where it used to be
If done correctly, this creates an effect where the user is apparently scrolling through an infinite background, when it's really just the same 3 or so divs being shuffled over and over. Going in reverse is the same principle.
Not sure how to make this work with in a system that also has scroll position restoration, but it could probably be done by waiting for page loads and then dynamically inserting enough spacers to move the background divs to the appropriate position in the view port.
The downside to using animated effects that rely on viewport dimensions is that the user may resize the browser and wreck your animation so you have no choice but to catch any viewport resizing in which case you may have to reload everything or recalculate!
You can't have the cake and the cherry on top unfortunately, so you'll either have to abandon the idea of "impressive effects" because they are impractical or take action...
document.body.onresize=function(){Adjustments();};
function Adjustments(){
var W=Container.offsetWidth, H=Container.offsetHeight;
// You've now got the new resolution so go for your life!
}
I know how to change font size using CSS, and I know how to scale text inside a canvas, but is it possible to scale text outside of a canvas using CSS/JS?
My problem right now is that I want dynamic objects on a page to resize along with the page, but when there is text on those objects, it fails to resize correctly, since fonts only have sizes in full pixel amounts and not fractions I get "jitter" or "jumps" while the user is resizing. Using percent amounts on the fonts doesn't change the fact that there's no such thing as a "16.5" size font, a 30 character text will jump by at least 30 pixels per increment.
This also causes an issue with word wrapping giving inconsistent results between resizes, one word per line might decide to jump randomly to the next line or not based on the size:font relation and this snowballs for the entire paragraph.
Basically I want to get the same visual effect on every x,y window size without having to store all texts as images, and without creating a canvas for every single text that I use which sounds kind of ridiculous. Is this possible?
I believe your best bet for controlling typography to this degree is going to be with the vh, vw, and vmin & vmax CSS properties: These allow you to scale text based on the viewport height, width, and the smaller & larger of the two, respectively.
I personally find these work well at medium-to-larger size resolutions, but begin to breakdown at narrower viewport sizes, where it may be wiser to forgo this level of control. See Viewport Sized Typography on CSS-Tricks for usage and more information.
I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.
I would like to be able to set a background on our homepage which can expand and contract with the window size whilst keeping the original images aspect ratio.... I'm guessing this will need some clever Javascript or similar.
The effect has been implemented here whereby then the window exceeds around 1500 pixels in width the background will dynamically expand.
http://www.pixelcrayons.com/
First the bad news: CSS doesn't (currently) allow a background image to be stretched or scaled, so it isn't as easy as it should be.
However, there are a number of ways around it. The best solution (IMHO) is to have a normal <img> tag sized to 100%, positioned absolute (or even static depending on the effect you want) and layered behind everything else using z-index.
The best thing about this option is that there's no Javascript involved.
But if you want to find out about the other solutions (that do involve Javascript), then try this link: http://css-tricks.com/how-to-resizeable-background-image/
(but note that his preferred solution in the end is the same as mine)
Hope that helps.
There is a really great jQuery plugin available: SuperSized
Not only does it do background resize, but has lots of other options. Hope it helps!
Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]
It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D
Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.