Develop Reference

The right method for animation once the page is loaded?

I would like to set up animations of appearance once the page loaded. The problem is that before the CSS is loaded the elements arrive suddenly, and finally, once I have all that is loaded I have my animation that starts. It's not very cool visually.
The solution that I came up with defaults opacity on the container! Not sure, The problem is that if the browser does not support animations, the user will see the site with an opacity of 0. In other words, he will not see anything.
So are there ways to do it?
PS: I tried a lot of searches on Google without ever finding the answer to my question, maybe I have not used the right terms.

Keeping browser compatibility in mind is very important. However, your desired result can be achieved with CSS Animations and little stress: https://caniuse.com/#feat=css-animation.
If you provide some HTML and CSS a more specific answer could be provided. But, I would recommend defining keyframes for each element you want to animate (several could use the same one if desired) and use this for a one time animation at site load. No JS necessary.

Skrollr. change content in fixed div

I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.

Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).

Background color won't extend past visible area in a div box with scrollbars

[CLOSED]
On this page, there is a div box which holds a code example, where a certain line is supposed to be given a background color. This background color is actually done by using regular expressions to replace a start and end symbol with the code to make a div with our red background. This works fine, we have our red background, the regular expressions are doing their work.
However, if we scroll over a bit in code box, we notice that the red background color stops where the actual edge to the code box is (but we can scroll over, so it's not the end). This should illustrate what I mean:
I've tried pretty much every CSS value I could think of with firebug, including trying every possible overflow option. With width, if I manually give an absolute width, it can extend it further, but this won't do because the background coloring is generated automatically, with javascript using a method with good fallback in case the javascript fails to load or is disabled.
So, does anyone know a way to get those backgrounds extending all the way to the end? I considered counting the characters, but since the background colors often cover more than a single line, and even hundreds of lines on some other pages, it seems impractical and rather resourcy. A CSS method would be prefered, though should it come to it, I'll go with a javascript fix.
If you want to take a look at the page for yourself, feel free, that one is just a sandbox to show the specific problem, and the script that replaces certain comments with div elements to make this background image is found here.
Thanks in advance for any help and/or advice.

<pre> and overflow:auto doesn't play nice together, and is likely the base of your problem.
Try to use a <div> as scroll container instead.
So:
<div style="overflow: auto">
<pre>
...content...
</pre>
</div>
Instead of
<pre style="overflow: auto">
...content...
</pre>

HTML Buttons with animations

I'm trying to create several buttons that have 4-5 frames of animation in them, and rather than using the typical CSS method (where 1 image has both states, and CSS toggles between top and bottom), I was curious if anyone had an idea on how to do this with 4-5 frames rather than 2. Obviously CSS alone can't make this happen - but its becoming a real challenge to find ANY info on this. Because the images have individual animation, I can't simply use the opacity to fade into the new image, it has to contain all 4-5. Any help would be much appreciated!
Zach

have a look at k10k and see how the buttons in the top are done: animated png's and animated gifs ;)

The only way I can think of to do this without JavaScript would be for the hover state to load an animated GIF for the background image. Otherwise, you'd have to use something like jQuery to animate the background-position property instead.

for this you'll need to use an animated GIF. if you don;'t have a animated GIF creation tool installed, either use Photoshop, which may be massive overkill, or one fo the free tools like GIFted motion

A very non-traditional frowned upon way this can be done is to...
-Animate them as a flash object. Export the xml/flash and imbed it into the htm

Repeating a section of an image in CSS

I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?

You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve

Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.

If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.

CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.