RLM
Members
-
Joined
-
Last visited
-
-
It's been a long time (16 years lol) Just having a play with this. I am using grid for overlays. Reasonably new to me, but if you set two elements to the same 'area' they will overlap. This is vanilla CSS not bootstrap. You may be able to extract something from it, I don't know. codepen link here It is responsive, but would benefit from having a non-cropped cat edit: having issue formatting a link here `[link](url)` doesn't work. Can you not use basic markdown here? https://codepen.io/rpg2019/pen/YPzmpWR Have also noticed that the OP posted back in January, so may well be long gone. Only just noticed sorry.
-
Here you go a simple image reveal http://3dwork.pixel-shack.com/BGFade.html Cheers RLM <html> <head> <title>Fade Image</title> <style type="text/css"> body {background-color:black} #backImg { display : block; width: 500px; height: 375px; position: absolute; background-image: url("ASSETS/Megalania.jpg"); background-repeat:no-repeat; opacity : 0; filter : alpha(opacity=0); } </style> <script type="text/javascript"> function init() // Function called from window.onload { var img = new Image(500,375); // Preload image img.src = "ASSETS/Procopt2.jpg" var imgBG = document.getElementById('backImg'); // search DOM for div id backImg var opac = 0; // Initial opacity var delay = 50; // delay between opacity steps in milliseconds fade(); // call fade function function fade() // simple reveal function { opac+=2; // increment opacity variable imgBG.style.opacity = opac/100; // set the opacity style property for mozilla imgBG.style.filter = "alpha(opacity="+opac+")" // set the opacity style property for IExplorer if (opac<100) {setTimeout (fade,delay);} // recursively call the function until opac is 100% } // All over } window.onload = init; // As we are accessing the DOM. The page needs to load first before executing any javascript. </script> </head> <body> <div id="backImg"></div> </body> </html>
-
I'm only beginner status myself, but a few key things you'll need. An ID tag for your background image. A bit of knowledge about the DOM (Document object model) and navigating it. You'll want to be able to access that image with something like var imageBG = document.getElementById('BGImg'); That points to maybe <div id="BGImg"></div> in your html and in turn #BGImg {background-image: url("MyImage.jpg");} in CSS. You'll want to look into setTimeout. You use this to call a function with a delay period. If you use it to call the function it's in i.e. recursively then you have a loop. Add a condition i.e. image is now 100% and return. Not syntax accurate. just a rough idea. var opac = 0; var delay = 20; function fade(){ opac++; imageBG.style.opacity = opac/100; // For mozilla imageBG.style.filter = "alpha(opacity="+opac+")" //For explorer if (opac<100) {setTimeout (function(){fade();}), delay)} } I'm well tired, so that's v.rough. Hopefully it will give you some ideas Here's a slideshow fade I've been working on. Obviously you can view the source and it is commented. http://3dwork.pixel-shack.com/FadeTest.html Cheers RLM
-
Hi, I'm interested in this post, specifically with regards SEO and database driven galleries. I work with a friend here in Thailand producing 3D illustrations for various book publications in the UK. Some years ago I put a gallery site together with hundreds of our Dino illustrations. I had no expertise and the site was badly put together as static html. The good thing however is that our images still do reasonably well on google image searches. (http://critters.pixel-shack.com) A few years later I made another gallery website of my 3D artwork, this time however I went down the route of PHP/MYSql (http://rpgdigital.pixel-shack.com).It really is a nice way to work, and making updates to the gallery is a breeze. The downside though is that it's absolutely crap when it comes to google image searches. It's come time to update the older static site, as we have hundreds of new images, and I'm thinking of sticking with the static site option, but with CSS and Javascript to enhance it. Is this wrong? Cheers RLM
