使用GSAP实现的卡片揭露动画

Dribble Profile Card Reveal GSAP 可用于一些猜谜/猜奖类营销或游戏页面制作。

html5, card

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1460
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $card = $('.m-card-list__item'),
    open = false;

$cardItem = {
    base: $card,
    background: $card.find('.m-card-list__item__background'),
    content: $card.find('.m-card-list__item__content'),
    heading: $card.find('.m-card-list__item__heading'),
    image: $card.find('.m-card-list__item__image'),
    button: $card.find('.m-button')
};

var cardToggle = function(e, index) {
    open = !open;

$this = $(this);

topY = $this.offset().top - $this.outerHeight();

TweenMax.to($(window), 1, {
        scrollTo: {
            y: topY,
            autoKill: true
        },
        ease: Power3.easeOut
    });

$cc = {
        base: $this,
        background: $this.find('.m-card-list__item__background'),
        content: $this.find('.m-card-list__item__content'),
        heading: $this.find('.m-card-list__item__heading'),
        image: $this.find('.m-card-list__item__image'),
        button: $this.find('.m-button'),
        profileimg: $this.find('.profile-image'),
        profileHeader: $this.find('.profile-heading'),
        image: $this.find('.m-card-list__item__image'),
        close: $this.find('.close-btn')
    };

var rW = $cc.base.innerWidth(),
        rH = $cc.base.innerHeight(),
        cW = $cc.content.innerWidth(),
        cH = $cc.content.innerHeight();

$card.addClass('m-card-list__item--clear-props');

TweenMax
        .to($card.not($cc.base), .3, {
            autoAlpha: open ? 0 : 1,
            delay: open ? 0 : .3
                //ease: Elastic.easeOut.config(1, .5)
        });

TweenMax
        .to($cc.background, .6, {
            width: open ? cW : rW,
            height: open ? cH : rH,
            ease: Elastic.easeOut.config(1, .5),
            delay: open ? .3 : 0
        });

TweenMax
        .fromTo($cc.button, open ? .4 : .1, {
            autoAlpha: 1
        }, {
            autoAlpha: open ? 0 : 1,
            ease: Cubic.easeOut
        });

TweenMax
        .fromTo($cc.content, open ? .4 : .1, {
            autoAlpha: 1
        }, {
            autoAlpha: open ? 1 : 0,
            ease: Cubic.easeOut
        });

if (open) {

TweenMax
            .fromTo($cc.profileimg, open ? .4 : .1, {
                y: -10,
                opacity: 0
            }, {
                y: 0,
                autoAlpha: 1,
                ease: Cubic.easeOut,
                delay: .6
            });

TweenMax
            .fromTo($cc.profileHeader, open ? .4 : .1, {
                y: -10,
                opacity: 0
            }, {
                y: 0,
                autoAlpha: 1,
                ease: Cubic.easeOut,
                delay: .6
            });

TweenMax
            .fromTo($cc.image, open ? .4 : .1, {
                y: -10,
                opacity: 0
            }, {
                y: 0,
                autoAlpha: 1,
                ease: Cubic.easeOut,
                delay: .8
            });

TweenMax
            .fromTo($cc.close, open ? .4 : .1, {
                y: -10,
                opacity: 0
            }, {
                y: 0,
                autoAlpha: 1,
                ease: Cubic.easeOut,
                delay: .6
            });

}

};

$cardItem.base.on('click', cardToggle);

//*****Hunt Js********//

//Please check out this great plugin here
//https://github.com/jeremenichelli/hunt

var huntedElements = [],
        viewport = window.innerHeight,
        THROTTLE_INTERVAL = 100;

/**
     * Constructor for element that should be hunted
     * @constructor Hunted
     * @param {Node} element
     * @param {Object} config
     */
    var Hunted = function(element, config) {
        this.element = element;

// instantiate element as not visible
        this.visible = false;

for (var prop in config) {
            if (config.hasOwnProperty(prop)) {
                this[prop] = config[prop];
            }
        }
    };

/**
     * Fallback function
     * @method noop
     */
    var noop = function() {};

// by default offset is zero
    Hunted.prototype.offset = 0;

// by default trigger events only once
    Hunted.prototype.persist = false;

// fallback enter function to avoid sanity check
    Hunted.prototype.enter = noop;

// fallback out function to avoid sanity check
    Hunted.prototype.out = noop;

/**
     * Adds one or more elements to the hunted elements array
     * @method add
     * @param {Array|Node} elements
     * @param {Object} options
     */
    var add = function(elements, options) {
        // sanity check of arguments
        if (elements instanceof Node === false && typeof elements.length !== 'number' || typeof options !== 'object') {
            throw new TypeError('Arguments must be an element or a list of them and an object');
        }

// treat single node as array
        if (elements instanceof Node === true) {
            elements = [elements];
        }

var i = 0,
            len = elements.length;

// add listeners for the first element
        if (huntedElements.length === 0) {
            window.addEventListener('resize', resizeThrottled);
            window.addEventListener('scroll', scrollThrottled);
        }

// add elements to general hunted array
        for (; i < len; i++) {
            huntedElements.push(new Hunted(elements[i], options));
        }

// check if recently added elements are visible
        huntElements();

i = len = null;
    };

/**
     * Updates viewport and elements metrics
     * @method updateMetrics
     */
    var updateMetrics = function() {
        viewport = window.innerHeight;

// check if new elements became visible
        huntElements();
    };

