灑花特效.html

<!--
# sandbox url 

https://jsfiddle.net/quaeadk1/
-->

<style>
.confetti-container {
    perspective: 700px;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.confetti {
    position: absolute;
    z-index: 0;
    top: -10px;
    border-radius: 0
}

.confetti--animation-slow {
    animation: confetti-slow 20.25s linear 1 forwards
}

.confetti--animation-medium {
    animation: confetti-medium 1.75s linear 1 forwards
}

.confetti--animation-fast {
    animation: confetti-fast 1.25s linear 1 forwards
}

@keyframes confetti-slow {
    0% {
        transform: translate3d(0,0,0) rotateX(0) rotateY(0)
    }

    100% {
        transform: translate3d(120px,105vh,0) rotateX(360deg) rotateY(180deg)
    }
}

.contents {
    padding: 30px;
    background: #dd437c;
    color: #FFF;
}
</style>

<!-- style -->

<div class="js-container contents">
  <div>
    <h1>
      something title
    </h1>
    <p>
      contents..........<br />
      contents..........<br />
      contents..........<br />
      contents..........<br />
    </p>
  </div>
</div>

<!-- script -->
<script>
    const Confettiful = function(el) {
        this.el = el;
        this.containerEl = null;

        this.confettiFrequency = 10;
        this.confettiColors = ['#fce18a', '#ff726d', '#b48def', '#f4306d'];
        this.confettiAnimations = ['slow'];

        this._setupElements();
        this._renderConfetti();
    };

    Confettiful.prototype._setupElements = function() {
        const containerEl = document.createElement('div');
        const elPosition = this.el.style.position;

        if (elPosition !== 'relative' || elPosition !== 'absolute') {
            this.el.style.position = 'relative';
        }

        containerEl.classList.add('confetti-container');

        this.el.appendChild(containerEl);

        this.containerEl = containerEl;
    };

    Confettiful.prototype._renderConfetti = function() {
        this.confettiInterval = setInterval( () => {
                const confettiEl = document.createElement('div');
        const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
        const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
        const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
        const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];

        confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
        confettiEl.style.left = confettiLeft;
        confettiEl.style.width = confettiSize;
        confettiEl.style.height = confettiSize;
        confettiEl.style.backgroundColor = confettiBackground;

        confettiEl.removeTimeout = setTimeout(function() {
            confettiEl.parentNode.removeChild(confettiEl);
        }, 40000);

        this.containerEl.appendChild(confettiEl);
    }, 60);
    };

    window.confettiful = new Confettiful(document.querySelector('.js-container'));
</script>