We Keep Coding

Add a crossfade transition (between image) for custom carousel

I am following this tutorial on how to create a web accessible carousel slider (https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html), and I am stuck on how to add a crossfade transition between images. I would like this to be similar to the bxslider (https://bxslider.com/) type of crossfade transition. Can someone point me in the right direction?
The codes are in codepen (click on the 'Open In CodePen' button from the link above)
I have tried adding some css styles codes (using javascript) to the 'hideTabpanel' and 'showTabpanel' functions, no luck.
Also, I've tried adding new classnames to the active slide using javascript and included css styling, again, no luck.

how do I add a javascript scroll effect?

I'd like to add a scroll effect whereby instead of jumping instantly to the anchor down the page, when you click a link at the top it rolls smoothly down the page. Haven't had any luck yet. It's common in bootstrap websites:
bootsrap template

You can use this for example:
https://www.solodev.com/blog/web-design/adding-an-animated-scroll-down-anchor.stml
Basically, you want to play with the scroll (controller via javascript) to me smoothly to the final position (anchor position). There are many ways you can achieve that.
There's also this post here about it:
Smooth scrolling when clicking an anchor link

How to stop image from moving downward when scrolling?

I have created a header image of about half a page. When user scroll down the images goes down with scrolling as well. I want the image to go up and hide and does not effect the content beneath it. I have checked many single page websites websites where images are on some place and when scrolling they goes up and down with scrolling and does not effect the other things.
I tried to use position:fixed but it didn't work, position:relative is also effecting the content beneath it.
Example of what i want : http://www.piedpiper.com/
Kindly tell me how to do this.

Set position:fixed for parent element of image.

rdio Player Footer Slider

Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?

We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238

Plugin for having elements "fly" on/off screen when scrolling

does anyone know of a javascript/jQuery plugin that will "fly" elements onto and out of the screen as I scroll down a page?
To better describe:
I'm picturing a long, vertically scrolling page, where all the content is in little "content boxes", then as a result of different actions (in this case, as a result of scrolling), I want these boxes to be able to fly onto or off the screen.
Maybe this could be described as some kind of cross between jQuery animate and parallax scrolling?
I feel like I've seen that type of effect somewhere before and I just can't remember where...

Here you go... http://johnpolacek.github.com/scrollorama/

I'm not sure of the exact effect you want but I would use a css class that gets applied/removed to containers depending on the scroll position.
You can animate the change with css transitions.

WOW.js
Reveal CSS animation as you scroll down a page. By default, you can
use it to trigger animate.css animations. But you can easily change
the settings to your favorite animation library.