/**
     * Checks if hunted elements are visible and resets ticking
     * @method huntElements
     */
    var huntElements = function() {
        var len = huntedElements.length,
            hunted,
            rect;

while (len) {
            --len;

hunted = huntedElements[len];
            rect = hunted.element.getBoundingClientRect();

/*
             * trigger (enter) event if element comes from a non visible state and the scrolled viewport has
             * reached the visible range of the element without exceeding it
             */
            if (!hunted.visible && rect.top - hunted.offset < viewport && rect.top >= -(rect.height + hunted.offset)) {
                hunted.enter.apply(hunted.element);
                hunted.visible = true;
            }

/*
             * trigger (out) event if element comes from a visible state and it's out of the visible
             * range its bottom or top limit
             */
            if (hunted.visible && (rect.top - hunted.offset >= viewport || rect.top <= -(rect.height + hunted.offset))) {
                hunted.out.apply(hunted.element);
                hunted.visible = false;

// when hunting should not persist kick element out
                if (!hunted.persist) {
                    huntedElements.splice(len, 1);

// remove listeners when array is empty
                    if (huntedElements.length === 0) {
                        window.removeEventListener('resize', resizeThrottled);
                        window.removeEventListener('scroll', scrollThrottled);
                    }
                }
            }
        }

hunted = len = null;
    };

/**
     * Prevents overcall during global specified interval
     * @method throttle
     * @param {Function} fn
     * @returns {Function}
     */
    var throttle = function(fn) {
        var timer = null;

return function() {
            if (timer) {
                return;
            }
            timer = setTimeout(function() {
                fn.apply(this, arguments);
                timer = null;
            }, THROTTLE_INTERVAL);
        };
    };

var resizeThrottled = throttle(updateMetrics);
    var scrollThrottled = throttle(huntElements);

return add;
});

hunt(document.getElementsByClassName('m-card-list__item'), {
    enter: function() {
        this.classList.add('m-card-list__item--visible');
    },
    out: function() {
        // this.classList.remove('m-card-list__item--visible');
    },
    persist: false
});

编译

CSS

html {
    box-sizing: border-box;
    font-smoothing: antialiased;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    background-color: #333;
    font-family: 'Open Sans';
    padding-top: 100px 2% 0 2%;
}
.l-container {
    max-width: 500px;
    margin: 0 auto;
}
.m-card-list {
    margin: 0 auto;
}
.m-card-list__item {
    position: relative;
    display: inline-block;
    width: 45%;
    height: 130px;
    margin: 1%;
    transform: translate3d(0, 0, 20rem) rotateX(80deg) skewY(10deg);
    transition: 200ms opacity linear, 0ms transform 200ms;
    transform-origin: 50% 0;
    will-change: opacity, transform;
    opacity: 0;
    cursor: pointer;
}
.m-card-list__item .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: .6;
    visibility: hidden;
}
.m-card-list__item__background {
    position: absolute;
    bottom: 50%;
    right: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.4);
    transform: translate(50%, 50%);
}
.m-card-list__item__content {
    opacity: 0;
    width: 100%;
    position: absolute;
    padding: 2rem;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
@media (min-width: 600px) {
    .m-card-list__item__content {
        width: 150%;
    }
}
.m-card-list__item__heading {
    text-align: center;
    visibility: hidden;
}
.m-card-list__item__image {
    display: block;
    margin: 0 auto;
    width: 100%;
    visibility: hidden;
}
.m-card-list__item .profile-image {
    border-radius: 50% 50%;
    display: inline-block;
    width: 20%;
    margin-right: 3%;
    visibility: hidden;
    opacity: 0;
}
.m-card-list__item .profile-heading {
    width: 68%;
    display: inline-block;
}
.m-card-list__item .profile-heading h3 {
    text-transform: uppercase;
    font-size: .8em;
    margin-bottom: 0;
}
.m-card-list__item .profile-heading p {
    font-size: .8em;
    margin-top: 0;
}
.m-card-list__item .m-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.m-card-list__item--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    transition: 100ms opacity linear 150ms, 666ms transform cubic-bezier(0.8, 0.3, 0.25, 1.66);
}
.m-card-list__item--clear-props {
    transform: none;
    transition: none;
}
.m-button {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60px;
    color: #ea4c89;
}

HTML

<div class="m-card-list__item m-card-list__item--expander">
            <div class="m-card-list__item__background"></div>
            <div class="m-card-list__item__content">
                <div class="m-card-list__item__content__profile">
                    <i class="fa fa-times close-btn" aria-hidden="true"></i>
                    <img class="profile-image" src="https://d13yacurqjgara.cloudfront.net/users/24478/avatars/original/twitter.jpg?1305138743">
                    <div class="profile-heading">
                        <h3> Music Review Concept </h3>
                        <p>by Scott Blackburn on Oct 12, 2013</p>
                    </div>
                </div>
                <img class="m-card-list__item__image" src="https://d13yacurqjgara.cloudfront.net/users/24478/screenshots/1270281/dribbble_wip.jpg" alt="Dribbble wip">
            </div>
            <a class="m-button"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
        </div>

Dribble Profile Card Reveal GSAP 可用于一些猜谜/猜奖类营销或游戏页面制作。

html5, card

编辑器支持Emmet

快捷键

Dribble Profile Card Reveal GSAP 可用于一些猜谜/猜奖类营销或游戏页面制作。

html5, card

使用Vue和GSAP实现的AI机器人捕虫动画

使用SVG clipPath实现带斜向轮播动画的广告条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：