So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.
Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.
I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.
Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/
Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit
Related
I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!
I recently found a codepen with some JavaScript which creates a cool looking node effect: http://codepen.io/thetwistedtaste/pen/GgrWLp
as well as this 'glitch' effect on text using #keyframes animation:
http://codepen.io/anon/pen/YyjLJZ
I wanted to implement both on my practice website but I'm finding it hard to place the text on top of the canvas with the animation.
Here is what I have at the moment:
http://codepen.io/anon/pen/EVeVvE
What I want to achieve is the 'TEXT' to be in the centre with the glitch animation as well as the moving nodes in the background.
Is this possible?
I've tried adding a z-index to the wrap class but I don't think I'm using it correctly.
Here's what it looks like:
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
Do I need to add a z-index to every frame of the animation? Would anyone be able to help me out with this please?
Without using the z-index, the animation works fine but the text appears at the bottom of the page which is where I don't want it to be.
This works in the latest versions of Safari and Chrome, however the clip property is deprecated and may not work in certain browsers. clip-path should be used instead, and it will need vendor prefixes. See this CodePen for a demo.
Hi Stackoverflow,
I have some questions.
1) The image behind the black circle will be a full-width responsive slider. How can I put this image behind all the elements, in a way that Internet Explorer doesn't bug everything?
I know I can use position: absolute with z-index, but since I always had problems with IE and positions, I don't know (really), a better solution.
2) The background image of the black circle is also from the slider. Each BG it's directly linked with a image. Example: this colourful image will be linked to this black circle bg. Next slider will be another image with another bg.
How can I do this? :/
Try this:
As you said, set the position and z-index to the black image and append the same to body of the html page. Then change the slider images as earlier.
I hope it will work.
put the background image as a DIV and the next DIV "contents" will have all the contents
eg:
----contents ----
</div>
CSS
#bg-image {
background: url('http://t2.gstatic.com/images?q=tbn:ANd9GcSsYV2xklhQlwOFsqPY8OrL69n2F_naug6eShy67xcKm6QRFWmqXw');
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#contents {
background: none;
width: 100%;
height: 100%;
position: absolute;
}
-- Take a look here Background image swap full
-- Other option is, Make a large size image and place it on background.
-- This is with css. Check this link perfect full page background image
Since the black circle doesn't change, what I did was: putting the black circle and the background image in a same image. And I just had to "control" the position of the text. It was a dumb solution, but it solved.
I have a news tab where whenever an user clicks it, the popup box shows up with the details, however I want the background or the body tag itself to dim so I wrote:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
However the box itself dims either. Is there a way to make the box ignore this command? Or maybe there is another way around?
As body contains the #pbox then the box itself will be subject to the 50% opacity you have applied. A better method would be to overlay a semi opaque div over your entire window, and then position #pbox above it, a little like so:
#overlay {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
display: none;
}
#pbox {
z-index: 1;
}
So here you have the white #overlay div appearing over all your content with 50% opacity. Above it is #pbox with a z-index specified to ensure it appears on top.
The jQuery code would be a little like this:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("#overlay").show().css({"opacity": "0.5"});
});
Unfortunately, there isn't. Since the popup is inside the body tag, it is included in the change in opacity.
The only way to do this would be to make an overlay layer which covers the entire body and is translucent, and then place your popup above that.
I don't know if this is possible and I already tried searching for a solution, however no luck at all.
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?
I would possibly solve it like this: try demo
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.
Try something like this -> http://jsfiddle.net/3wU6C/5
try to define an element - or append it via js - as first node in the body, e.g.
<div id="load">Please wait</div>
with this style
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when load or DomReady events occur