Question

我正在寻求创建一个布局非常流畅的网站，就像它是动态的而不仅仅是BLAM，这是一个网站。

让我详细说明：我现在已经安装了这个设置，这样你就可以知道我想要的工作。 enter image description here

我的意思是动态是，我想要在页面加载时我想让图像滑入（也许是横幅，还没有决定所有设计，只是抛出建议。）。当图像滑入时，我希望它能够缓慢地扩展和放松，就像它总是在运动中一样。当它悬停在它上面时，应该略微扩大并在它徘徊时停止它的运动。

这是我正在寻找的主要需求，对于它是如何完成我有点无能为力。我认为javascript很明显，但我找不到任何我找到的指南，因此我需要一些直接的帮助。

非常感谢，谢谢！

我尝试使用jquery使图像淡入淡出，但似乎无法工作，继承我的代码：

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
        body {
            background: url("images/BG.png") repeat;
        }
        .logo {
            width: 640px;
            height: 360px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 40%;
            margin: auto;
            text-align: center;
        }
        .middlebanner {
            width: 100%;
            height: 60%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 100%;
            margin: auto;
            text-align: center;
        }
        </style>

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <title>Electronic Future Copenhagen - Choose your game</title>
        <img src="images/middlebanner.png" class="middlebanner" />
        <img src="images/logo5.png" class="logo" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <a href="http://jquery.com">jQuery</a>
        <script src="jquery.js"></script>"

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
        $( document ).ready(function() {

        $("#logo").animate({
            left: "300"
        }, {
            duration: 2000
        });

        $( "#logo" ).hover(function() {
            $( this ).fadeOut( 100 );
            $( this ).fadeIn( 500 );
        });


        });
        </script>
    </body>

</html>

Answer 1

以下是可能对您有所帮助的部分代码：

//Above is pure JS(no jQuery) which does the loading part, aka pre-loader
$(document).ready(function() {
    //Here is when loading is 100% completed, will trigger the function
    $(window).load(function() {
         loadComplete();
    });
});

Answer 2

这是您决定使用jQuery库时应该开始的地方。

向下滑动 https://api.jquery.com/slideDown/

<强>动画 https://api.jquery.com/animate/

<强>悬停 http://api.jquery.com/hover/

Answer 3

您的想法可能会让网站访问者感到有些困惑。想想你正在寻找的所有东西都在流动的页面，所以你无法找到任何东西。

关键是要有一个“普通”页面，让一些引人注目的元素飞来飞去。

技术方面取决于你想要达到的目的。首先，您需要考虑浏览器性能（特别是在移动设备上）。

实现这一目标的一种方法是jQuery动画，另一种方法是css3 animate / transition。最简单的jQuery动画示例是api：https://api.jquery.com/animate/。显然我没有考虑css教程。

Answer 4

这里有一点fiddle让你上路......

只需动画div和图像等即可获得所需的效果。

$(document).ready(function () {
    $("#efclogo").animate({
        left: "300"
    }, {
        duration: 2000
    });
});

在功能上添加了鼠标悬停功能，以便您了解其功能。

$( "#efclogo" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );

});

更新了fiddle

打造一个流畅，动态的网站

4 个答案: