افکت 3 بعدی و انیمیشنی برای طرح های فانتزی در وب
آموزش استفاده
- قبل از تگ </head> کد زیر را قرار بدید :
<style type="text/css"> body { font-family:Tahoma, Geneva, sans-serif; background: #333; color: #eee; } a { text-decoration: none; color: hsl(206, 80%, 50%); } .roll { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 400px; -moz-perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; } .roll span { display: block; position: relative; padding: 0 2px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .roll:hover span { background: #111; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); } .roll span:after { content: attr(data-title); display: block; position: absolute; right: 0; top: 0; padding: 0 2px; color: #fff; background: hsl(206, 80%, 30%); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); } </style> <script type="text/javascript"> var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined; function linkify( selector ) { if( supports3DTransforms ) { var nodes = document.querySelectorAll( selector ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className || !node.className.match( /roll/g ) ) { node.className += ' roll'; node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; } }; } } linkify( 'a' ); </script> - بعد از تگ <body> کد زیر را قرار بدید :
<h1> <a href="http://ijquery.ir/">افکت سه بعدی برای لینکهای متنی در سراسر وب سایت</a> </h1> <p>از این پس می توانید لینک هایی که در سرتاسر <a href="http://ijquery.ir">وب سایت</a> شما هست را با <a href="http://ijquery.ir">افکت سه بعدی</a> بسیار جذاب هاور نمایید.</p>
سلام
چطور میشه همچین افکتهایی رو در مدیریت محتوا به کار برد؟ مثلا توی جوملا چطور میتونیم از این افکتها استفاده کنیم؟
ممنون از زحماتتون یه پیشنهاد اگه بتونید باسه مطالبتون دمو هم بزارید عالی می شه
سپاس .
تمام مطالب دارای دمو هستند – پیش نمایش
با سلام چطورمیشه واسه یه لینک خاص این افکتو گذاشت راهنمایی کنید ممنون میشم
من به ساخت کد خیلی علاقه دارم کد برای وبلاگ میشه کمی توضیح بدهید و یا چیزهای باحال به من یاد بدهید؟