实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>多款超酷动画效果的Lightbox特效-download by http://www.codefans.net</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="Boxaroo/css/jquery-Boxaroo-1.8.min.css"/>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Boxaroo/js/jquery-Boxaroo-1.8.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxaroo-skin1').Boxaroo({"skin":1});
$('.boxaroo-skin2').Boxaroo({"skin":2});
$('.boxaroo-skin3').Boxaroo({"skin":3});
$('.boxaroo-skin4').Boxaroo({"skin":4});
$('.boxaroo-skin5').Boxaroo({"skin":5});
$('.boxaroo-skin6').Boxaroo({"skin":6});
});
</script>
</head>
<body>
<!-- SLIDER -->
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<ul>
<!-- THE FIRST SLIDE -->
<li data-transition="slotfadevertical" data-slotamount="10" data-masterspeed="5000" data-thumb="images/slide1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="images/slide1.png" data-fullwidthcentering="on" alt="slide 1">
<div class="caption lfl stl"
data-x="0"
data-y="-50"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
<img src="images/headerkangaroo1.png" width="675px"/></div>
<div class="caption rev-green lfl stl"
data-x="480"
data-y="235"
data-speed="450"
data-start="800"
data-easing="easeInOutBack" data-end="8500" data-endspeed="300" data-endeasing="easeInSine" >
boxaroo</div>
<div class="caption rev-green2 lfl stl"
data-x="480"
data-y="290"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
jQuery lightbox plugin v1.8</div>
<div class="caption rev-green2 lfl stl"
data-x="480"
data-y="325"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
make it yours.</div>
<!-- THE SECOND SLIDE -->
<li data-transition="slideup" data-slotamount="15" data-masterspeed="5000" data-delay="9400" data-thumb="images/slide2.jpg">
<img src="images/slide2.png" data-fullwidthcentering="on" alt="slide 2">
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="100"
data-speed="450"
data-start="800"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• HTML5, CSS3 and jQuery</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="150"
data-speed="450"
data-start="850"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• no experience needed</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="200"
data-speed="450"
data-start="900"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• simple setup with only 3 lines</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="250"
data-speed="450"
data-start="950"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• includes 60 GraphicRiver items</div>
<div class="caption rev-green2 lfl stl"
data-x="250"
data-y="300"
data-speed="450"
data-start="1000"
data-easing="easeInQuad" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
• lightning fast customization</div>
<div class="caption lfl stl"
data-x="505"
data-y="-250"
data-speed="1100"
data-start="800"
data-easing="easeInOutElastic" data-end="9100" data-endspeed="300" data-endeasing="easeInSine" >
<img src="images/headerkangaroo2.png" width="859px"/></div>
</li>
</ul><div class="tp-bannertimer"></div>
</div>
</div>
<!-- HEADER -->
<header class="header-container">
<div class="header-elements container">
<div class="row span_12 no-margin-col logoblock">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<h2>unique presentation environments without coding experience</h2>
</div>
</div>
</header>
<!-- AD ICONS -->
<section class="container clr">
<div class="row row-big-col">
<div class="col span_12">
<div class="presentation-box">
<img src="css/images/medium_content_box1.png" alt="medium_content_box1">
<h4 class="text-align-center text-bold">Adaptive</h4>
<p class="text-align-center">Automatically adapts to any device dimensions and resolution.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box2.png" alt="medium_content_box2">
<h4 class="text-align-center text-bold">Skin System</h4>
<p class="text-align-center">Ships with 6 carefully crafted Skins to choose and customize - or build your own.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box3.png" alt="medium_content_box3">
<h4 class="text-align-center text-bold">Components</h4>
<p class="text-align-center">A building-block approach for <br>unsurpassed customization.</p>
</div>
<div class="presentation-box">
<img src="css/images/medium_content_box4.png" alt="medium_content_box4">
<h4 class="text-align-center text-bold">Simple Settings</h4>
<p class="text-align-center">No complicated CSS or strict HTML.<br> Built for beginning and advanced users.</p>
</div>
</div>
</div>
<!-- SKINS -->
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Default Skins [ 1 Simple Setting ]</h3>
</div>
<p style="font-size:16px;">Boxaroo is created for all experience levels and only requires 1 setting - the Skin - making it easy enough to use if you're new to HTML. Once a Skin has been loaded, any additional settings you apply will automatically override Skin settings - allowing Boxaroo Skins to act as customization launchpads. All of the demos below are setup using only 3 lines.</p>
</div>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/skin1.jpg" data-boxaroo='{
"counter_control":"true,Skin,of"
}'>
<img src="images/thumb1.png" alt="Skin 1" class="boxaroo-skin1" title="Skin 1" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin2.jpg"
data-boxaroo='{
"counter_pos":"15,13",
"caption_pos":"15,13",
"counter_control":"true,Skin,of"
}'>
<img src="images/thumb2.png" alt="Skin 2" class="boxaroo-skin2" title="Skin 2" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin3.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb3.png" alt="Skin 3" class="boxaroo-skin3" title="Skin 3" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin4.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb4.png" alt="Skin 4" class="boxaroo-skin4" title="Skin 4" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin5.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb5.png" alt="Skin 5" class="boxaroo-skin5" title="Skin 5" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/skin6.jpg"
data-boxaroo='{"counter_control":"true,Skin,of"}'>
<img src="images/thumb6.png" alt="Skin 6" class="boxaroo-skin6" title="Skin 6" rel="Boxaroo Skins"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br><br>
</section>
<div class="see-through full-see-through">
<div class="container clr">
<h2>More than Presets</h2>
<p>Skins get Boxaroo up and running quickly with 1 setting, but also act as a starting point for customization. You can apply a Skin to an entire gallery, then optionally continue customizing the gallery using additional settings. Boxaroo settings can also be applied to specific images inside the gallery using the data-boxaroo attribute.</p>
</div>
</div><br/><br/><br/>
<!-- COMPONENTS -->
<section class="container clr"><br>
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Components [ A Building Block Approach ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Preloaders</h3>
<ul class="inline-ul">
<li><span class="gray-text">10 Customizable CSS3 Preloaders</span></li>
<li><span class="gray-text">GIF for Legacy Browsers</span></li>
</ul>
<p>Configure multiple colors and timing options for any of the 10 CSS3 Animated Preloaders. Similar GIFs will automatically be presented for Legacy Browsers. Each Lightbox can have it's own unique Preloader.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Captions</h3>
<ul class="inline-ul">
<li><span class="gray-text">Finally full control</span></li>
<li><span class="gray-text">over styling and placement</span></li>
</ul>
<p>Each Lightbox Item offers full and independent control over its Caption Styling, Animation Settings, Visibility, Scaling, Position, Scaling Ranges, Gallery Name, and more. Captions can be different for every Lightbox.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Counters</h3>
<ul class="inline-ul">
<li><span class="gray-text">Showing progress</span></li><br>
<li><span class="gray-text">with style</span></li>
</ul>
<p>The Counter records a user's progress through a Gallery. Instead of generic text, you can customize it to say whatever you like - per Lightbox. You can also swap positions, control language / scaling options and much more.</p>
</div>
</article>
</div>
</div>
<!-- COMPONENTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12" style="margin-bottom:20px">
<section class="slider">
<div class="flexslider about-us-slider">
<ul class="slides">
<li><img src="images/compslide1.png" alt="Boxaroo"></li>
<li><img src="images/compslide2.png" alt="Boxaroo"></li>
<li><img src="images/compslide3.png" alt="Boxaroo"></li>
<li><img src="images/compslide4.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgentrance.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,bottomright",
"frame_animation":true,
"frame_count":1,
"flip":"90,90",
"frame_speed":2500,
"frame_flip":"0,0",
"counter":false,
"caption":false,
"box_speed":"400,300,400",
"content_speed":"500,300,300",
"bg_color":"#a0ff8e",
"bg_tile":false,
"bg_pic":false,
"matte_color":"#FFFFFF",
"preloader_color":"#FFFFFF,#53f933",
"border":"5,#FFFFFF",
"frame_border":"5,#FFFFFF",
"nav_buttons":"false,false,false",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"1,1",
"drop_shadow":"0,0,0,0,#000000,0",
"frame_drop_shadow":"0,0,0,0,#000000,0",
"frame_nav_override":true
}'>
<img src="images/thumb1.png" class="boxaroo-skin1" title="Entrance & Exit Effects" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgcounter.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"lightbox_movement":"topleft,center",
"nav_movement":true,
"highlight_type":false,
"bg_color":"#dfdfd1",
"matte_size":"6,6,6,6",
"matte_color":"#cbcbc6,#c5c5bd",
"border":"1,#FFFFFF",
"frame_border":"1,#FFFFFF",
"caption_pos":"10,10",
"caption_offsets":"0,-15",
"caption_control":"false,false",
"counter_pos":"14,14",
"counter_offsets":"0,15"
}'>
<img src="images/thumb2.png" class="boxaroo-skin2" alt="Component Positioning" title="Position any Component with a simple number" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgnav.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"gradient_nav_color":"#65ff9d,#65ff9d",
"bg_color":"#2d313b",
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"nav_style":"21,21,21",
"nav_buttons":"false,true,true",
"matte_color":"#FFFFFF",
"border_radius":"15,15,15,15",
"matte_bg":false,
"border":"0,#FFFFFF",
"frame_border":"0,#FFFFFF",
"drop_shadow":"0,0,5,5,#1f2229,0.75",
"frame_drop_shadow":"0,0,5,5,#1f2229,0.75",
"matte_size":"5,5,5,5",
"preloader_style":10,
"nav_buttons_opacity":"1,1||0.25,1||0.25,1",
"preloader_color":"#4a4d55,#979799",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"highlight_speed":50000,
"highlight_color":"#e2e2ef,#e2e2ef,#e2e2ef",
"highlight_opacity":"0.15,0.15,0",
"highlight_stops":"92,96,100",
"highlight_frame_opacity":"0,0.5",
"gradient_nav_opacity":"0.25,0.25"
}'>
<img src="images/thumb3.png" class="boxaroo-skin3" title="Customizable UI" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgcolorlayer.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"scale":"1,1",
"frame_scale":"1,1",
"lightbox_movement":"bottom,right",
"lightbox_effect":"grow,match",
"bg_tile":false,
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"bg_color":"#02bb78,#292929,#e3e2e8",
"preloader_color":"#FFFFFF,#02bb78",
"border":"1,#FFFFFF",
"frame_border":"1,#FFFFFF",
"gradient_nav_color":"#3cfde5,#3cfde5",
"drop_shadow":"0,0,15,5,#22284a,0.10",
"frame_drop_shadow":"0,0,15,5,#22284a,0.10"
}'>
<img src="images/thumb4.png" class="boxaroo-skin4" title="Color Overlay" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgtile.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"counter":false,
"caption":false,
"bg_tile":38,
"bg_opacity":1,
"bg_tile_opacity":0.15,
"gradient_nav_color":"#ffb2b1,#ffb2b1",
"gradient_nav_opacity":"0.25,0.25",
"bg_color":"#e54341",
"border":"2,#e54341",
"frame_border":"2,#e54341",
"drop_shadow":"0,0,10,15,#c43a38,0.7",
"frame_drop_shadow":"0,0,10,15,#c43a38,0.7",
"preloader_color":"#FFFFFF,#c43a38",
"highlight_color":"#e54341,#e54341,#e54341"
}'>
<img src="images/thumb5.png" class="boxaroo-skin5" title="Tile Overlay" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div class="portfolio-element art">
<a href="images/bgbg.jpg"
data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption_pos":"23,23",
"caption_offsets":"10,-10",
"caption_control":"false,false",
"counter":false,
"nav_buttons":"false,false,false",
"bg_opacity":1,
"bg_color":"#2a1f3d",
"bg_tile_opacity":0,
"bg_pic_opacity":1,
"bg_pic":"images/backgroundsample.jpg",
"border":"2,#373451",
"frame_border":"2,#373451",
"preloader_color":"#fff8c0,#fffad5",
"preloader_style":3,
"gradient_nav_color":"#fffad5,#fffad5",
"gradient_nav_opacity":"0.75,0.75",
"drop_shadow":"0,0,10,5,#373451,0.35",
"frame_drop_shadow":"0,0,10,5,#373451,0.35",
"matte_color":"#dbd398"
}'
>
<img src="images/thumb6.png" class="boxaroo-skin6" alt="Image Overlay" title="Photo Courtesy of Robin Rocker - Unsplash.com" rel="Components"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Navigation Buttons</h3>
<ul class="inline-ul">
<li><span class="gray-text">Choose buttons from the</span></li>
<li><span class="gray-text">built-in Assets Library</span></li>
</ul>
<p>Changing the Navigation Buttons couldn't get easier - just pick a number corresponding to the button you like. You can change the Close, Previous or Next Buttons independently for every Lightbox Item if you like. Boxaroo will handle all the transitions seamlessly.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">HTML Elements</h3>
<ul class="inline-ul">
<li><span class="gray-text">Extend the Boxaroo environment</span></li>
<li><span class="gray-text">using 3 custom DIVs</span></li>
</ul>
<p>Ever wish you could just easily drop a bit of code into your existing Lightbox for a unique and custom solution? Each Lightbox Item has 3 unique and optional Components that you can quickly load any DIV into. Boxaroo also loads any events attached to your DIV.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Background Overlays</h3>
<ul class="inline-ul">
<li><span class="gray-text">Mix and Match 3 Backgrounds Overlays</span></li><br>
<li><span class="gray-text">Color | Tile | Image</span></li>
</ul>
<p>Each Lightbox Item has 3 unique Overlays. An Animated Color Layer will loop through any number of colors you give it. Choose from over 130 seamless patterns for the Tile Layer. Load backgrounds from a specific path, or use a number to load one from the Assets Library. </p>
</div>
</article>
</div>
</div></div><br><br><br><br>
</section>
<div class="see-through full-see-through flexibility">
<div class="container clr">
<h2>Unparalleled Flexibility</h2>
<p>Boxaroo is all about making it easy to build and customize unique Lightbox Environments - and make each one different from the last. Tailor your Lightboxes at the Image level, Gallery Level or multiple Galleries at once - with unparalleled flexibility. Boxaroo is simple to use, fully compatible with CMS systems, and powerful enough to mimic the design of nearly every Lightbox plugin available - making it ideal for both beginners and advanced users.</p>
</div>
</div><br/><br/><br/>
<!-- ASSETS LIBRARY -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Assets Library [ An Unsurpassed Value ]</h3>
</div>
</div>
</div>
<!-- ASSETS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider assets-slider">
<ul class="slides">
<li><img src="images/assetsslide1.png" alt="Boxaroo"></li>
<li><img src="images/assetsslide2.png" alt="Boxaroo"></li>
<li><img src="images/assetsslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<p style="font-size:16px">The Assets Library is a huge collection of Graphics assembled over the course of 2 months and designed specifically for Boxaroo. It includes includes 60 GraphicRiver Items in addition to hundreds of premium graphics files. All Assets have been carefully optimized, named numerically and organized into folders. With 725 premium Backgrounds, 100 Navigation Buttons, 100 Seamless Tiles, Hover Icons and a lightning-fast "pick-by-number" approach - changing Lightbox Graphics has never been this much fun.</p>
<img src="images/assetsdemo.png" alt="Boxaroo" width="100%" style="margin-bottom:50px;margin-top:50px;"/>
</section>
<div class="see-through full-see-through adaptive">
<div class="container clr">
<h2>Adaptive Design</h2>
<p>Forget about responsive - Boxaroo dynamically adapts to any screen size at any resolution. Without a need to dig through tangled Media Queries, Boxaroo focuses on delivering a fast and fluid experience across all resolutions and display sizes. Boxaroo also supports a Fixed Layout Mode and includes options to toggle scalability and define scaling ranges for each Component.</p>
</div>
</div><br/><br/><br/>
<!-- EFFECTS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Special Effects [ The Awesome Stuff ]</h3>
</div>
</div>
</div>
<!-- EFFECTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider effects-slider">
<ul class="slides">
<li><img src="images/effectslide1.png" alt="Boxaroo"></li>
<li><img src="images/effectslide2.png" alt="Boxaroo"></li>
<li><img src="images/effectslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<p style="font-size:16px;">Boxaroo includes a stunning variety of hardware-accelerated CSS3 animations designed to work together seamlessly. Built-in feature detection (no Modernizr required) handles all of the fallback JavaScript animation <em>(using requestAnimationFrame when possible)</em>. Animations auto-adjust depending upon plugin situations such as the existence of other effects, or during specific user events.</p><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Fibonacci Spirals</h3>
<ul class="inline-ul">
<li><span class="gray-text">with legacy browser support</span></li>
</ul>
<p>Spirals can add a nice organic touch to Lightbox animations. Boxaroo allows you to configure Spiral Animations to occur during Open, Close, and/or Navigation. Set the axis for the animation, direction, radius, number of animation cycles, speed and more.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Shadows</h3>
<ul class="inline-ul">
<li><span class="gray-text">powerful control</span></li>
</ul>
<p>For that extra lighting realism, Boxaroo provides powerful shadow animation control. Animate the Shadow Color, Blur Radius, Spread Radius, X Distance, Y Distance and Opacity. Animated Drop Shadows can also optionally scale.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Highlights</h3>
<ul class="inline-ul">
<li><span class="gray-text">modern browser support</span></li>
</ul>
<p>Animated Highlights add another layer of realism to your content. Customize the Highlight Type (shape), position, speed, gradient stops, size and much more. You can even pass in arrays of opacities or colors for Highlight animation loops.</p>
</div>
</article>
</div>
</div>
<div id="spiral_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Fibonacci Spirals</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Add some Spiral Animations to your Lightboxes with a couple simple settings. Control the In, Out and Navigation Speeds, Radius, Direction, Number of Cycles and more.</p>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgspirals.jpg"data-boxaroo='{
"spiral":"true,true,true",
"spiral_direction":"false,false",
"spiral_control":"500,10",
"spiral_speed":"2000,2000,1000",
"box_speed":"700,700,700",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"nav_movement":true,
"preloader_color":"#7c4cb5,#FFFFFF",
"matte_color":"#FFFFFF",
"bg_pic_opacity":0,
"bg_color":"#714cb5,#7c4cb5",
"bg_tile_opacity":0,
"bg_opacity":1,
"drop_shadow":"0,0,15,5,#9a65cc,0.25",
"counter":false,
"caption":false,
"edge_buffers":"35,35",
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"highlight_frame_opacity":"0.25,0.45"
}'>
<img src="images/thumb7.png" alt="Fibonacci Spirals" class="boxaroo-skin1" title="Fibonacci Spirals" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="shadow_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Advanced Shadows</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Boxaroo includes full support for animated Lightbox Shadows. Use Shadows for Glow Effects, blurring Lightbox borders or inside Frame Animation Loops for pulsating animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgshadows.jpg" data-boxaroo='{
"bg_pic":true,
"bg_tile_opacity":0,
"bg_opacity":1,
"bg_pic_opacity":0,
"bg_color":"#0ea6e5",
"bg_speed":"500,500,500,10000",
"counter":false,
"caption":false,
"hover_type":"caption",
"preloader_color":"#2abdfa,#FFFFFF",
"matte_color":"#FFFFFF",
"border":"2,#2abdfa",
"frame_border":"2,#2abdfa",
"frame_animation":true,
"drop_shadow":"0,0,5,0,#b9e0c4,0.5",
"frame_drop_shadow":"0,0,25,10,#FFFFFF,0.5",
"edge_buffers":"30,30",
"frame_speed":2500,
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1"
}'>
<img src="images/thumb8.png" alt="Shadows" class="boxaroo-skin5" title="Lightbox Shadows" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="highlight_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Highlights</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Highlights are optional reflective accents and are highly configurable. They automatically adapt to any 2D/3D Transformations applied to the Lightbox - for added realism. <br/> (Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)</p>
</div>
<div class="portfolio-element art">
<a href="images/bghighlights.jpg" data-boxaroo='{
"box_speed":"700,500,500",
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"nav_movement":true,
"bg_opacity":1,
"bg_tile_opacity":0,
"bg_pic_opacity":0,
"bg_color":"#ff8010",
"counter":false,
"caption":false,
"frame_animation":true,
"flip":"0,-20",
"frame_flip":"0,20",
"translate":"20,0",
"frame_translate":"-20,0",
"border":"2,#ffedb7",
"frame_border":"2,#ffedb7",
"drop_shadow":"30,0,30,5,#994d0b,0.25",
"frame_drop_shadow":"-30,-10,30,5,#994d0b,0.25",
"highlight_type":"ellipse",
"highlight_pos":"1000,-400||false,false",
"highlight_color":"#FFFFFF,#FFFFFF,#FFFFFF",
"highlight_speed":false,
"highlight_opacity":"0,0.5,0",
"highlight_stops":"70,80,100",
"highlight_size":"200%,350%",
"highlight_frame_opacity":"0,0.4",
"nav_buttons":"false,false,false",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"matte_bg":false,
"matte_color":"#FFFFFF",
"preloader_color":"#ff8010,#FFFFFF",
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption"
}'>
<img src="images/thumb9.png" alt="Highlights" class="boxaroo-skin3" title="Highlights" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="matte_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#6e6a57;margin-bottom:.25em;">Custom Matting</h1>
<p style="color:#6e6a57;font-size:1.25em;line-height:1.25em;">Mattes can be sized differently per side, be simple colors, animated Color Loops or repeating Tiles - all unique to each Lightbox. Boxaroo automatically handles the transitions for you. <br/>(Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)</p>
</div>
<div class="portfolio-element art">
<a href="images/bgmatte.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"bg_pic_opacity":0,
"edge_buffers":"40,40",
"matte_bg":40,
"matte_size":"50,40,55,40",
"matte_color":"#FFFFFF",
"matte_clr_speed":"5000",
"content_class":"content_drop_shadow",
"border":"2,#bbff8e",
"lightbox_movement":"left,right",
"frame_border":"2,#bbff8e",
"drop_shadow":"0,5,5,0,#4d8529,0.5",
"frame_drop_shadow":"0,5,5,0,#4d8529,0.5",
"bg_color":"#7bc749",
"preloader_color":"#bbff8e,#e9ffdb",
"gradient_nav_color":"#e9ffdb,#e9ffdb"
}'>
<img src="images/thumb10.png" alt="Custom Matting" class="boxaroo-skin6" title="Skin 4" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="comp_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Advanced Components</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">All Components can animate into view by simply setting the start and end positions. Configure 2D/3D Hover Effects, Opacities, Animation Timing, Dynamic Class Assignment and many Component-specific settings such as Counter Keyword Selection, Full Width Captions and more.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgcomps.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":true,
"counter":true,
"bg_pic":false,
"bg_pic_opacity":0.15,
"bg_color":"#e24e4e",
"bg_speed":"500,500,500,10000",
"bg_tile_opacity":0,
"frame_animation":true,
"bg_opacity":1,
"nav_buttons":"true,true,true",
"nav_pos":"19,24,20||19,16,12",
"nav_buttons_offsets":"-25,10||-200,-25||200,-25",
"nav_buttons_m_offsets":"0,0||-20,-25||20,-25",
"nav_buttons_opacity":"0.35,1||0.5,1||0.5,1",
"nav_button_scale":"0.75,1||1,1.4||1,1.4",
"caption_pos":"18,22",
"caption_offsets":"0,0",
"caption_m_offsets":"0,-20",
"caption_class":"caption_comp_demo",
"nav_style":"12,12,12",
"border":"5,#FFFFFF",
"preloader_color":"#FFFFFF,#e24e4e",
"frame_border":"5,#FFFFFF",
"matte_color":"#FFFFFF",
"drop_shadow":"0,0,13,5,#882d2d,0.25",
"frame_drop_shadow":"0,0,13,5,#882d2d,0.25",
"border_radius":"0,0,0,0",
"scale_border":"true,true",
"edge_buffers":"35,35",
"counter_pos":"22,6",
"counter_m_offsets":"0,-20",
"counter_class":"counter_comp_demo",
"counter_control":"true,Demonstration,of",
"caption_control":"true,true",
"border_radius":"10,10,10,10"
}'>
<img src="images/thumb11.png" alt="Advanced Components" class="boxaroo-skin1" title="Caption Component" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="2d3d_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">2D/3D Transformations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Boxaroo is packed with powerful 2D and 3D Transformation settings. Rotate, Tilt, Flip, Translate, Skew and Scale to your hardware-accelerated heart's desire - with perspective control. Use 2D/3D Transformations during Navigation, as stopping points or during Frame Animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgtransform.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"40,40",
"bg_pic":false,
"bg_opacity":1,
"bg_color":"#3e4649",
"bg_tile_opacity":0,
"frame_animation":true,
"frame_speed":4000,
"frame_ease":"ease-in-out,ease-in-out",
"frame_count":"infinite",
"frame_direction":"alternate",
"perspective":"1000",
"frame_perspective":"1000",
"flip":"20,-20",
"frame_flip":"22,-22",
"rotate":"3",
"frame_rotate":"5",
"translate":"-20,-30",
"frame_translate":"-20,-30",
"drop_shadow":"0,5,13,5,#292f31,0.45",
"frame_drop_shadow":"30,15,13,5,#292f31,0.35",
"scale":"1,1",
"frame_scale":"1,1",
"frame_nav_override":false,
"highlight_type":"ellipse",
"highlight_pos":"1500,-1500||-700,1000",
"highlight_color":"#cbffe8,#cbffe8,#cbffe8",
"highlight_speed":15000,
"highlight_opacity":"0,0.75,0",
"highlight_stops":"4,85,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0.05,0.15",
"border":"3,#717276",
"matte_color":"#22a86d",
"frame_border":"3,#c5bdba",
"preloader_color":"#FFFFFF,#717276",
"nav_buttons":"false,false,false",
"gradient_nav_colors":"#cbffe8,#cbffe8",
"counter":false,
"caption":false
}'>
<img src="images/thumb12.png" alt="2D/3D Transformations" class="boxaroo-skin2" title="2D/3D Transformations" rel="Special Effects"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Custom Matting</h3>
<ul class="inline-ul">
<li><span class="gray-text">where has this feature been?</span></li>
</ul>
<p>Photographers rejoice - Boxaroo delivers full Matte Controls to the Lightbox. Animate Matte Widths (per side) and create color animation loops with an unlimited number of colors. You can apply a texture from the bountiful Assets Library with a single number. Animated Mattes can also optionally scale.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Borders</h3>
<ul class="inline-ul">
<li><span class="gray-text">full animation support</span></li>
</ul>
<p>Gain full animation control over your Lightbox Borders. Animate the Border Width, Color, or Radius (per corner). Animated Borders can also optionally scale. Like many Boxaroo settings, Border settings are modeled after CSS syntax - to make things as comfortable and familiar as possible.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">2D/3D Transformations</h3>
<ul class="inline-ul">
<li><span class="gray-text">flip, rotate, skew, translate, scale</span></li>
</ul>
<p>Apply 2D and 3D CSS3 Animations to individual Lightboxes with ease. Just set the degree or amount of the transformation and Boxaroo will handle all the animation ballistics. Use multiple transformations, adjust the perspective, and even chain them with Frame Animations (animations that kick in once the Lightbox has entered). </p>
</div>
</article>
</div>
</div>
</section>
<div class="see-through full-see-through positioning">
<div class="container clr">
<h2>Component Positioning</h2>
<img src="images/monitor.png" style="float:left;"/>
<p>To keep things simple, 25 pre-defined locations are setup on the screen. Just pick a number to position any Component. If you use 2 position numbers, Boxaroo will animate your Component from the first position to the second. Boxaroo also includes settings to offset the Component position for greater positioning precision.</p>
</div>
</div><br/><br/><br/>
<!-- FRAME ANIMATIONS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Frame Animations [ Looped Animation Tricks ]</h3>
</div>
</div>
</div>
<div id="rotation_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Rotation Frame Animations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Just set rotation angles along with optional animation settings and let Boxaroo handle the rest. Rotate once, a specific number of times, during navigation only or inside an infinite loop.</p>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="images/bgrotate.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"35,35",
"caption":false,
"counter":false,
"frame_animation":true,
"frame_speed":2000,
"rotate":10,
"frame_rotate":-10,
"nav_buttons":"false,false,false",
"bg_pic":104,
"bg_pic_opacity":0.5,
"drop_shadow":"10,15,13,0,#17100a,0.25",
"frame_drop_shadow":"-10,15,13,0,#17100a,0.25",
"bg_color":"#434950,#434950",
"bg_opacity":1,
"bg_tile":false,
"bg_tile_opacity":0,
"bg_speed":"400,600,1300,8000",
"border_radius":"15,15,15,15",
"border":"3,#5e8ad1",
"frame_border":"3,#5e8ad1",
"matte_color":"#434950",
"matte_size":"5,5,5,5",
"gradient_nav_color":"#9bc1ff,#9bc1ff",
"gradient_nav_opacity":"0.15,0.15",
"preloader_color":"#5e8ad1,#FFFFFF",
"highlight_type":false
}'>
<img src="images/thumb19.png" alt="Rotations" class="boxaroo-skin1" title="Rotation" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="flip_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Flip Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Flip Lightboxes along the X or Y axis independently. Flip Animations are highlighy configurable with perspective control, complete 360 degree support, smart setting adjustments built-in, automatic transition handling during navigation and much more.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgflip.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"35,35",
"flip":"10,10",
"frame_flip":"-20,-20",
"bg_color":"#2bc507",
"preloader_color":"#FFFFFF,#FFFFFF",
"bg_speed":"400,600,1300,2500",
"matte_color":"#FFFFFF,#71f600",
"matte_clr_speed":2500,
"frame_speed":2500,
"border":"2,#71f600",
"frame_border":"2,#FFFFFF",
"bg_tile_opacity":0,
"bg_opacity":1,
"bg_pic":false,
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"drop_shadow":"-40,40,25,5,#458f07,0.025",
"frame_drop_shadow":"40,-40,25,0,#458f07,0.25",
"gradient_nav_color":"#71f600,#71f600",
"highlight_type":"ellipse",
"highlight_pos":"200,-2000||200,-1000",
"highlight_color":"#c6ff96,#c6ff96,#c6ff96",
"highlight_speed":false,
"highlight_opacity":"0,1,0",
"highlight_stops":"65,75,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0,0.2"
}'>
<img src="images/thumb14.png" alt="3D Flipping" class="boxaroo-skin2" title="Flip" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="skew_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Skew Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Throw Skews into your Animation Combos for some interesting distortion effects. Skew Transformations support all of the exciting features that other Frame Animation Transformations support, as well as independent axis control.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgskew.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"counter":false,
"caption":false,
"frame_animation":true,
"frame_speed":2000,
"skew":"10,0",
"frame_skew":"-15,0",
"preloader_color":"#f7d77d,#FFFFFF",
"drop_shadow":"0,0,5,5,#eeb718,0.75",
"frame_drop_shadow":"0,0,20,5,#f7d77d,0.5",
"matte_color":"#f7d77d",
"matte_bg":false,
"edge_buffers":"40,40",
"lightbox_movement":"center,center",
"nav_movement":false,
"gradient_nav_color":"#f7d77d,#f7d77d",
"bg_color":"#f7d77d,#eeb718",
"bg_tile_opacity":0,
"bg_pic_opacity":0.1,
"border":"1,#f7d77d",
"frame_border":"1,#f7d77d",
"content_size":"0.75,0.75",
"nav_buttons":"false,false,false"
}'>
<img src="images/thumb15.png" alt="Skewing" class="boxaroo-skin3" title="Skew" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="scale_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#253018;margin-bottom:.25em;">Scale Frame Animations</h1>
<p style="color:#282d16;font-size:1.25em;line-height:1.25em;">Looped Scale Transformations can provide an interesting and subtle effect, adding an organic element and breathing life into the environment. Scaling supports all scenarios including starting large/small, grow/shrink, independent width/height control, and smart Boxaroo transitions.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgscale.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"edge_buffers":"40,40",
"scale":"0.75,0.75",
"frame_scale":"1,1",
"bg_pic":false,
"bg_pic_opacity":0,
"nav_buttons":"false,false,false",
"preloader_color":"#ee509f,#ee509f",
"drop_shadow":"0,5,10,0,#d14e8f,0.85",
"frame_drop_shadow":"0,20,15,15,#d14e8f,0.25",
"matte_color":"#FFFFFF",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"1,1",
"caption":false,
"counter":false,
"highlight_speed":false,
"bg_color":"#ee509f,#ff93ca",
"bg_tile_opacity":0,
"highlight_frame_opacity":"0,0.2",
"gradient_nav_color":"#ff007e,#ff007e",
"gradient_nav_opacity":"0.5,0.5"
}'>
<img src="images/thumb16.png" alt="3D Scaling" class="boxaroo-skin2" title="Scale" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="translate_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Translation Frame Animations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Animate the Lightbox along the X and Y axis independently or use Translations to offset the static position of your Lightbox. Couple Translations with other Frame Animation Transformations for incredible animation control.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgtranslate.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"translate":"0,-20",
"frame_translate":"0,20",
"border":"5,#FFFFFF",
"frame_border":"5,#ef4848",
"drop_shadow":"0,5,13,0,#fabda7,0.5",
"frame_drop_shadow":"0,5,13,0,#fabda7,0.5",
"frame_animation":true,
"frame_nav_override":true,
"edge_buffers":"40,40",
"bg_tile_opacity":0.01,
"matte_color":"#df2428",
"matte_bg":false,
"bg_pic":false,
"bg_color":"#ee484b,#de2428",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"gradient_nav_opacity":"0.15,0.15",
"preloader_color":"#FFFFFF,#FFFFFF"
}'>
<img src="images/thumb17.png" alt="3D Translations" class="boxaroo-skin6" title="Translations" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="combo_el" class="demohtmlel" style="background:none;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Frame Animation Combinations</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;">Have fun creating crazy Frame Animation combinations for wild effects.<br/>Subtle Frame Animation combinations are perfect for simulating organic movements.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgcombo.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":214,
"bg_pic_opacity":0.10,
"bg_tile_opacity":0.1,
"bg_color":"#3ca0e4,#a9dcff",
"bg_opacity":1,
"nav_buttons":"false,false,false",
"skew":"0,0",
"frame_skew":"0,0",
"translate":"0,600",
"frame_translate":"0,-100",
"rotate":"-60",
"frame_rotate":"-10",
"flip":"90,0",
"frame_flip":"0,0",
"scale":"0.25,0.25",
"frame_scale":"1,1",
"edge_buffers":"45,45",
"drop_shadow":"0,0,0,0,#2373a9,0.35",
"frame_drop_shadow":"200,70,50,0,#2373a9,0.15",
"border":"3,#3ca0e4",
"frame_border":"3,#a9dcff",
"frame_speed":4000,
"matte_color":"#3ca0e4",
"preloader_color":"#FFFFFF,#a9dcff",
"gradient_nav_color":"#FFFFFF,#FFFFFF",
"caption":false,
"counter":false,
"highlight_type":"ellipse",
"highlight_pos":"-2000,4000||-1000,-100",
"highlight_color":"#ffffff,#ffffff,#ffffff",
"highlight_speed":false,
"highlight_opacity":"0,0.75,0",
"highlight_stops":"4,85,100",
"highlight_size":"200%,250%",
"highlight_frame_opacity":"0.85,0.5"
}'>
<img src="images/thumb18.png" alt="Unlimited Combinations" class="boxaroo-skin2" title="Frame Animation Combinations" rel="Frame Animations"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div><br>
<p style="font-size:16px;">Frame Animations are optional animation loops that occur when a Lightbox is typically sitting still. They can add an incredible level of depth and realism to any scenerio as well as extend opening and closing animations into more complex chained transitions.</p><br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Frame Animations</h3>
<ul class="inline-ul">
<li><span class="gray-text">how they work</span></li>
</ul>
<p>Several settings have sister Frame Animations settings. They can be understood as the secondary animation point for that setting. When Frame Animations are enabled, Boxaroo will animate a Lightbox entrance as usual, then seamlessly carry out any Frame Animations. This allows for fluid extensions of the entrance and exit animations as well as looped animations while viewing content.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Advanced Controls</h3>
<ul class="inline-ul">
<li><span class="gray-text">iterations and direction</span></li>
</ul>
<p>Once the Lightbox has animated open, the Frame Animation will execute a set number of times. You can control the number of times the Frame Animation should loop, or set it to infinity. You can also control the direction of Frame Animation (Normal, Reverse, Alternate and Alternate-Reverse) yielding creative animations. Speed and Easing controls are also available.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Navigation Override</h3>
<ul class="inline-ul">
<li><span class="gray-text">application levels</span></li>
</ul>
<p>The Navigation Override control gives you a powerful option of how you want Frame Animations applied to your Lightbox Item. Typically, Frame Animations are initiated after the Lightbox Entrance Animation has completed. The Navigation Override Setting allows you to tell Boxaroo you want the Frame Animation to occur during Navigation, rather than when it has finished animating into view. </p>
</div>
</article>
</div>
</div>
<!-- FRAME SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider frame-slider">
<ul class="slides">
<li><img src="images/frameslide1.png" alt="Boxaroo"></li>
<li><img src="images/frameslide2.png" alt="Boxaroo"></li>
<li><img src="images/frameslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Lightbox Movement</h3>
<ul class="inline-ul">
<li><span class="gray-text">directional control</span></li>
</ul>
<p>Every Lightbox Item allows you to control what part of the screen the Lightbox enters and exits. Aside from customizing animations, this allows for creating an illusion that your Gallery is aligned along an axis. Choose an off-screen location, or even use the Origin option to make it appear like the Lightbox is emerging from it's thumbnail. Boxaroo takes measures to make sure all animation settings work well with your movement settings.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Lightbox Size Effect</h3>
<ul class="inline-ul">
<li><span class="gray-text">shrink || grow || match</span></li>
</ul>
<p>The Lightbox Size Effect setting works in conjuction with the Ligthbox Movement setting. Where the movement setting controls the entrance/exit position, the Size Effect setting controls how the Lightbox's dimensions will be affected. Shrink will set the Lightbox to the full dimensions of the screen and shrink to it's final size. Grow will set the dimensions to 0 and grow to it's final size. Match will maintain Lightbox dimensions.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Speed and Easing</h3>
<ul class="inline-ul">
<li><span class="gray-text">forget about timing problems</span></li>
</ul>
<p>With so many animation effects and different options occurring at once, timing could quickly become a problem. Boxaroo cuts out the risk of timing issues by eliminating independent animation times and basing all animation effects around the Lightbox. Control the timing and easing of the Lightbox and all animation effects will elegantly follow suit. The Lightbox Content allows for Fading options using separate timing controls. </p>
</div>
</article>
</div>
</div>
<br><br><br></section>
<div class="see-through full-see-through frames">
<div class="container clr">
<h2>Approach It Like A Designer</h2>
<p>No coding experience is required, and Boxaroo takes a mere 3 lines of code for a complete setup - the rest is optional customization. All settings are as simplified as possible and many directly match CSS syntax. Boxaroo builds the animations for you, and changing graphics is a matter of picking numbers. You'll be happy to know you can leave your designer hat on. </p>
</div>
</div><br/><br/><br/>
<!-- EVENTS -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Events [ And Other Goodies ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Gallery Navigation</h3>
<ul class="inline-ul">
<li><span class="gray-text">keyboard || mouse || finger || stylus</span></li>
</ul>
<p>Boxaroo provides 7 customizable ways for user Navigation: (Keyboard, Virtual Mouse Swiping, Gradient Navigation Overlays, Touch, Swipe, Stylus and the Mousewheel) - allowing you to choose how users interact with your content. Additionally, Boxaroo allows you to control many aspects of navigation events such as Required Swiping Distance, Gesture Tolerance, Reverse Navigation Direction, Navigation Axis Selection and much more.
</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Thumbnails</h3>
<ul class="inline-ul">
<li><span class="gray-text">hover plugin yielding</span></li>
</ul>
<p>Although Boxaroo comes packing extensive Hover Effects options, you may already have a special plugin, or your own effects. Boxaroo is able to yield to your preferred plugin or code. This makes it perfect for effortlessly retaining existing thumbnail styles and effects in templates and themes. Boxaroo Thumbnail Effects have Icon and Caption Modes, and include a ton of options like 2D/3D Transformation hover effects.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Stacking Order</h3>
<ul class="inline-ul">
<li><span class="gray-text">from the bottom up</span></li>
</ul>
<p>All Components are layered in a logical order - with navigation elements taking priority. However, in case you decide to get tricky and include custom Lightbox interactivity or functionality through the HTML Element Component(s) you can change the stacking order with a single setting. Boxaroo allows you to shuffle how Components are layered on every Lightbox Item.</p>
</div>
</article>
</div>
</div>
<!-- EVENTS SLIDER -->
<div class="row row-big-col">
<div class="col span_12">
<section class="slider">
<div class="flexslider events-slider">
<ul class="slides">
<li><img src="images/eventsslide1.png" alt="Boxaroo"></li>
<li><img src="images/eventsslide2.png" alt="Boxaroo"></li>
<li><img src="images/eventsslide3.png" alt="Boxaroo"></li>
</ul>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Browser Dictation</h3>
<ul class="inline-ul">
<li><span class="gray-text">browser level control</span></li>
</ul>
<p>Boxaroo is a mix of CSS3 Transitions, CSS3 Keyframe Animations and JavaScript Animations. Feature detection is used to give hardware-accelerated CSS3 animations priority. Experiment with your Lightbox customizations and compare tightly written JavaScript animation performance against CSS3 performance - in specific browsers. You might be surprised.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Dynamic Class Assignment</h3>
<ul class="inline-ul">
<li><span class="gray-text">adding more style</span></li>
</ul>
<p>Just in case Boxaroo doesn't have a setting for what you're trying to achieve, you can dynamically assign classes to any Component and the Lightbox. These classes are applied before Components are displayed on screen and cleared when a Lightbox is closed, or when the user Navigates. Any CSS properties that are able to animate, and not controlled by a Boxaroo setting, will.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Presentation Controls</h3>
<ul class="inline-ul">
<li><span class="gray-text">dimensions and buffers</span></li>
</ul>
<p>An important aspect of any Lightbox is image handling. Rather than controlling the size of the image, Boxaroo allows you to control the distance between the edge of the browser and the Lightbox - calculating everything else for you. This allows for fluid, real-time scaling. Content is preloaded using AJAX and you can optionally deliver different content to tablets and/or mobile devices.</p>
</div>
</article>
</div>
</div><br><br><br>
</section>
<div class="see-through full-see-through adaptive">
<div class="container clr">
<h2>User Comfort</h2>
<p>Boxaroo provides 7 customizable ways users can navigate your content to insure the utmost level of comfort. Boxaroo supports Touch Events, Gestures, Virtual Mouse Events, Keyboard navigation, Stylus control, MouseWheel interaction and customizable Gradient Navigation Bar Overlays.</p>
</div>
</div><br/><br/><br/>
<!-- SLIDESHOWS AND FULL-SCREEN MODE -->
<section class="container clr">
<div class="row">
<div class="col span_12">
<div class="title-medium">
<h3>Flexibility [ Slideshows, Full-Size Mode, JavaScript Hooks and More ]</h3>
</div>
</div>
</div>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Slideshows</h3>
<ul class="inline-ul">
<li><span class="gray-text">customize and enable</span></li>
</ul>
<p>Slideshows retain all defined settings. Slides can be displayed for unique durations and the Slideshow can optionally close on completion. Use Slideshows with Full Size Mode and HTML Elements for a full presentation platform.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Counter Customization</h3>
<ul class="inline-ul">
<li><span class="gray-text">countdown to awesome</span></li>
</ul>
<p>Slideshows can optionally display a standard countdown progress bar. Both elements of the progress bar can be customized and set up with looped color animations to match your Lightbox Environment.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Slideshows Per Lightbox</h3>
<ul class="inline-ul">
<li><span class="gray-text">not your typical slideshow</span></li>
</ul>
<p>Slideshows can be a couple of Lightboxes inside a Gallery or the entire Gallery itself. You can even use multiple slideshows within the same Gallery, or use a single image for a Slideshow.</p>
</div>
</article>
</div>
</div>
<div id="fullscreen_el" class="demohtmlel full_size_demo_container">
<img src="images/samples/1/44.jpg" class="full_size_demo_image"/>
<h1 class="full_size_demo_h1">Full Size Mode</h1>
<p class="full_size_demo_p">Full Size Mode moves the Lightbox image into the background and removes the Lightbox. 3 Animated HTML Element Components allow you to inject any code you want directly into the environment. This allows Boxaroo to handle any content and maintain its scalability and customization options.</p><br>
<a href="http://sc.admin5.com/" target="_blank" class="full_size_demo_a">> Art courtesy of: ZUCO</a></p>
</div>
<div class="portfolio-element art">
<a href="images/samples/1/44.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic_opacity":0.10,
"bg_tile_opacity":0,
"bg_color":"#FFFFFF,#bff6fb",
"bg_speed":"300,300,400,15000",
"bg_opacity":1,
"html_els":"#fullscreen_el,false,false",
"html_els_pos":"18,25,23||25,25,23",
"html_els_offsets":"0,-600||0,0||0,0",
"html_els_m_offsets":"0,-40||0,0||0,0",
"html_els_m_speed":"1000,500,500",
"html_els_ranges":"30,70||30,70||30,70",
"caption":false,
"counter":false,
"nav_style":"2,2,2",
"nav_buttons_opacity":"0.5,1||0.5,1||0.25,0.5",
"nav_buttons":"false,true,true",
"full_size":true,
"slideshow":"false,true",
"slide_display_time":3000,
"close_at_end":true,
"slideshow_counter_direction":"right",
"slideshow_container_color":"#828282,#bfbfbf",
"slideshow_counter_color":"#bfbfbf,#828282",
"preloader_style":5,
"preloader_color":"#ff3934,#FFFFFF",
"nav_pos":"1,1,22||1,1,22",
"nav_buttons_offsets":"0,0||0,0||0,-30"
}'>
<img src="images/thumb13.png" alt="Full Size Mode" class="boxaroo-skin2" title="Full Size Mode" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="htmlels_el" class="demohtmlel ext_demo_container">
<h1 class="ext_demo_h1">Extended Interaction</h1>
<p class="ext_demo_p">Full Size Mode removes the Lightbox from the environment and uses the Background Image Overlay for content placement. All customization options remain available and you can use animated HTML Element Components to accentuate content or add interactivity.<br/>The Boxaroo Box Mock-Up above is just an HTML Element, go ahead and give it a hover.</p>
</div>
<div id="demoboxtooltip" style="display:none;z-index:99999999999999999;width:38em;background:rgba(255,255,255,0.95);border-radius:5px;margin-top:1.85em;margin-left:1.85em;padding:0.85em;">
<h1 style="color:#686666;font-size:1.5em;letter-spacing:0.05em;line-height:1.5em;margin:0;font-family:'open_sanslight', sans-serif;text-align:center;">Do What You Want</h1>
<p style="color:#686666;font-size:1em;line-height:1.75em;text-align:center;">Design your HTML however you like, then tell Boxaroo to use it as a Component. Any functionality and animation is automatically injected into the Environment.</p>
</div>
<script type="text/javascript">
$(window).load(function(){
$('#demobox').on({'mouseenter':function(e){
$('#demoboxtooltip').css({'width':'40em','z-index':999999999999999999,'display':'block'});
}}).on({'mouseleave':function(e){
$('#demoboxtooltip').stop(true,true).fadeOut(250);
}}).on({'click':function(e){ alert("You clicked this HTML Element!");
}});
$('#demobox').on({'mousemove':function(e){
var mouseX=e.pageX, mouseY=e.pageY;
$('#demoboxtooltip').css({'position':'absolute','top':mouseY 'px','left':mouseX 'px'});
}});
});
</script>
<div id="demobox" class="demohtmlel demo_box_container">
<img src="images/samples/demobox.png" class="demo_box_img"/>
</div>
<div class="row portrow">
<div class="portfolio-element art">
<a href="Boxaroo/images/Backgrounds/bg_63.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_color":"#FFFFFF",
"bg_speed":"400,600,1300,15000",
"full_size":true,
"html_els":"false,#demobox,false",
"html_els_pos":"18,18,23||22,25,23",
"html_els_offsets":"0,-200||0,-500||0,0",
"html_els_m_offsets":"0,-400||0,30||0,0",
"html_els_m_speed":"700,500,500",
"html_els_speed":"500,500||500,800||500,500",
"html_els_ranges":"10,70||10,70||10,70",
"caption":false,
"counter":false,
"nav_buttons":"false,true,true",
"nav_pos":"1,24,20||1,24,20",
"nav_buttons_offsets":"0,0||60,-20||-80,-20",
"slideshow":"false,true",
"slide_display_time":3000,
"nav_style":"18,18,18",
"close_at_end":true,
"slideshow_counter_direction":"right",
"slideshow_container_color":"#828282,#bfbfbf",
"nav_buttons_opacity":"1,1||0.5,1||0.5,1",
"slideshow_counter_color":"#bfbfbf,#828282",
"preloader_color":"#FFFFFF,#f4eded"
}'>
<img src="images/thumb20.png" alt="Extended Interaction" class="boxaroo-skin1" title="Extended Interaction" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="cssfilter_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#000000;margin-bottom:.25em;">CSS Image Filters</h1>
<p style="color:#000000;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;"> Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory <em>(limited browser support)</em>.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgfilter.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"gradient_nav_color":"#fbf0da,#fbf0da",
"highlight_color":"#fbf0da,#fbf0da,#fbf0da",
"bg_pic":false,
"bg_tile_opacity":"0",
"bg_color":"#f1e5cf",
"bg_opacity":1,
"caption":false,
"counter":false,
"drop_shadow":"-10,-10,15,5,#767075,0.15",
"frame_drop_shadow":"0,5,15,5,#767075,0.35",
"nav_buttons":"false,false,false",
"slideshow":"false,true",
"slide_display_time":8000,
"border":"1,#f0e7ee",
"frame_border":"1,#f0e7ee",
"matte_size":"0,0,0,0",
"matte_color":"#4b2844",
"matte_bg":false,
"preloader_color":"#4b2844,#4b2844",
"preloader_style":6,
"lightbox_effect":"grow,shrink",
"lightbox_movement":"center,center",
"frame_animation":true,
"frame_count":"infinite",
"highlight_frame_opacity":"0.1,0.15",
"border_radius":"20,20,20,20",
"highlight_pos":"800,800||-1500,-1500",
"content_blur":"0px",
"frame_content_blur":"2px",
"frame_speed":3000,
"scale":"1,1",
"frame_scale":"1,1"
}'>
<img src="images/thumb21.png" alt="Image Filters" class="boxaroo-skin4" title="CSS Image Filters" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="slideshow_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Slideshows</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Setup your Lightboxes however you like, then just enable Slideshows with one setting.<br/>They can even begin and end inside Galleries.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgslideshow.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_pic_opacity":0,
"bg_tile":38,
"bg_tile_opacity":0.35,
"bg_color":"#1d1d1d",
"bg_opacity":1,
"bg_speed":"400,600,1300,9000",
"caption":false,
"counter":false,
"nav_buttons":"false,true,true",
"slideshow":"true,true",
"slide_display_time":6000,
"edge_buffers":"35,35",
"close_at_end":false,
"matte_color":"#02bb78",
"nav_style":"1,36,36",
"border":"2,#02bb78",
"frame_border":"2,#02bb78",
"slideshow_counter_direction":"right",
"slideshow_container_color":"#1d1d1d,#02bb78",
"preloader_color":"#02bb78,#a6e9d8",
"slideshow_counter_color":"#02bb78,#1d1d1d",
"nav_buttons":"false,false,false",
"highlight_pos":"-1000,-1300||-300,-100",
"highlight_color":"#a7ffb4,#a7ffb4,#a7ffb4",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"50,80,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"0.75,0.25"
}'>
<img src="images/thumb22.png" alt="Slideshows" class="boxaroo-skin2" title="Slideshows" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="slideshowcounters_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">Slideshow Counters</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Customize the Slideshow Counter position, size, direction and color animations.</p>
</div>
<div class="portfolio-element art">
<a href="images/bgslideshowcounter.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_color":"#20091b,#3c1236",
"bg_tile_opacity":0.015,
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"slideshow":"true,true",
"slide_display_time":4000,
"border":"2,#855a7d",
"frame_border":"2,#855a7d",
"close_at_end":false,
"drop_shadow":"0,0,3,7,#4a1643,0.5",
"frame_drop_shadow":"0,0,25,15,#592952,0.9",
"slideshow_counter_direction":"left",
"slideshow_container_color":"#fcffc8,#855a7d",
"slideshow_counter_color":"#3c1236,#bfc0aa",
"matte_color":"#6d3c64",
"preloader_color":"#bfc0aa,#bfc0aa",
"matte_bg":false,
"highlight_pos":"-2000,-2300||-300,-100",
"highlight_color":"#6d3c64,#6d3c64,#6d3c64",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"50,80,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"0.75,0.5"
}'>
<img src="images/thumb23.png" alt="Slideshow Timers" class="boxaroo-skin3" title="Slideshow Counters" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
<div id="jshooks_el" class="demohtmlel" style="background:none;border-radius:0px;border:none;box-shadow:none;width:55em;text-align:center;">
<h1 style="color:#FFFFFF;margin-bottom:.25em;">JavaScript Hooks</h1>
<p style="color:#FFFFFF;font-size:1.25em;line-height:1.25em;font-family:Arial, Helvetica, sans-serif;">Hooks allow you to use custom functions at specific times based on events or interaction. To make things easy, <span style="color:#FFFFFF;font-weight:bold;">this</span> refers to the Boxaroo Object, containing all Boxaroo Elements.</p>
</div>
<script type="text/javascript">
function js_open(){alert('JavaScript Hook: Boxaroo Lightbox has opened. Function js_open() called.');};
function js_close(){alert("JavaScript Hook: Boxaroo Lightbox has closed. Function js_close() called.");};
function js_navigate(){alert("JavaScript Hook: Boxaroo Lightbox navigation has occurred. Function js_navigate() called.");};
function js_nav_fwd(){alert("JavaScript Hook: Boxaroo Lightbox navigation forward has occurred. Function js_nav_fwd() called.");};
function js_nav_back(){alert("JavaScript Hook: Boxaroo Lightbox navigation backward has occurred. Function js_nav_back() called.");};
function js_next_hover(){alert("JavaScript Hook: Boxaroo Lightbox Next Button has been hovered. Function js_next_hover() called.");};
function js_prev_hover(){alert("JavaScript Hook: Boxaroo Lightbox Previous Button has been hovered. Function js_prev_hover() called.");};
function js_close_hover(){alert("JavaScript Hook: Boxaroo Lightbox Close Button has been hovered. Function js_close_hover() called.");};
function js_slideshow_end(){alert("JavaScript Hook: Boxaroo Lightbox Slideshow has ended. Function js_slideshow_end() called.");};
function js_el1_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 1 has been clicked. Function js_el1_click() called.");};
function js_el2_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 2 has been clicked. Function js_el2_click() called.");};
function js_el3_click(){alert("JavaScript Hook: Boxaroo Lightbox HTML Element 3 has been clicked. Function js_el3_click() called.");};
</script>
<div class="portfolio-element art">
<a href="images/bgjs.jpg" data-boxaroo='{
"hover_class":"Box_Hov_1",
"hover_text_class":"Box_HovTxt_1",
"hover_color":"#000000",
"hover_speed":"500,250||300,250||500,500",
"hover_opacity":"0.65,1",
"hover_type":"caption",
"bg_pic":false,
"bg_color":"#ff8010",
"bg_opacity":1,
"bg_tile_opacity":0.01,
"caption":false,
"counter":false,
"nav_buttons":"false,false,false",
"drop_shadow":"0,0,10,5,#c9650d,0.02",
"frame_drop_shadow":"0,0,20,2,#c9650d,0.7",
"border":"2,#ffe786",
"frame_border":"2,#ffe786",
"slideshow":"false,true",
"matte_color":"#ff8010",
"js_open":"js_open",
"js_open_nav":"js_open",
"js_close":"js_close",
"js_navigate":"js_navigate",
"js_nav_fwd":"js_nav_fwd",
"js_nav_back":"js_nav_back",
"js_prev_hover":"js_prev_hover",
"js_next_hover":"js_next_hover",
"js_close_hover":"js_close_hover",
"js_slideshow_end":"js_slideshow_end",
"js_el1_click":"js_el1_click",
"js_el2_click":"js_el2_click",
"js_el3_click":"js_el3_click",
"gradient_nav_color":"#ffe786,#ffe786",
"preloader_color":"#FFFFFF,#FFFFFF",
"frame_animation":true,
"highlight_pos":"-1000,-300||-300,-100",
"highlight_color":"#ffbf86,#ffe786,#ffbf86",
"highlight_speed":6000,
"highlight_opacity":"0,0.65,0",
"highlight_stops":"80,85,95",
"highlight_size":"300%,350%",
"highlight_frame_opacity":"1,0.5"
}'>
<img src="images/thumb24.png" alt="JavaScript Hooks" class="boxaroo-skin6" title="JavaScript Hooks" rel="Slideshows"/></a>
<div class="extra-info portfolio-image"></div>
</div>
</div>
<br>
<div class="row">
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">Full Size Mode</h3>
<ul class="inline-ul">
<li><span class="gray-text">do it big</span></li>
</ul>
<p>Full Size Mode gets the most out of your content by making it full screen. All defined settings remain untouched and you still have control over Boxaroo Components. You can apply Full Size Mode to a single Lightbox within a Gallery and Boxaroo will automatically toggle between Standard and Full Size Modes during navigation.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">CSS Image Filters</h3>
<ul class="inline-ul">
<li><span class="gray-text">experimental fun</span></li>
</ul>
<p>Although still in the experimental stages and with limited browser support, CSS Image Filter Animations will give you a little extra something to have fun with. Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory. When the time comes, Boxaroo is ready.</p>
</div>
</article>
</div>
<div class="col span_4">
<article class="entry home-entry">
<div class="entry-image"><div class="home-image-shadow"></div></div>
<div class="entry-text">
<h3 class="content-green-hover no-margin text-bold">JavaScript Hooks</h3>
<ul class="inline-ul">
<li><span class="gray-text">for the JS junkies</span></li>
</ul>
<p>Just in case there is something truly specific that Boxaroo has missed, JavaScript Hooks are built in and ready to extend Boxaroo's functionality. Feel confident calling your custom functions to action with any of the 12 Boxaroo's JavaScript Hooks. The this keyword inside your function references the Boxaroo Object - which neatly contains all elements. </p>
</div>
</article>
</div>
</div>
<br><br>
</div></section>
<div class="to-top"></div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论