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. Это как якоря для элементов являются четвёртой страницы ниже, где они должны быть (я даже не знаю, если якоря существуют даже в CSS/HTML/JQuery)
Пример 3. Вот GIF, чтобы показать вам, что я имею в виду. http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8 Посмотрите на текстовые тела под «Screamer» «Swezii» и «KINZU»
Имейте в виду, что я совершенно новичок в jQuery, поэтому вам нужно будет подробно объяснить мне, что вы говорите, если это связано с 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>