0
У меня нет ничего общего с jQuery. Совершенно новичок в этом. Я пытаюсь сделать divs с классом #animated слайдом снизу, когда страница прокручивается, и div появляется в поле зрения. Я скопировал этот кодАнимация Div Если видимый 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 = $(".module");
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");
}
});
});
});С веб-сайта, но код не работает. Я ничего не изменил. Код не делает то, что он supposed to do
Так что теперь я не знаю, что делать. Я загрузил библиотеку jQuery и связал ее с сценарием, а затем вернулся к моим основным .js. Мой текстовый редактор (Adobe Brackets) дал мне ошибки (50 из них)
Так что мой вопрос в том, что я делаю неправильно. BTW Мой CSS безупречен, я знаю CSS и HTML, но не знаю о jQuery и HTMl вместе, как и при импорте этого типа кода, если это имеет смысл.
EDIT: Мой HTML и CSS Если вам это нужно.
/* Slide In */
@import "compass/css3";
* {
@include box-sizing(border-box);
}
.animated {
overflow: hidden;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to {
transform: translateY(0);
}
}
/* Background */
#background {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
z-index: -2;
}
/* Header */
#headerbg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-color: rgba(255, 153, 0, 0.79);
}
#header {
width: 100%;
padding-top: 15px;
}
@media (min-width: 550px) {
/* Header */
#header {
margin-left: 10%;
position: relative;
margin-top: 28px;
padding-bottom: 40px;
}
}
@media (min-width: 730px) {
#header {
margin-top: 25px;
}
}
@media (min-width: 900px) {
#header {
margin-top: 15px;
}
}
@media (min-width: 1000px) {
#header {
margin-left: 20%;
}
}
/* Navigation */
nav {
position: relative;
width: 100%;
text-align: center;
padding-top: 10px;
}
nav li {
display: inline;
/* Makes links on the same line */
}
nav a {
margin: 0 5px;
/* Space out the words */
color: #151413;
font-size: 1.3rem;
text-decoration: none;
text-transform: uppercase;
border-bottom: 2px solid transparent;
padding-bottom: 0.125em;
transition: border-bottom-color 0.75s linear 0s;
font-weight: 600;
}
@media (min-width: 350px) {
nav a {
font-size: 1.4rem;
margin: 0 12px;
}
}
@media (min-width: 550px) {
nav a {
font-size: 1.2rem;
}
nav {
padding-top: 48px;
}
}
@media (min-width: 600px) {
nav a {
font-size: 1.3rem;
}
nav {
padding-top: 52px;
}
}
@media (min-width: 650px) {
nav a {
font-size: 1.4rem;
}
}
@media (min-width: 1000px) {
nav a {
margin: 0 15px;
}
nav {
padding-top: 56px;
}
}
@media (min-width: 1000px) {
nav {
margin-right: 20%;
}
}
nav a:hover,
nav a.active {
border-bottom-color: #151413;
color: #151413;
}
nav ul {
list-style-type: none;
list-style: none;
}
/* About */
.container2 {
position: relative;
top: 140px;
z-index: -1;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
@media (min-width: 350px) {
.container2 {
top: 145px;
}
}
@media (min-width: 360px) {
.container2 {
top: 150px;
}
}
@media (min-width: 450px) {
.container2 {
top: 160px;
}
}
@media (min-width: 510px) {
.container2 {
top: 170px;
}
}
@media (min-width: 540px) {
.container2 {
top: 180px;
}
}
@media (min-width: 550px) {
.container2 {
top: 130px;
}
}
@media (min-width: 650px) {
.container2 {
top: 140px;
}
}
@media (min-width: 850px) {
.container2 {
top: 150px;
}
}
@media (min-width: 1100px) {
.container2 {
top: 155px;
}
}
#about {
text-align: center;
}
p {
width: 100%;
margin: 0 auto;
text-align: center;
}
@media (min-width: 550px) {
p {
width: 50%;
}
}
#aboutbar {
background-color: #151413;
height: 5px;
margin-top: 20px;
margin-left: 50%;
transform: translateX(-50%);
width: 100%
}
@media (min-width: 550px) {
#aboutbar {
background-color: #151413;
height: 5px;
width: 56.6666666667%;
margin-top: 20px;
margin-left: 50%;
transform: translateX(-50%);
}
}
/* Managers */
#managersbg {
position: absolute;
left: 0px;
top: 475px;
z-index: -1;
width: 100%;
background-color: rgba(255, 153, 0, 0.79)
}
@media (min-width: 340px) {
#managersbg {
top: 445px;
}
}
@media (min-width: 350px) {
#managersbg {
top: 450px;
}
}
@media (min-width: 360px) {
#managersbg {
top: 455px;
}
}
@media (min-width: 365px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 417px) {
#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: 475px;
}
}
@media (min-width: 624px) {
#managersbg {
top: 455px;
}
}
@media (min-width: 650px) {
#managersbg {
top: 460px;
}
}
@media (min-width: 674px) {
#managersbg {
top: 435px;
}
}
@media (min-width: 778px) {
#managersbg {
top: 415px;
}
}
@media (min-width: 850px) {
#managersbg {
top: 425px;
}
}
@media (min-width: 914px) {
#managersbg {
top: 405px;
}
}
@media (min-width: 1100px) {
#managersbg {
top: 410px;
}
}
#screamer,
#swezii,
#kinzu {
width: 60px;
height: 60px;
border-radius: 50%;
border-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
margin: 0 auto;
}
#screamer {
margin-bottom: 150px;
}
#swezii {
margin-bottom: 150px;
}
h4 {
text-align: center;
}
#managers {
margin-top: 20px;
margin-bottom: 30px;
}
#manager1,
#manager2,
#manager3 {
position: relative;
display: inline-block;
text-align: center;
}
#manager1 {
top: -410px;
}
#manager2 {
top: -220px;
}
#manager3 {
top: -60px;
}
@media (min-width: 550px) {
#manager1,
#manager2,
#manager3 {
left: 50%;
transform: translateX(-50%);
}
}
#text1,
#text2 {
margin-bottom: 110px;
}
#text1,
#text2,
#text3 {
text-align: center;
position: relative;
}
#text1 {
top: -450px;
}
#text2 {
top: -420px;
}
#text3 {
top: -370px;
}<!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 type="text/javascript" src="main.js"></script>
<script src="main.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 class="one-third-column" id="swezii">
</div>
<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 class="one-third-column">
<p id="manager2">Swezii</p>
</div>
<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 Web, App and other designing. It is my goal to get rid of bad design in my city.</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.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Поэтому я изменяю только .module на .animated, я удалил .module, потому что это выглядело так, как будто это просто стиль в CSS. И .animated класс был .section – DatScreamer
Это не сработало. Я изменил только .module на .animated. – DatScreamer
Ну, что делает код: он просматривает каждый элемент с классом '.module' и работает с ними и только с ними. Поэтому вам нужно сказать браузеру, чтобы он не искал '.module', а для' .animated'. Это сделает трюк. Проверьте этот Codepen (или, скорее, исходный код через инспектор), классы подключаются при прокрутке: http://codepen.io/HerrBertling/pen/rVwXew – HerrBertling