Question

我对this website的图像效果感到好奇。具体来说，当您滚过它们时，图像如何在视图中从左向右“解开”。

我已将网站保存到桌面并删除了所有不必要的CSS / Javascript / HTML。我想出了这个：

$.fn.is_on_screen = function(e) {
    // e.prevenDefault();
    var win = $(window);
    //Object to Check
    obj = $(this);
    // return false;
    //the top Scroll Position in the page
    var scrollPosition = win.scrollTop();
    //the end of the visible area in the page, starting from the scroll position
    var visibleArea = parseInt(win.scrollTop() + win.height());

    var vercible_height = win.height() / 2;
    //the end of the object to check
    var objEndPos = parseInt(obj.offset().top + obj.outerHeight());
    if (visibleArea >= objEndPos) {
        if ($('body').hasClass('clicked')) {
            if (!(obj.hasClass('inner-box'))) {
                obj.addClass('inner-box');
                obj.width('100%');
            }
        }
    }
};


$(document).ready(function() {
    if ($('.inner-box').length > 0) {
        $('.inner-box').removeClass('inner-box');
    }
    $(window).scrollTop(0);
    left_nav_click();
    find_active_contnt();
    onScroll();
});
$(window).on('load', function() {
    manage_height();
});


$(document).on("scroll", function() {
    onScroll();
    find_on_scroll()
});

function left_nav_click() {
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        // $(document).off("scroll");
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 2
        }, 600, 'swing', function() {
            // window.location.hash = target;
            $(document).on("scroll", onScroll);
            find_active_contnt();
        });
    });
}

function onScroll(event) {
    var counter = 0;
    var scrollPos = $(document).scrollTop();
    /* if (counter <= 10) {
         manage_height();
     }
     counter += 1;*/
    $('#menu a').each(function() {
        var currLink = $(this);

        //if(currLink.attr("href") != '#home'){

        var refElement = $(currLink.attr("href"));

        if (refElement.length > 0) {
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                if (currLink.attr("href") == '#home') {
                    $('#fd').hide();
                } else {
                    $('#fd').show();
                }
                $('#menu ul li a').removeClass("active");
                currLink.addClass("active");
                //var new_text = currLink.text();
                var new_text = currLink.data('text');
                $('#fd').find('.text-change').children('span').text(new_text);
            } else {
                currLink.removeClass("active");
            }
        }

    });
}

function manage_height() {
    if ($('.inner-img').length > 0) {
        $('.inner-img').map(function() {
            $(this).height($(this).children('img').height());
            $(this).width('80%');
        });
    }
    if ($('.buttons').length > 0) {
        $('.buttons').map(function() {
            $(this).width('80%');
        });
    }
}

function find_on_scroll() {
    if ($('.inner-img').length > 0) {
        $('.inner-img').map(function() {
            $(this).is_on_screen();
        });
    }
    if ($('.buttons').length > 0) {
        $('.buttons').map(function() {
            $(this).is_on_screen();
        });
    }
}

function find_active_contnt() {
    var new_text = '';
    $('#menu a').each(function() {
        if ($(this).hasClass('active')) {
            new_text = $(this).data('text');
        }
    });
    $('#fd').find('.text-change').children('span').text(new_text);
}


(function($) {
    $(function() {
        var scroll = $(document).scrollTop();
        var headerHeight = $('.nav-scroll .mob-head').outerHeight(true);
        $(window).scroll(function() {
            var scrolled = $(document).scrollTop();
            if (scrolled > scroll) {
                $('#sth').removeClass('time');
                $('.nav-scroll').removeClass('fixed');
            } else {
                $('#sth').addClass('time');
                $('.nav-scroll').addClass('fixed');
            }
            scroll = $(document).scrollTop();
        });
    });
})(jQuery);

.image-sec ul li .inner{float:left;width:100%;transition:width 2s ease;-ms-transition:width 2s ease;-moz-transition:width 2s ease;-webkit-transition:width 2s ease;-o-transition:width 2s ease;background-size:cover;-o-background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;}
.image-sec ul li .inner.inner-box{width:100%;}
.inner-img{background-position:50% 50%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;width:100%;transition:all 2s ease;-ms-transition:all 2s ease;-moz-transition:all 2s ease;-webkit-transition:all 2s ease;-o-transition:all 2s ease;}
img.hidden-img{max-width:none;opacity:0;visibility:hidden;width:100%;}

<!DOCTYPE html>
<!-- saved from url=(0023)http://thewhitwell.com/ -->
<html class="js csstransitions"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Whitwell</title>
    <link href="css" rel="stylesheet" type="text/css">

    <link href="style.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript" src="jquery-main.js"></script>

    <script type="text/javascript" src="scroll-menu.js"></script>


</style></head>
    


                                <div class="mar wide mar-bottom">
                                    <div class="inner-img inner-box" style="height: 800px; width: 100%; background-image: url(&quot;http://thewhitwell.com/images/uploads/ww-lobby.jpg&quot;);">
                                        <img src="ww-lobby.jpg" class="hidden-img">
                                    </div>
                                    </div>



</body></html>
► Run code snippetCopy snippet to answer

Answer 1

您刚刚没有导入jquery lib。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

将此添加到您的网站首页并且它将起作用

直播代码：http://codepen.io/anon/pen/zqgWpo

视图上的图像变换

1 个答案: