TweenMax.js+Draggable.js 灯泡明灭、钟摆运动和灵感搜索 - 踏得网

可以用于创意/设计/动效搜索页面。拖拉灯泡，触发搜索动效。

gsap，bulb

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2792
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var A = document.createElement('audio');
A.src = 'http://www.freesound.org/data/previews/117/117697_646701-lq.mp3';
A.volume = .5;
var Lamp = document.getElementById("lampP"),
    svg = document.getElementById('idea');
for (var i = 1; i < 5; i++) {
    var newLamp = Lamp.cloneNode(true);
    svg.appendChild(newLamp);
    TweenLite.set(newLamp, {
        x: i * -70,
        className: i > 3 ? "eB" : "mB"
    });
};
TweenLite.set(".sB,.eB", {
    transformOrigin: "50% 0px"
})
var tl = new TimelineMax({
    paused: true,
    yoyo: true,
    onComplete: function() {
        TweenLite.to(".sB,.eB", 0.3, {
            rotation: 0,
            ease: Sine.easeIn,
            onComplete: AP
        });
        TweenLite.to(".sB .lamp,.eB .lamp", 0.3, {
            fill: "rgba(255,255,255,0.15)"
        });
        TweenLite.to(".report", 1, {
            text: {
                value: "Error #404 , New Ideas Not found !... pls try again"
            },
            delay: 0.3
        });
        D[0].enable();
    }
});
var T1 = TweenMax.fromTo(".sB", 0.3, {
    rotation: null
}, {
    rotation: 0,
    ease: Sine.easeIn
})
var T2 = TweenMax.to(".eB", 0.3, {
    rotation: 0,
    ease: Sine.easeOut,
    immediateRender: true
});
tl.add(T1).to(".sB .lamp", 0.3, {
        fill: "rgba(255,255,255,0.15)",
        ease: Elastic.easeOut.config(1, 0.5)
    }, 0)
    .staggerTo(".mB .lamp", 0.01, {
        fill: "white",
        repeat: 1,
        yoyo: true
    }, 0.025)
    .add(T2).to(".eB .lamp", 0.3, {
        fill: "white",
        ease: Elastic.easeIn.config(1, 0.5)
    }, "-=0.3")
    .add(AP, "-=0.35");
var D = Draggable.create(".sB", {
    type: "rotation",
    bounds: {
        minRotation: -70
    },
    onPress: function() {
        TweenLite.to("#T", 0.3, {
            fill: "rgba(0,0,0,0)"
        });
        TweenLite.set(".sB .lamp", {
            fill: "white"
        });
    },
    onDragEnd: PU
});

function PU() {
    TweenLite.to(".report", 0.5, {
        text: {
            value: "Searching..."
        }
    });
    var X = this.rotation;
    this.disable();
    T1.vars.startAt.rotation = X;
    T2.vars.css.rotation = -X;
    tl.seek(0).invalidate().restart().repeat(R(3, 15))
};

function AP() {
    A.currentTime = 0;
    A.play()
};

function R(min, max) {
    return min + Math.floor(Math.random() * (max - min))
};

/* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW */

编译

CSS

html,
body {
    padding: 0px;
}
body {
    background-color: #004a4a;
}
svg {
    overflow: visible;
    position: absolute;
    left: 50%;
    top: 9px;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}
.sB {
    cursor: pointer;
}
#back {
    position: absolute;
    left: 50%;
    top: 15%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'Oswald', arial;
    color: #007c7c;
    font-size: 50px;
    font-size: 6vw;
    text-align: center;
    white-space: nowrap;
}
.report {
    position: absolute;
    left: 50%;
    top: 70%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    font-family: tahoma, arial;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
}
.link {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: white;
    font-size: 2.4em;
    text-decoration: none;
}

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js"></script>
<div id="back">Sometimes , when i need New IDEAS</div>
<svg version="1.1" id="idea" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/<1999></1999>/xlink" width="349.698px" height="322.64px" viewBox="0 0 349.698 322.64" enable-background="new 0 0 349.698 322.64" xml:space="preserve">
    <defs>
        <filter id="glow" x="-50%" y="-50%" height="300%" width="300%">
            <feGaussianBlur stdDeviation="15" result="coloredBlur" />
            <feMerge>
                <feMergeNode in="coloredBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
    <rect y="-9" width="350" height="10" />
    <g id="lampP" class="sB">
        <path class="lamp" filter="url(#glow)" fill="rgba(255,255,255,0.15)" d="M314.726,322.64c19.314,0,34.972-15.656,34.972-34.97c0-8.15-4.803-15.631-9.486-21.57 c-4.958-6.285-7.514-11.752-10.449-16.758h-30.069c-2.968,5.058-5.456,10.421-10.453,16.762 c-4.678,5.937-9.483,13.419-9.483,21.566C279.759,306.984,295.416,322.64,314.726,322.64z"
        />
        <line fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="314.729" y1="217.962" x2="314.729" y2="0" />
        <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="301.347" y1="242.868" x2="328.285" y2="242.868" />
        <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="301.347" y1="233.019" x2="328.285" y2="233.019" />
        <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="304.871" y1="223" x2="324.761" y2="223" />
        <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="310.046" y1="218" x2="319.585" y2="218" />
        <path fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M314.816,310.331 c12.415,0,22.511-10.097,22.511-22.508" />
    </g>
    <text id="T" x="320" y="210" fill="white" font-family="arial" font-size="1em"> ▼ Drag this one</text>
</svg>
<span class="report"></span>