0
所以我在製作我的網站時有一點點阻礙，我需要通過添加動畫來增加動畫效果，但我似乎無法獲得此效果：https://youtu.be/bToBgJYI8Pc。我正在使用教程（https://css-tricks.com/slide-in-as-you-scroll-down-boxes/），因爲我不知道jQuery，因爲我不認爲我需要它。我的問題是，似乎jQuery沒有找到我想要動畫的元素的正確位置（它們被重新定位爲position: relative;）jQuery查找元素相對於容器的位置
示例1.這就像jQuery在css之前運行，沒有采取任何樣式帳戶。
例2.這就像錨元素都低於他們應該是頁面的第4（我甚至不知道，如果在CSS/HTML/jQuery的甚至還存在錨）
例這是一個GIF向你展示我的意思。 http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8請看下'Screamer''Swezii'和'KINZU'下的文字身體
請記住，我對jQuery完全陌生，因此您需要向我詳細解釋您在說什麼if它與jQuery有關。
這裏是代碼
$(document).ready(function() {
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".animated");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
});/* Managers */
/* 278 PX */
#managersbg {
background-color: rgba(255, 153, 0, 0.79);
position: absolute;
left: 0px;
top: 495px;
width: 100%;
}
@media (min-width: 288px) {
#managersbg {
top: 495px;
}
}
@media (min-width: 295px) {
#managersbg {
top: 470px;
}
}
@media (min-width: 350px) {
#managersbg {
top: 455px;
}
}
@media (min-width: 358px) {
#managersbg {
top: 460px;
}
}
@media (min-width: 364px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 416px) {
#managersbg {
top: 410px;
}
}
@media (min-width: 450px) {
#managersbg {
top: 420px;
}
}
@media (min-width: 485px) {
#managersbg {
top: 400px;
}
}
@media (min-width: 510px) {
#managersbg {
top: 410px;
}
}
@media (min-width: 540px) {
#managersbg {
top: 420px;
}
}
@media (min-width: 550px) {
#managersbg {
top: 470px;
}
}
@media (min-width: 624px) {
#managersbg {
top: 450px;
}
}
@media (min-width: 650px) {
#managersbg {
top: 460px;
}
}
@media (min-width: 671px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 775px) {
#managersbg {
top: 410px;
}
}
@media (min-width: 850px) {
#managersbg {
top: 420px;
}
}
@media (min-width: 914px) {
#managersbg {
top: 400px;
}
}
h4 {
text-align: center;
font-weight: 500
}
#managers {
position: relative;
top: 15px;
}
#screamer,
#swezii,
#kinzu {
background-image: url(../images/screamer.png);
background-size: 100%;
width: 60px;
height: 60px;
border-radius: 50%;
border-color: rgba(255, 153, 0, 0);
margin: 0 auto;
}
#screamer {
margin-top: 20px;
}
#swezii {
position: relative;
top: 125px;
}
#kinzu {
position: relative;
top: 275px;
}
#manager1,
#manager2,
#manager3 {
position: relative;
}
#manager1 {
top: -115px;
}
#manager1,
#manager2,
#manager3 {
font-weight: 600
}
#manager2 {
top: 45px;
}
#manager3 {
top: 195px;
}
#text1 {
position: relative;
top: -165px;
}
#text2 {
position: relative;
top: -50px;
}
@media (min-width: 550px) {
#text1,
#text2,
#text3 {
position: relative;
left: 50%;
transform: translateX(-25%);
text-align: center;
}
}
p {
margin: 0 auto;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>TheVersionArts Studio</title>
<meta name="description" content="TheVersionArts is a private design studio. We provide clients with quality design at a small cost.">
<meta name="author" content="TheVersionArts">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/base.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
\t -------------------------------------------------- -->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="javascript/animated.js"></script>
</head>
<body>
<!-- Primary Page Layout
\t –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<img src="images/bg.png" id="background">
<div id="headerbg">
<div class="container">
<div class="row">
<div class="five columns">
<img src="images/thv-header.png" id="header">
</div>
<div class="seven columns">
<nav>
<ul>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#designers">Designers</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div id="aboutbg">
<div class="container2">
<div class="row">
<div class="twelve columns">
<h4 id="about">About Us</h4>
</div>
<div class="animated">
<div class="twelve columns">
<p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
clients. We don't sell graphics, or designs. We sell art and colours.</p>
</div>
</div>
<div class="animated">
<div class="seven columns" id="aboutbar"></div>
</div>
</div>
</div>
</div>
<div id="managersbg">
<div class="container3">
<div class="row">
<div class="animated">
<h4 id="managers">Our Managers</h4>
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column" id="screamer">
</div>
</div>
<div class="animated">
<div class="one-third-column" id="swezii">
</div>
</div>
<div class="animated">
<div class="one-third-column" id="kinzu">
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="one-third-column">
<p id="manager1">Screamer</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<p id="manager2">Swezii</p>
</div>
</div>
<div class="animated">
<div class="one-third-column">
<p id="manager3">KINZU</p>
</div>
</div>
</div>
<div class="row">
<div class="animated">
<div class="seven columns">
<p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
</div>
<div class="animated">
<div class="seven columns">
<p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
</div>
</div>
<div class="animated">
<div class="seven columns">
<p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>