Question

我正在尝试在页面加载时实现以下EFFECT。图像从0％不透明度开始离开页面，然后滑动到位，同时实现100％不透明度。我设法让不透明度工作但不是幻灯片

我的代码如下：

HTML

<head>
title>Nic Brown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript">
    $(document).ready(function() {
            window.onload = function() {
                $('#logo').hide().fadeIn(2000);
            };
</script>
<script type="text/javascript" src="js/plugins/slideup.js"></script>
</head>
<body>
    <div class="navbar navbar-mine navbar-static-top">
        <div class="container">
            <div class="name">
                <a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px">NICHOLAS
                    <em>BROWN</em>
                </a>
            </div>
            <button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="about.html" style="font-family:'Roboto'; font-weight:300;">About</a>
                    </li>
                    <li>
                        <a href="#about" style="font-family:'Roboto'; font-weight:300;">Portfolio</a>
                    </li>
                    <li>
                        <a href="#about" style="font-family:'Roboto'; font-weight:300;">Social</a>
                    </li>
                    <li>
                        <a href="#about" style="font-family:'Roboto'; font-weight:300;">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="frontbg">
        <img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" />
    </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

CSS

.frontbg {
width: 80%;
height: auto;
left: 10%;
top: 15%;
position: fixed;
}
.frontbg img {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity:0;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}

其他CSS只是Bootstrap Stuff。

以下是尝试过的jQuery Slide Up

 $(document).ready(function() {
          $('.frontbg').delay(3000).animate({bottom:"15%"},600);
    });

非常感谢您的帮助。该网站可在线查看HERE

Answer 1

您实际上可以在不使用javascript的情况下创建效果。使用css3＆＃39;

@keyframes

继承我的小提琴http://jsfiddle.net/KaDy8/20/

Answer 2

我想这会奏效：

$(document).ready(function(){
    $("#myId").css({top:1000,position:'absolute'});
    $("#myId").animate({top:100}, 800);
 });

Answer 3

使用css做到这一点。没有Jquery的需要

@-moz-keyframes slidein {
  from {margin-bottom:0%;}
  to {margin-top:35%;}
}

@-webkit-keyframes slidein {
  from {margin-bottom:0%;}
  to {margin-top:15%;}
}

例如

Answer 4

这里有一个非常相似的答案 JQuery Animate() slide div up from bottom of page

$('#content').animate({'margin-top': '50px'}, 1000);

在页面加载上向上滑动图像

4 个答案: