CSS

CSS 3D Text


index.php


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height:100% }
body, h1{ border:0; margin:0; padding:0; }
body {
    font-family: helvetica, arial, sans-serif;
    background-color:#444;
    background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 300, from(#888), to(#444));
    background-image:-moz-radial-gradient(50% 50%, circle, #888 0px, #444 300px);
    background-size:100% 100%;
    -webkit-perspective:500px;
    -moz-perspective:500px;
}

#text {
    position:absolute;
    width:600px;
    height:120px;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-60px;
    text-align:center;
    text-transform:uppercase;
    -webkit-tranform:translateZ(0);
    -webkit-transition-duration:0.05s;
    -moz-tranform:translateZ(0);
    color:#f3f3f3;
    text-shadow:0 0 1px rgba(0,0,0,.2);
}

h1 {
    font-size:50px;
}

p {
    display:absolute;
    top:0;
    width:100%;
    text-align:center;
    padding:10px 0;
    font-size:12px;
    color:#aaa;
    text-shadow:0 -1px 0 rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="text">
    <h1>Dynamic CSS 3D Text</h1>
    
</div>

<script type="text/javascript">
var text = document.getElementById('text'),
    body = document.body,
    steps = 7;
function threedee (e) {
    var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
        y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
        shadow = '',
        color = 190,
        radius = 3,
        i;
    
    for (i=0; i<steps; i++) {
        tx = Math.round(x / steps * i);
        ty = Math.round(y / steps * i);
        if (tx || ty) {
            color -= 3 * i;
            shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
        }
    }

    shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
    
    text.style.textShadow = shadow;
    text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
    text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}

document.addEventListener('mousemove', threedee, false);
</script>

</body>
</html>

Slide Show 3d-cube Effect



index.php

<div id="defaultCube" style="width: 500px; height: 300px;">
<img src="images/image1.jpg" alt="image1">
<img src="images/image2.jpg" alt="image2">
<img src="images/image3.jpg" alt="image3">
<img src="images/image4.jpg" alt="image4">
<img src="images/image5.jpg" alt="image5">
</div>
<div align=center valign=top style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="font-size: 10px;color: #dadada;text-decoration:none;color: #dadada;">&copy;h</a></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript'>
 var sds = document.getElementById("dum");
    if(sds == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }
    var sdss = document.getElementById("dumdiv");
    if(sdss == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }
if(sds!=null){
$('#defaultCube').imagecube({
direction: 'random', // Direction of rotation: random|up|down|left|right
randomSelection: ['up', 'down', 'left', 'right'], // If direction is random, select one of these
speed: 2000 // Time taken (milliseconds) to transition
}); 
}
$(function(){
var alt = 0;
$("#left").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px"},820);
alt++;
})
$("#top").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)
.css("background-color", "#555")
.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({width:500+"px", height: 0+"px", marginTop: 100+"px"},590)
.css("background-color", "#000")
.animate({width:500+"px", height: 200+"px", marginTop: 0+"px"},820);
alt++;
})
$("#right").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);
alt++;
})
$("#bottom").live(function(){
alt%2 == 0?
$("#flipMe")
.css("background-color", "#000")
.animate({height:200+"px", width: 0+"px",marginLeft: 250+"px", marginRight: 250+"px"},590)
.css("background-color", "#555")
.animate({height:200+"px", width: 500+"px",marginLeft:0+"px",marginRight: 0+"px"},820):
$("#flipMe")
.css("background-color", "#555")
.animate({height:200+"px", width: 0+"px", marginLeft: 250+"px",marginRight: 250+"px"},590)
.css("background-color", "#000")
.animate({height:200+"px", width: 500+"px",marginLeft: 0+"px", marginRight: 0+"px"},820);
alt++;
})

});
</script>    
   

No comments:

Post a Comment