We Keep Coding

How to clear opaque affixed divs height?

Using Bootstrap and a bunch of custom CSS for social media icons (located here), I created a pen to demo (and test) my code. The goal was to create icons that would automatically fit there parent div (horizontal or vertical, etc), and I have everything working except for one small problem. I have both of the divs affixed (one horizontal, one vertical), and 100% opaque before the affix is triggered. However, and I know why, the view is still being rendered with what basically looks like a giant margin between the top of the document and the page title. How can I clear this, while still using display:inline-block?
Here is the CSS for the related divs & classes, but I'd recommend checking out the pen first because visually seeing it expalins the issue much better.:
.snav {
top:50%;
margin-left:-15px;
background: rgb(0, 0, 0);
width:5rem;
height:25rem;
display:inline-block;
z-index:99;
transition: 1s all ease-in;
transform: translate(0, -50%);
opacity:0;
}
.horiz{
top:0;
margin-left: auto;
margin-right:auto;
z-index:99;
left:50%;
transition: 1s all ease;
transform: translate(-50%, 0);
opacity:0;
display:inline-block;
}
#horiz{
background: rgb(0,0,0);
width:26.6rem;
height:5rem;
}
.affix{
opacity:.5;
}
.affix:hover{
opacity:.9;
}

The gap between the top of the page and the title is because the social icons widget is still within content flow.
Try adding position: fixed; to the .snav style rule to take it out of content flow and the title will go to the expected position.

Can anyone help me figure out how to do this Javascript?

I saw this website http://www.montere.it/?lang=en and I love how they use the Javascript on their website. When you scroll down, the image will slightly appear and flip. I have tried so hard to find the sample online but none of them are like this. Or at least can anyone give me the website that has the Javascript collection.
Appreciate for all your help.

I ripped the CSS animation code straight out of their page
#keyframes flipInY {
0% {
-webkit-transform:perspective(1000px) rotateY(20deg);
-ms-transform:perspective(1000px) rotateY(20deg);
transform:perspective(1000px) rotateY(20deg);
opacity:0
}
100% {
-webkit-transform:perspective(1000px) rotateY(0deg);
-ms-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
opacity:1
}
}
.flipInY {
-webkit-backface-visibility:visible !important;
-ms-backface-visibility:visible !important;
backface-visibility:visible !important;
-webkit-animation-name:flipInY;
animation-name:flipInY
}
.animated {
-webkit-animation-duration:.7s;
animation-duration:.7s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
Run JSFiddle http://jsfiddle.net/4of7L5aL/4/
Basically when the user scrolls, you add the animated class to the element.

AngularJS ng-show animation cross-fade inside ng-repeat

Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam

You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!

This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.

You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.

Pre-Rendering an animation on a canvas in javascript

I have a web app that uses the canvas to animate a tree that is drawn onto the screen. It does so by doing several trig calculations in a row. When you click the "grow" button there is an animation of a tree growing that has the certain attributes that the user can change. You can see the application here http://pastehtml.com/view/c85mxfgcj.html.
The problem is, if you set the "age" (the number of iterations to go through) too high, the animation starts to lag due to the calculations that the computer has to do. I was wondering two things:
Is there a way to pre-render the animation before it is shown to the user?
Is there a way to make it so that if I have a tree that has already been rendered and I wanted to animate it moving around the screen I could do that without having to re-draw the tree every single frame?
Thanks.

1: you might want to look into var fragment = document.createDocumentFragment();
2: yes via css, is much faster!
I think this youtube video will be worth your while.
Good luck
UPDATE: 9 Jan 2013
Just stumbled over this.
In css3 there is a animation feature using steps.
Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas).
It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that gif using the data:image/gif protocol), but the end result still looks the same in the (modern) browser.
HTML:
<div class="hi"></div> or <img src="transparent.gif" class="hi">
CSS3:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play 1s steps(10) infinite;
-moz-animation: play 1s steps(10) infinite;
-ms-animation: play 1s steps(10) infinite;
-o-animation: play 1s steps(10) infinite;
animation: play 1s steps(10) infinite; }
#-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
Example jsfiddle.

Adding a fade transition to Daniel Nolan's img rollover javascript

Ok I have realized that there is a ton of stuff about fading images with javascript, but none of them do what I would like.
Daniel Nolan's DOES.
His script allows me to simply add class=imgover to an image, and the result is a nice image swap. All I have to do is make the second image and add _o at the end of the filename. This is the best and simplest way I've seen. I don't need fancy jQuery transitions and I don't want to add extra markup in my css by adding background images. All I want is a nice fade transition between the images. Trust me I've looked at several jQuery tuts on image swaps.
All of the jQuery tuts I've seen require extra markup per image. I have several images on my page that will need the image swap. Most tuts online assume you only need one image on the page that needs the effect.
How can I add a fade transition to Daniel Nolan's img rollover javascript? I'd like to do that if possible, but I can't seem to get it working.
http://www.dnolan.com/code/js/rollover/
Raw Code

You could do something like this with pure CSS3, no Javascript...
HTML:
<div id="container">
<div id="roll"></div>
<div id="under"></div>
</div>
CSS:
#container {
position:relative;
width:50px; height:20px;
}
#roll {
background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
cursor:pointer;
opacity:1;
width:50px; height:20px;
position:absolute; z-index:2;
transition: all ease 2s;
-moz-transition: all ease 2s;
-webkit-transition: all ease 2s;
}
#roll:hover {
opacity:0;
transition: all ease 2s;
-moz-transition: all ease 2s;
-webkit-transition: all ease 2s;
}
#under {
background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
width:50px; height:20px;
position:absolute; z-index:1;
}
Demo

This is the best way:
A better implementation of a fading image swap with javascript / jQuery
It has the same premise of Daniel Nolan's script but it has a fade and it's jQuery.