0

ねえ、私はここで 3D 画像のこの素敵な効果に出くわしました

問題は、エフェクトのセットごとに html ページを作成する代わりに、すべてのエフェクトを 1 つのページに結合する方法を見つけようとしているところです (フリップ、回転、マルチフリップ、キューブ、展開、その他)。

このタスクを達成する方法を教えてもらえますか? 効果ごとに異なる CSS スタイルを使用しているようで、style1-6.css を 1 つのページに結合できないか、すべての効果が台無しになります。

更新 私は現在これを行うことができます:

$navNext.on( 'click', function( event ) {
var randNum = Math.floor ( Math.random() * wPerspective.length ) 

$type = wPerspective[randNum];
type = wPerspective[randNum];

$("LINK[href*='css/style1.css']").remove();
$("LINK[href*='css/style2.css']").remove();
$("LINK[href*='css/style3.css']").remove();
$("LINK[href*='css/style4.css']").remove();
$("LINK[href*='css/style5.css']").remove();
$("LINK[href*='css/style6.css']").remove();

var $$ = document;
var head  = $$.getElementsByTagName('head')[0];
var link  = $$.createElement('link');

link.id   = 'myCss';
link.rel  = 'stylesheet';
link.type = 'text/css';
link.media = 'all';

console.log(type + ' | ' + type.indexOf("te-flip"));

if (type.indexOf("te-flip") == 0)
{
        link.href = 'css/style1.css';
}else if (type.indexOf("te-rotation") == 0)
{
    link.href = 'css/style2.css';
}else if (type.indexOf("te-multiflip") == 0)
{
    link.href = 'css/style3.css';
}else if (type.indexOf("te-cube") == 0)
{
    link.href = 'css/style4.css';
}else if (type.indexOf("te-unfold") == 0)
{
    link.href = 'css/style5.css';
}else if (type.indexOf("te-example") == 0)
{
    link.href = 'css/style6.css';
}

head.appendChild(link);             
$teTransition.addClass( type );

if( hasPerspective && animated )
    return false;

animated = true;    
showNext();
return false;

});

しかし、それはあまり滑らかではありません....

私のデモページ http://jun3rdsoftware.com/trans/index.html

4

1 に答える 1

0

これらは、Webkitのみ(Firefoxなしなど)の優れた3Dトランジションです。これは完全なプラグインソリューションではありませんが、概念実証であることに注意してください。これが、すべてが同じページにある場合に機能しない理由です。クロスブラウザバージョンを組み合わせて、各エフェクトを持ち上げて、好きなように使用できます。

これらは、異なる方法で使用されるstyle1-6.cssファイルのCSS属性であるため、これを処理する方法は3つあります。

最初の方法はiframes、メインページに使用し、各.cssファイルを個別にロードすることです。欠点は、特定の効果がiframeにのみ含まれることです。

より良い方法では、すべての効果に使用される共通/ベースCSSスタイルを動的に設定する必要があります。これらは、プログラムによるjQueryを介して、「効果的な」CSSルール(Flip1、Flip2、Rotate1など)のみを持つstyle1-6.cssファイルで機能するように設定できます。

もう1つの方法は、実験的なCSS3プロジェクトを再コーディングして、同じCSS属性のクロススクリプト汚染を許可しないことで実験的ではなくなるようにすることです。簡単な方法: 6つのスタイルシートのそれぞれが6つの別々のスタイルシートになります.js files はい、これは、すでに6つのフレーバーのCSSファイルをダウンロードしているため、異なるフレーバーのスクリプトを6回ダウンロードすることを意味します。それぞれ.js fileが対応するものを改造するとともに改造される.css fileので、相互汚染は発生しません。難しい方法: .jsファイルを再コーディングして、問題なくすべての効果を実現できるようにします。

簡単な方法の例:

<!-- The script is modded so that -1 means 1.css is used -->
<div id="te-wrapper-1" class="te-wrapper-1">

<!-- The script is modded so that -2 means 2.css is used -->
<div id="te-wrapper-2" class="te-wrapper-2">
于 2012-06-11T21:51:29.230 に答える