| рони | 19.06.2016 19:31 |
Mitai,
то что вижу я. более ничем помочь не могу.
то что вижу я. более ничем помочь не могу.
Анимация фона
Вложений: 1
Доброго времени суток, помогите пожалуйста сделать правильно все, пытаюсь подключить анимацию заднего фона, но ни чего не выходит.
Фон взят от сюда http://bayguzin.ru/main/skriptyi/fon...-skriptov.html мне посоветовали сделать еще один ID и скопировать его содержимое из css, я так и сделал но анимации нету, он мне сказал добавить в JS файл код для этого ID, но после этих манипуляции пропала анимация даже в том диве где до этого она была |
и там изначально при установке была проблема, анимация работала только на правой половине экрана мне, один человек помог это исправить не много изменив css в файле circle но вот как подключить его к остальным страницам он не знает
|
Mitai,
может в какой песоочнице пример сделаите, кто-же будет zip качать 7.37 Мб |
залил, но его почему то весь перекосило, на локалке этого нет(
http://test-eset32u.1gb.ru/#Page1 прошлый человек который помогал просил ему скинуть архивом сайт... |
Mitai,
две jquery не грузят, fullPage отсутствует |
наверно сбились пути к файлам css скинул все в папку http хотя некоторые картинки и стили работают, я в этом дуб дубовый, н ичего не понимаю
|
<!-- Конец кода -->
<!-- Подключаем скрипты --> <script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script> <script src="fullpage/jquery.fullpage.min.js"></script> <script src="js/js.js"></script> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/parallaxsoon3.js" type="text/javascript"></script> щас такие пути, я скидываю все файлф в папку http на хостинге, в путях нужно что то менять? |
Mitai,
убрать все <canvas id="pixie"></canvas> блок Подключаем скрипты должен выглядеть так, для файла index в zip <script src="http://yastatic.net/jquery/1.12.2/jquery.min.js"></script>
<script src="fullpage/jquery.fullpage.min.js"></script>
<script src="js/js.js"></script>
<script src="js/parallaxsoon3.js" type="text/javascript"></script>
<canvas id="pixie"></canvas>
|
ух блин не знаю вобщем как но вроде сделал все как было на локалке))
суть в том что анимация фона щас идет так как было в начале, затем один добрый человек в вк мне подсказал где в коде что дописать что бы она была на весь экран это файл circle вместо #pixie{position:fixed;} я писал следующее #pixie { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } |
если с этим все понятно то теперь остается узнать как этот фон подлкючить не только к 1му диву? копирование содержимого ни какого результат не дает на фоне есть только картинка без анимации, его соевты по поводу копирования содержимого в JS то же ни к чему не привели
дальше у тебя идёт вот эта строка $(canvas).attr("width", WIDTH).attr("height", HEIGHT); и она для разных дивов должна выглядеть, как $(canvas1).attr("width", WIDTH).attr("height", HEIGHT); $(canvas2).attr("width", WIDTH).attr("height", HEIGHT); если ты называл переменные, как я писал выше в итоге анимация появлялась в див 2 но пропадала в див 1 |
Цитата:
|
Mitai,
откройте скопируйте и замените в вашем архиве index.html <!DOCTYPE html>
<html lang="ru">
<head>
<title>eset32upd</title>
<meta charset="UTF-8">
<meta name="description" content="Описание">
<meta name="author" content="Имя Автора">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Иконка сайта -->
<link rel="shortcut icon" type="image/png" href="images/logo.png">
<link rel="apple-touch-icon" href="images/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png">
<!-- Шрифты -->
<!-- <link href='http://fonts.googleapis.com/css?family=Cuprum:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<!-- Стили -->
<link rel="stylesheet" href="fullpage/jquery.fullPage.css">
<link rel="stylesheet" href="icomoon/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="circle.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="../../docs-assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Начало кода -->
<ul id="mainMenu">
<li class="menu__li" data-menuanchor="Page1" class="active"><a class="menu__a" href="#Page1">Вверх</a></li>
<li class="menu__li" data-menuanchor="Page2"><a class="menu__a" href="#Page2">ТХ</a></li>
<li class="menu__li" data-menuanchor="Page3"><a class="menu__a" href="#Page3">Состав</a></li>
<li class="menu__li" data-menuanchor="Page4"><a class="menu__a" href="#Page4">Бонусы</a></li>
<li class="menu__li" data-menuanchor="Page5"><a class="menu__a" href="#Page5">Купить</a></li>
<li class="menu__li" data-menuanchor="Page6"><a class="menu__a" href="#Page6">Отзывы</a></li>
<li class="menu__li" data-menuanchor="Page7"><a class="menu__a" href="#Page7">Гарантия</a></li>
</ul>
<div id="fullpage">
<div class="section p1">
<div class="p1__blackfon">
<h1 class="p1__name">ESET NOD32 Быстро. Надежно. Легко.</h1>
<h2 class="p1__disc">Высокий уровень безопасности</h2>
<p class="p1__lozung">С помощью решений ESET защищены крупнейшие компании в различных отраслях</p>
</div>
</div>
<div class="section p2 clearfix">
<div class="right p__right">
<h3 class="zag p2__gray">Преимущества <span class="fw300">NOD32:</span></h3>
<div class="p2__bullet"><i class="icon-star-full"></i>ESET NOD32 Smart Security вошел в число обладателей <span class="p2__akcent"> высшего рейтинга</span></div>
<div class="p2__bulletdisc">ADVANCED+ AV-Comparatives по показателю производительности.</div>
<div class="p2__bullet"><i class="icon-target"></i><span class="p2__akcent">Передовые облачные и эвристические</span> технологии ESET</div>
<div class="p2__bulletdisc">для обнаружения новых и уже известных угроз</div>
<div class="p2__bullet"><i class="icon-stopwatch"></i><span class="p2__akcent">Быстрая работа</span></div>
<div class="p2__bulletdisc">на устройствах с любыми характеристиками</div>
<div class="p2__bullet"><i class="icon-tablet"></i>Удобный интерфейс <span class="p2__akcent">адаптированный</span></div>
<div class="p2__bulletdisc">к любым типам устройств</div>
<div class="p2__bullet"><i class="icon-lock"></i>Технология ESET <span class="p2__akcent">Антифишинг</span> распознает и блокирует фишинговые сайты</div>
<div class="p2__bulletdisc">нацеленные на хищение конфиденциальных данных при совершении онлайн-транзакций</div>
<div class="p2__bullet"><i class="icon-aid-kit"></i>Расширенное <span class="p2__akcent">сканирование памяти ESET</span> позволяет обезвреживать</div>
<div class="p2__bulletdisc">зашифрованные вредоносные программы, которые устанавливаются на компьютер скрыто от пользователя</div>
</div>
<div class="left p__left">
<img src="images/esetpage2.png">
</div>
</div>
<div class="section p3">
<div class="slide clearfix" data-anchor="Slide1">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide2">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide3">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide4">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide5">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide6">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide7">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide8">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
<div class="slide clearfix" data-anchor="Slide9">
<div class="right p__right">
<h3 class="zag">Как определить разрядность <span class="fw400">Windows:</span></h3>
</div>
<div class="left p__left">
<img src="">
</div>
</div>
</div>
<div class="section p4">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
<div class="section p5">Page5</div>
<div class="section p6">Page6</div>
<div class="section p7">Page7</div>
</div>
<!-- Конец кода -->
<!-- Подключаем скрипты -->
<script src="http://yastatic.net/jquery/1.12.2/jquery.min.js"></script>
<script src="fullpage/jquery.fullpage.min.js"></script>
<script src="js/js.js"></script>
<script src="js/parallaxsoon3.js" type="text/javascript"></script>
<canvas id="pixie"></canvas>
</body>
</html>
|
сделал только не вижу что поменялось
|
Mitai,
то что вижу я. более ничем помочь не могу. |
а как этот фон прикрепить к остальным страницам с анимацией? кроме первых двух
|
и как вам удалось сделать летающие шарики на первых двух страницах??
|
Mitai,
шарики на всех страницах -- скачайте свой zip , разархивируйте, замените index.html на код в 12 посте и увидите их сами. |
ммммм афигенски, а с первой и второй их можно убрать? как вы это сделали? через css или js супер просто)
|
Цитата:
Цитата:
|
то есть я подключал канвас только для дива а вы его перенесли в боди и задали в нем разрешение, а как от первой и второй их отцепить?
|
Цитата:
Цитата:
|
я вас понял большое спасибо, за советы и помощь, вы крутой
|
очень жаль что при изменении размера браузера они ведут себя очень не красиво, возможно придется совсем отказаться от анимации в поддержку адаптивности, а они были очень прикольные((
|
Цитата:
 |
Если вы о предложении от которого не возможно отказаться, то увы финансово я не просто скован а можно сказать парализован ( был простым работягой который валит лес, пока не кончил спину),а еще странно что на демо все работает без доработки файла circle.css пытался все сделать точь в точь как там даже какие то файлы .DS_Store залил на хостинг но чет там видимо не так все равно.
а фон красивый правда?) |
http://savepic.ru/10183789.jpg
вот так это выглядит у меня щас |
| Часовой пояс GMT +3, время: 02:14. |