0

http://www.lippincott.com/work/のようなポートフォリオ ページを作成しようとしています。

しかし、このオーバーレイ効果 (上記の URL のポートフォリオ アイテムを参照してください) を実装する方法は、要素、たとえば DIV にカーソルを合わせると、マウスの方向に応じてオーバーレイが表示/アニメーション化されます。

4

2 に答える 2

1

プラグインは必要ありません！これが同じ効果をやり直すjsfiddleです。

<div id="BigDiv">

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

</div>​

CSSは次のとおりです。

.MyWrapper{
    margin:3px 3px;
    float:left;
    width:50px;
    height:50px;
    border:2px solid green;}

.MyContent{
    width:50px;
    height:50px;
    position:relative;}

.MyOverlay{
    opacity:0;   
    width:0px;
    height:50px;
    position:relative;
    top:-50px;
    left:0px;
    background:blue;}

これがjavascriptです：

    $(document).ready(function () {
        PageHandler();
    });

    function PageHandler() {

    $('#BigDiv').on({

        mouseenter: function() {
            $(this).parent().find('.MyOverlay').css({
                opacity: '0.5',
                width: '0px'
            }).stop().animate({
                width: '50px'
            }, 500);
        },
    }, '.MyContent');

    $('#BigDiv').on({

        mouseleave: function() {
            $(this).parent().find('.MyOverlay').each(function() {
                $(this).stop().animate({
                    opacity: '0'
                }, 300, function() {
                    $(this).css('width', '0px');
                });} 
            )}
    }, '.MyWrapper');
}

下の5がよく見えるように、不透明度を0.95ではなく0.5のままにしました。代わりに写真を入れると見栄えが良くなります。アニメーションの長さでプライすることもできます。しかし、全体として、それは同じ効果です。あなたはそれをあなたのデザインで機能させる必要があります。プラグインはなく、jqueryだけです。

于 2012-07-13T09:12:49.090 に答える
0

これがどのように機能するかを説明する tympanus.net で公開された記事があります: http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

これは、css を適切に設定するだけで使用できるシンプルなプラグインです。基本的に、ホバーした要素に出入りするときのマウスのオフセットをチェックし、それに基づいて、ホバーをアニメーション化する側を決定します。

于 2012-09-03T21:28:38.687 に答える