Tuesday, January 29, 2013

3D Touch Carousel with jquey

Posted by at 7:25 PM ·


CSS:

<!-- CSS  -->
<style>
.carousel-title{
height:40px;
width:350px;
padding:5px;
}
.carousel-title span, .carousel-title a {
color: #FFFFFF;
font-family: 'Volkhov',sans-serif;
font-size: 24px;
text-shadow: 1px 1px 1px #E0D1BC;
}
.carousel-subtitle{
color: #FFFFFF;
font-size: 14px;
padding:5px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://3.s3.envato.com/files/37836635/css/theme1/style.css" />


SCRIPT:
    <script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/jquery.js"></script>

    <script type="text/javascript" src="http://3.s3.envato.com/files/37836635/js/carousel.js"></script>



MARKUP HTML: 
1. Live Example 3D CSS3 CAROUSEL. 
    
<div id="3DC3Cut" style="width:900px; height:600px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Custom title with Transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
CSS3 Transition supported
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Multiple titles with multiple transitions</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Set up links, images and other in the titles
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<span data-start="{height:0,padding:0}" data-stop="{height:40,padding:5}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>jQuery easing support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
MouseWheel support with no plugins
</span></div>

<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Small script with just 14k</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fast and Optimized
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Touch gestures support</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Android, ISOX
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Find more plugins on my page</span>
</span>
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-subtitle">
Fine Zoom
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
<span data-start="{left:1500}" data-stop="{left:0}" data-easing="easeInOutBack" data-delay="500" class="carousel-title">
<span>Visit <a href="http://www.albanx.com">my web site</a></span>
</span></div>

</div>

<script tyle="text/javascript">
$("#3DC3Cut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'H'
});
</script>


2. Live Example SIMULATED 3D CAROUSEL.
<div id="S3DCut" style="width:1100px;height:500px;overflow:visible;margin:0 auto;background-color:#000">    
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mercury.png" />
<span data-start="{width:0}" data-stop="{width:300}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mercury</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/venus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Venus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/earth.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Earth</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/mars.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Mars</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/jupiter.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Jupiter</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/saturn.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Saturn</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/uranus.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Uranus</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/neptun.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Neptun</span>
</span></div>
               
<div><img class="carton" src="http://3.s3.envato.com/files/37836635/images2/pluton.png" />
<span data-start="{opacity:0, top:50}" data-stop="{top:0,opacity:1}" data-easing="easeInOutBack" data-delay="0" class="carousel-title">
<span>Pluton</span>
</span></div>

</div>

<script tyle="text/javascript">
$("#S3DCut").carousel3d({
mode:'2d',
autoPlay:-1,
autoPlayInterval:2000,
navigation:'mouseover',
perspective:500,
animationSpeed:20,
centerImg:'http://3.s3.envato.com/files/37836635/images2/sun.png',
reflectionHeight:0,
responsive:false,
radiusZ:1000,
radiusX:1000
});
</script>


3. Live Example X AXIS ROTATION.
<div id="XARut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#XARut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
positionY:100,
rotateX:-20
});
</script>


4. Live Example 3D Vertical Mode.
<div id="3DVMut" style="width:700px;height:400px;overflow:visible;margin:0 auto;">    
               
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />

</div>

<script tyle="text/javascript">
$("#3DVMut").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:3000,
navigation:'mouseover',
orientation:'V'
});
</script>

5. Live Example Mini Banners Rotator.
a.HTML untuk  bagian atas.


<div class="MBRutaka" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects1.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects2.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects3.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka").carousel3d({
mode:'3d',
autoPlay:1,
autoPlayInterval:2000,
navigation:false,
orientation:'H'
});
</script>


b.HTML untuk bagian bawah.

<div class="MBRutaka2" style="width:300px; height:100px;overflow:visible;margin:0 auto">    
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects5.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects6.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects7.jpg" />
<img class="carton" src="http://3.s3.envato.com/files/37836635/images1/triworks_objects8.jpg" />
</div>
<script tyle="text/javascript">
$(".MBRutaka2").carousel3d({
mode:'3d',
autoPlay:-1,
autoPlayInterval:1500,
navigation:false,
orientation:'H',
positionY:0,
rotateX:-20,
overflow:'visible'
});
</script>




Labels: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)