I've been looking for this for some time but I can't find any ways...
My webpage has a square texture as background and this texture is set on repeat to fill the background.
When someone enters my website for the first time, the texture loads like a puzzle, every square one by one.
Is there a way (any way) to delay the webpage from being displayed until the background loads?
The only thing I found so far is related to hiding and unhiding a div with onclick event.
CSS Code for background:
html {
background: url(/background.jpg) center center fixed;
background-repeat: repeat;
position: relative;
}
EDIT: I've added a better solution. It's a lot simpler and more straightforward than my first suggestion.
Solution 2:
You load the background-image in Javascript. Then you set the background-image on the body element (or whatever element you had in mind). Once the image is loaded, you hide a loading (spinner) element that was above the main content.
Here's a JSFiddle of that.
Solution 1 (old and more extensive):
It's a little more creative and extensive, but should get the job done.
Basically, instead of using a CSS background, you use an HTML5 canvas. On that canvas you draw your texture with a for loop. Once everything is drawn, you display your page by hiding the loading element.
Related
Most browsers support scroll-bouncing on websites so that when you scroll to the top or bottom of a website it "bounces", instead of abruptly stopping.
Normally the extra area exposed when the page "bounces" is plain white, but you can apply a background-color element to the <html> tag, and this extra area will take on that color(You can see this described, and in action here: Example Site)
Here you can see the scroll-bouncing with a custom color, instead of the white:
The effect I want to achieve is that when the page bounces, the scroll-bounce area has a background-image, instead of just plain color. I think this effect could look nice with some simple icons tiled with the branding of the site. I remember seeing this effect a few years ago on css-tricks.com, but I don't know how the effect was achieved, or if the way it was done has since been deprecated.
From what I understand, it's not possible to add a background-image property to the <html> tag, but is this possible through a work-around? Perhaps cancelling out scroll-bounce behavior with the overscroll-behavior property, and creating a similar looking effect with javascript when you scroll above or below the edges of the page?
Not sure if this will work (as i haven't tried it), but you can take an image element with position: absolute/fixed (absolute or fixed depending on where your img tag is placed) and set - bottom: <height of the image> and left: 0. This way the image technically exists above the viewport and will only by visible if you tried to scroll past the navbar which will cause the bounce effect.
I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.
Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.
Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.
Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that).
Kindly take a look on this fiddle. It'll show where i am.
Thank you..
This is simple matter of adding a giant box shadow to the moving div.
No extra elements required.
Unprefixed CSS
box-shadow: 0 0 0 9999px black;
JSfiddle Demo
Try using CSS Masks:
Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.
CSS:
-webkit-mask-image: url('image.png');
More info here:
http://thenittygritty.co/css-masking
and here:
http://www.html5rocks.com/en/tutorials/masking/adobe/
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).
Ok so I've done some looking around and couldn't find a good enough answer to this question.
Basically what I'm trying to do is minimize my websites header when a button is clicked.
Heres the CSS: http://emstectest.site44.com/style.css
I've been playing around trying to get this to work but here's the problem, I'm trying to make the background image, which is a dark blue divider colour which seperates the header and body move up when the expand link is clicked (using :target on the #header style).
But I've tried something like:
#header:target { background-position: center -300px; }
but the only thing that actually moves the background image is when I do:
body { background: url (PATH) repeat-x center -300px; }
Any help on this would be greatly appreciated. I'm holding back on using Javascript on this due to my lack of knowledge in the area; that and the fact that I want load times to be the main priority.
Another question as well as this would be: is there also a way to animate this process using -webkit- or would I have to use Javascripting again?
Thanks in advance.
- James
From the w3schools.com
Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Look at an example here
Your image has a fixed width of 440px so if you are trying to reduce the height if it you'll need to adjust it's proportions.
I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.
I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.
I'm doing this kind of thing multiple times and unfortunately I'm getting slow down.
Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.
Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?
Thanks for your help.
I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.
Anyway...
It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.
There are two things I have tried and for the most part they have been successful.
If you add -webkit-transform : translate3d(0,0,0) to the covering element, you should find most, if not all of the image decodes disappear.
If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or indeed try adding it to both elements.
My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.
90% of the time I have found one of the above combinations successful. I hope it helps.
How do you animate the property? I think you may have plenty of alternatives to just animating the height (which is some sort of resize of the container).
Maybe it's less intensive to just 'clip' the background image with another element. I found a thread about it on StackOverflow with some suggestions. If you animate with javascript, unfortunately pseudo elements are no option...
Clip/Crop background-image with CSS