Stickman (The power of CSS)

Sword 2h Sword Dagger Warhammer Dual Dagger Bo Staff Battle Axe reset

Stickman was a project I gave myself to mess around with css transitions. Click some buttons. All animation you see is powered by css. I simply use jquery to swap a class on the top level div and style handles the rest. I eventually want to use something like this to display characters in Light Gray RPG.

AC Pop

code example ac pop watch sample coding
AC Pop | click me

All over this site I am using a custom pop up function I created.

Feel free to use this simple pop up on your site. Just use the markup below and add the CSS and JS to your site.

HTML:

the 'data-pop' attribute activates the magic

<figure class="gal" data-pop>
	<img src="img/photo/macro/IMG_3665.JPG">
</figure>
JS:

This function toggles the .full class when clicked. Make sure you have jquery on your page.

$('[data-pop]').on("click", function () {
$(this).toggleClass("full");
});
CSS:

This makes the figure and image full screen when .full is applied

[data-pop].full {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
background: #111;
text-align: center;
z-index: 1;
}
[data-pop].full img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

So there it is, a super simple, super light pop up that always keeps the full screen image at max size without any cropping. There are optional features I have baked in like caption display and gallery support with next and previous buttons. Feel free to view all the source and add those in if you like.

AC ARC CORE