jiggy1965
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by jiggy1965
-
It's a background image. Managed to create a simple demo: http://codepen.io/anon/pen/XMVRmp There is a 300x250 rectangle div and in that a 600x500 image of Lady Gaga. Which starts at coordinates 0,0 of the 300x250 rectangle. However Gaga should align at bottom of the 300x250 rectangle and then centered to that. What I'm trying to achieve is that the starts centered and to the bottom of the 300x250 div and then zooms out while staying aligned center-bottom until Gaga is also 300x250. That part I get, by using a 50-100% transformpoint and using scale. But first she would have to start centered-bottom of the 300x250 to begin with. How can I do that?
-
I've got a background image of 600x500. I wish to position that in a 300x250 area. The bottom of the image should be aligned to the bottom of the 300x250 area and then horizontal centered. So more or less like this: After that I would zoom the green rectangle towards the red rectangle from its 50%/100% transform point. But how to I position it bottom aligned and centered at the first place?
-
Ah never mind, I did found this with cross browser support , but that dealt with css gradients, not svg. I think I can progress with the svg code you wrote, Carl
-
Thanks Tested it in Chrome, Safari and Firefox (Mac) and they all appear like I want them too. But if anyone can give some things to consider for browsers that might not produce the same effect? Perhaps some backup code to add?
-
I've got this simple SVG of a rectangle with a gradient: <svg id="mysvg" data-name="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 336 280"> <defs> <linearGradient id="linear-gradient" x1="0" y1="280" x2="336" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#e51dc1"/> <stop offset="35%" stop-color="#e51d6a"/> <stop offset="100%" stop-color="#e51d28"/> </linearGradient> </defs> <title>gradient</title> <rect width="336" height="280" fill="url(#linear-gradient)"/> </svg> Now I wish to tween of the 35% stop offset value to 80% and then back to 35% again. The stop-colors should stay as they are, just the stop offset of the middle gradient color should shift back and forth from 35% to 80% and back again. But how do I do that?
-
Already solved: forgot to add display:inline-block for span tag
-
I'm trying to create a text effect where each character tweens in to form a sentence. For that I've put each character in a span tag. Insteads of tweening in while rotating and stuff each character simply appears one after the other. So what am I doing wrong?
-
I'm using $(window).load to set the visibility of my 'container' div back to visible again once all DOM has been loaded. This works when I'm using a downloaded copy of jquery. But when I use the Google hosted version it's not? That's what I've found out anyway. Or perhaps I'm doing something wrong? I've shortened my test code to below <!DOCTYPE html> <html> <head> <style> body{ background-color:#3a90eb; } } </style> </head> <body> <div id="container"> TEST </div> <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(window).load(function() { alert("success"); }); </script> </body> </html> It should show an alert box when all is loaded, but it doesn't when I open the html. It does however open an alert box when I use $(window).ready instead. @(window).load does work when I reference a local Jquery library file. So is there a reason it doesn't work when I use a Google hosted version instead?
