【jQuery】Animate.CSSとjQueryを使用した3DカーテンスタイルのアニメーションCSS3 3D Curtain

jQuery

css3-3d-curtain

February 7, 2018

Animate.CSSとjQueryを使用した3Dカーテンスタイルのアニメーション。

CSS

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"/>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        .curtains {
            position: relative;
        }
        .curtain {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 100vh;
            line-height: 100vh;
            text-align: center;
            font-size: 300px;
            display: none;
            overflow: hidden;
        }
        .curtain:nth-child(1){
            display: block;
        }
        .curtain .half-left {
            width: 50%;
            height: 100%;
            float: left;
        }
        .curtain .half-right {
            width: 50%;
            height: 100%;
            background-color: #bbb;
            margin-left: 50%;
        }
        .toolbox{
            position: absolute;
            top:300px;
            right:20px;
            z-index: 999999;
            width: 80px;
        }
        .button{
            min-width:50px;
            height: 40px;
            line-height: 40px;
            display: block;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            color: #222;
            border-radius: 3px;
        }
        .button:hover{
            background-color: #dddddd;
        }
    </style>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * jQuery throttle / debounce - v1.1 - 3/7/2010
     * http://benalman.com/projects/jquery-throttle-debounce-plugin/
     *
     * Copyright (c) 2010 "Cowboy" Ben Alman
     * Dual licensed under the MIT and GPL licenses.
     * http://benalman.com/about/license/
     */
    ;(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
</script>
<script type="text/javascript">
    ;(function($){
        "use strict"
        var current = 0;
        $(document).ready(function(){
            checkButtonStatus(current);
            $("#up").on("click",openNextCurtain);
            $("#down").on("click",openPreviousCurtain);
            $("body").on("mousewheel",$.debounce( 200, true, function(e){
                var scrollDirection = e.originalEvent.wheelDelta || -1 * e.originalEvent.detail;
                if (scrollDirection<0){
                    if($("#down").is(":visible")) openPreviousCurtain();
                }else{
                    if($("#up").is(":visible")) openNextCurtain()
                }
            }));
        });
        function openNextCurtain(){
            var currentCurtain = $(".curtains .curtain:eq("+current+")");
            currentCurtain.addClass("animated zoomOut");
            current++;
            var nextCurtain = $(".curtains .curtain:eq("+current+")");
            nextCurtain.css("display","block");
            nextCurtain.find(".half-left").addClass("fadeInLeft");
            nextCurtain.find(".half-right").addClass("fadeInRight");
            nextCurtain.find(".half-left").removeClass("fadeOutLeft");
            nextCurtain.find(".half-right").removeClass("fadeOutRight");
            checkButtonStatus(current);
        }
        function openPreviousCurtain(){
            var currentCurtain = $(".curtains .curtain:eq("+current+")");
            current--;
            var previousCurtain = $(".curtains .curtain:eq("+current+")");
            currentCurtain.find(".half-left").removeClass("fadeInLeft");
            currentCurtain.find(".half-right").removeClass("fadeInRight");
            currentCurtain.find(".half-left").addClass("fadeOutLeft");
            currentCurtain.find(".half-right").addClass("fadeOutRight");
            previousCurtain.removeClass("zoomOut");
            previousCurtain.addClass("zoomIn");
            checkButtonStatus(current);
        }
        function  checkButtonStatus(offset){
            if(offset==0){
                $("#down").hide();
            }else if(offset == ($(".curtains .curtain").length-1)){
                $("#up").hide();
            }else{
                $("#down").show();
                $("#up").show();
            }
        }
    })(jQuery)
</script>

Latest Posts

Related Posts