8

対話する 3 つの div がある単純なレイアウトを作成しました。1 つは画面中央のロゴで、もう 1 つは jQuery で画面外に移動された 2 つのブロックです。CSSのオプションを使用しskewて次数変換を適用しました。画面に応じて一定の程度を適用したいので、この程度はすべての画面に正しく適用されます。

視覚的な例: http://jsfiddle.net/6a93T/1/

今のところ、私はこのコードを持っています:

HTML:

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jq.animation.js"></script>
    </header>
    <body>
        <div id="preloader">
            <div id="blocktop"></div>
            <div id="logo"></div>
            <div id="loadline"></div>
            <div id="blockbottom"></div>
        </div>
    </body>
</html>

CSS:

html{
    overflow: hidden;
}


#preloader{
    width: 100%;
    height: 100%;
}

#logo{
    background-image: url('../img/logotest.png');
    width: 300px;
    height: 300px;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 1000;
}


#blocktop{
    background-color: #fff4ed;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -50%;
    z-index: 10;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);
}

#blockbottom{
    background-color: #ff7f33;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: -50%;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);

}

jQuery:

$(document).ready(function(){

    /*$("button").click(function() */
        setTimeout(function(){

        $("#blocktop").animate({
        left: '-120%',
        opacity: '0'},
        800
      );

        $("#blockbottom").animate({
        right: '-120%',
        opacity: '0'},
        800
      );


        $('#logo').fadeOut('700')
    },2000);

});
4

3 に答える 3

14

三角法を使用して、目的の角度を計算します。

var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

(数学オタクやその他の衒学者への注意: 逆正接は通常、高さを幅で割った値になります。ただし、この場合、水平線ではなく垂直線を歪めているため、上記のコードは望ましい結果が得られます。)

-webkit-jQuery の新しいバージョンでは、必要なまたは-moz-プレフィックスがその CSStransformプロパティに自動的に追加されることに注意してください。

display:none上記のコードが角度を変更できるようになるまで要素を変更しshow()、角度が計算された直後に要素を変更することもできます。

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

http://jsfiddle.net/mblase75/6a93T/10/

于 2013-01-07T17:05:24.240 に答える
6

上と右に 2 つの異なる境界線を持つ DOM 要素は、両方が交わる対角線になるという事実を利用しています。次に、DOM 要素の高さと幅をゼロに設定し、border-top-width を window-height に、border-right-width を window-width に設定します。サイズ変更時に JavaScript で更新する... 以上です。

コンテナをDOMに配置しました

<div id="diagonal_outer"><div id="diagonal"></div></div>

以下のCSSが必要です

div#diagonal_outer {
    position: fixed !important;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
}
div#diagonal {
    position: relative;

    border-color: #FAE9E1 #ffffff;
    border-style: solid;
    border-left-width: 0;       
    border-top-width: 10240px;
    border-right-width: 12800px;
    border-bottom-width: 0;

    height: 0;
    width: 0;

    left: 50%;
    top: 50%;
    margin-left: -6400px; /* half of border-right-width */
    margin-top: -5120px; /* half of border-top-width */

    z-index: -100;
}

サイズ変更時に実現する JavaScript に従う

jQuery(document).ready(function() {
    diagonal();
});

jQuery(window).resize(function() {
    diagonal();
});

var diagonal = function() {
    var wWidth = jQuery(window).width();
    var wHeight = jQuery(window).height();

    jQuery('#diagonal').css('left', 0);
    jQuery('#diagonal').css('top', 0);
    jQuery('#diagonal').css('margin-left', 0);
    jQuery('#diagonal').css('margin-top', 0);

    jQuery('#diagonal').css('border-right-width', wWidth);
    jQuery('#diagonal').css('border-top-width', wHeight);
};

OK、CSS-skewを使用したソリューションは素晴らしいですが、これは CSS <3 で動作します

于 2013-01-07T17:01:06.690 に答える
2

あなたはこれのためにあまり多くのことをする必要はありません。こちらのデモをご覧ください

HTML

<div class="diagonal"></div>

CSS

.diagonal {
    width: 0; 
    height: 0; 
    border-top: 110px solid transparent;
    border-right:110px solid blue; 
}
于 2013-01-07T17:22:13.713 に答える