Ich versuche, beim Laden der Seite die folgenden EFFEKTE zu erzielen. Das Bild beginnt bei 0% Deckkraft und außerhalb der Seite. Anschließend wird es in Position verschoben, während eine Deckkraft von 100% erreicht wird. Ich habe es geschafft, die Deckkraft zum Laufen zu bringen, aber nicht die Folie

Mein Code lautet wie folgt:

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;
}

Das andere CSS ist nur Bootstrap Stuff.

Hier ist der versuchte jQuery Slide Up

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

Ihre Hilfe wäre sehr dankbar. Die Website kann online HIER eingesehen werden

0
user2078379 3 Dez. 2013 im 07:01

4 Antworten

Beste Antwort

Sie können diese Effekte tatsächlich ohne Verwendung von Javascript erstellen. mit CSS3

@keyframes 

Hier ist meine Geige http://jsfiddle.net/KaDy8/20/

1
StaleMartyr 3 Dez. 2013 im 03:11

Ich denke das wird funktionieren:

$(document).ready(function(){
    $("#myId").css({top:1000,position:'absolute'});
    $("#myId").animate({top:100}, 800);
 });
1
PSL 3 Dez. 2013 im 03:20

Mach es mit CSS. keine Bedürfnisse von Jquery

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

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

Beispielsweise

0
vbotio 3 Dez. 2013 im 03:10

Eine sehr ähnliche Antwort hier JQuery Animate () schiebt div vom Ende der Seite nach oben

$('#content').animate({'margin-top': '50px'}, 1000);
0
Community 23 Mai 2017 im 12:23