Develop Reference

How to run css transition using javascript when element is in the middle of the screen

I'm currently making my website more mobile-friendly, but :hover doesn't work on mobile. I have buttons and other elements with hover transition effects so I thought the next best solution would be running the effect when the element is in the middle of the user's screen, like how on the youtube app it will start playing the beginning of a video if it is in the middle of your screen. How do I use Javascript to detect when an element is vertically in the middle of a user's screen, let's say somewhere in the range of 300px to 600px, and to apply a css transition, like changing the color from white to red over 1 second?

A Movie-type page-transition ? CSS

I've been searching for a way to realize a page-blend, but I can only find help for specific animation properties..
What I would like is to have every page-change on my website to get a fade out and and a fade in, like you would between shots in video editing, just a very short and smooth transition. And, ideally it would fade all elements of page X to the background color and fade back into pageY as soon as every element on it is loaded.
Is this a big one? I haven't seen it anywhere but I always wonder if that would be possible - to get a smooth experience without having to see elements load and reposition quickly between page changes?

How do I make an image blink on javascript?

How do i make a specific image on code.org, which is in javascript, blink, Im making a simple game where you click a ball and it moves around the screen, but i also want to make it blink so the ball disappears and comes back again, I know you can do it with texts but I have a button, that is an image and cant seen to figure it out.

Nowadays you probably would use CSS animations for running simple animations like blink effects and use Javascript to initiate the animation. Something like what's mentioned here should do the trick:
Imitating a blink tag with CSS3 animations
Just toggle the class to start/stop the animation.

Setting a Revolution Slider 5+ layer to appear as a static layer

I would like to have a shape beneath my text on all slides to remain static throughout and not flicker in and out.
I know that Revolution Slider has an option for static layers, but it doesn't allow you to layer it beneath layers in other slides, it's always on top.
I tried creating a layer in each slide with 0 transitions, but when I set everything to 0, it disappears.
How to I either:
1. Create a static layer that can be layered beneath other layers
2. Set the transitions on my layers within slides to eliminate transitioning in and out so that the layer appears to be a static layer?

That's a good question because there is probably no way that you can do that perfectly in revolution 5 if you don't want to use background image beneath the text.
This should be handled with static/global layer for the layer that is on the bottom, but rev5 will always override your z-index (or anything else that you try in this manner) and it will always appear on top. So nothing here.
Other thing to do is to put this layer on every slide, always on the same position and turn off all animations on that layer so that he behaves static on every slide. But rev5 altough you defined that there is no animation uses animation speed parameter and that layer will flicker again. If you put that the animation speed is 0, the layer will dissapear. Why is that probably creators of the slider doesn't know either.
Only thing that I think you can do is to trick him to appear like you want, it will not be perfect, but maybe acceptable.
So on the bottom (static) layer click on the Animation in the menu above and choose No-Animation and No-Out Animation. Since you can't put 0 to animation speed we will put the speed 100 for in animation and 1000 for out animation. In this way out animation will be long enough to appear that the layer is animating continuous - that is static. But even with this the layer flickers slightly, but much much less then before, so maybe the effect is acceptable.
You can play with fade in instead of no-animation, and with animation speed numbers, trick is that the out speed last long enough for the in speed of the next slide to kick in.
I hope this will help, I would also love for rev 5 creators to solve this issue.

I run into the same problem today, and i don't agree with the accepted answer, because you can easily change the z-index of static layers with a css override.
Revolution slider has a build-in custom css editor, so go to your Slider settings, scroll to the bottom and add:
.tp-static-layers {
z-index: 0;
}
Done, all static layers will appear beneath normal layers.
EDIT
With newer versions of revslider each slide <li> container has a z-index. Try the following css.
.tp-static-layers {
z-index: 1;
}
ul.tp-revslider-mainul > li {
z-index: unset !important;
}
NOTE: Not fully tested, it's possible this may interfere with animations.

Feathered clipping mask for jCarousel

I have a set of images scrolling continuously with jCarousel. Only one image is fully displayed at a time, and I would love to be able to "feather" the edges of the carousel so the images fade in and out as they traverse visibility.
Hopefully that makes sense.
Also, the carousel's motion seems a bit buggy at times. On occasional page loads it seems like the animation and/or auto parameters in the initialization of the carousel aren't being implemented properly, causing the carousel to either move quicker than expected, or delay longer, etc. Thoughts?
Edit to add: Is there possibly a way, in lieu of a true clipping mask, to use one of jCarousel's callbacks to perform fadeOut() on an image as it moves out of the carousel's focus (and then fadeIn() as an image moves into focus)?

Here is an example of jcarousel with feathered edges
Technically it isn't really feathered, there's just semi transparent PNG over the top. I don't think there is a way to have a true feather

One way to do it would be to make a transparent PNG with gradients that fade from transparent to the color of the background of your carousel, and use CSS position:absolute with a higher z-index than the carousel container div to place it on top. Here's a page with some examples- pay attention to the transparency section in particular.