Слайд-изображение вверх при загрузке страницы

0

Я пытаюсь достичь следующего ЭФФЕКТ при загрузке страницы. Изображение начинается с непрозрачности 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);
    });

Ваша помощь будет высоко оценена. Веб-сайт можно посмотреть в Интернете ЗДЕСЬ

Теги:

4 ответа

1
Лучший ответ

Фактически вы можете создавать эти эффекты без использования javascript. используя css3's

@keyframes 

heres my fiddle http://jsfiddle.net/KaDy8/20/

  • 0
    Огромное спасибо. Работал как шарм!
1

Думаю, это сработает:

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

сделайте это с помощью css. нет необходимости в JQuery

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

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

например

0

Очень похожий ответ здесь. JQuery Animate() slide div вверх снизу страницы

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню