I'm a bit lost :D.
Probelem: Im including in my HTML ONEPAGE file particles-js.js correctly. But issue is that then i put after
<head> <div id="particles-js"></div>
its only making new page with particles, but i wanna that all page will be with particles. I tried various places in code to place it but unsuccesfully.
Particles in new page example IMAGE
I wanna that particles would be under all page text and images. Maybe someone know how to fix that ?
Particles code: Particles download code
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="lt"> <!--<![endif]-->
<head>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>idealite - website and design solutions</title>
<meta name="description" content="idealite - website and design solutions" />
<!-- Mobile Specifics -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="keywords" content="idealite, idealite - wbesite and design solutions, internetiniu svetainiu kurimas, dizaino maketavimas - pie۩mas, internetines svetaines na۵so skatinimas, seo, html, css, ">
<meta name="MobileOptimized" content="320"/>
<!-- Mobile Internet Explorer ClearType Technology -->
<!--[if IEMobile]> <meta http-equiv="cleartype" content="on"> <![endif]-->
<!-- Bootstrap -->
<link href="_include/css/bootstrap.min.css" rel="stylesheet">
<!-- Main Style -->
<link href="_include/css/main.css" rel="stylesheet">
<!-- Supersized -->
<link href="_include/css/supersized.css" rel="stylesheet">
<link href="_include/css/supersized.shutter.css" rel="stylesheet">
<!-- FancyBox -->
<link href="_include/css/fancybox/jquery.fancybox.css" rel="stylesheet">
<!-- Font Icons -->
<link href="_include/css/fonts.css" rel="stylesheet">
<!-- Slider
================================================== -->
<link href="_include/css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="_include/css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Shortcodes -->
<link href="_include/css/shortcodes.css" rel="stylesheet">
<!-- Responsive -->
<link href="_include/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="_include/css/responsive.css" rel="stylesheet">
<!-- Supersized -->
<link href="_include/css/supersized.css" rel="stylesheet">
<link href="_include/css/supersized.shutter.css" rel="stylesheet">
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="_include/img/favicon.ico" />
<!-- Modernizr -->
<script src="_include/js/modernizr.js"></script>
<!-- Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'Insert Your Code']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End Analytics -->
</head>
<body>
<!-- Navigacija -->
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home" title=""></a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current"><a href="#home">Paslaugos</a></li>
<li><a href="#work">Atlikti darbai</a></li>
<li><a href="#atsiliepimai">Atsiliepimai</a></li>
<li><a href="#partneriai">Partneriai</a></li>
<li><a href="#contact">Kontaktai</a></li>
</ul>
</nav>
</div>
</header>
<!-- Navigacija pabaiga -->
<!-- Puslapio informacija -->
<div id="home" class="page-alternate">
<div class="container">
<!-- Puslapio informacija / logo -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title"><img border="0" alt="idealite" src="_include/img/main.png"></h2>
<h3 class="title-description">Informacija apie teikiamas paslaugas</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<div class="row">
<!-- 1 Paslauga -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Internetinių svetainių kūrimas</span>
</div>
<img src="_include/img/paslaugos/web.jpg" alt="Internetinių svetainių kūrimas">
</div>
<h3 class="profile-name">Internetinių svetainių kūrimas</h3>
<p class="profile-description">Internetinė svetaine - tai imonės paslaugu prekiu atvaizdavimas, siekiant pritraukti potencialių klientų, svarbu imonėms reprezentuoti save elektroninėje erdvėje. <br><a href="#">idealite</a> padės jums realizuoti savo idėjas !!! </p>
</div>
<!-- 1 Paslauga pabaiga -->
<!-- 2 Paslauga -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Dizaino kūrimas</span>
</div>
<img src="_include/img/paslaugos/design.png" alt="Dizaino kūrimas">
</div>
<h3 class="profile-name">Dizaino kūrimas</h3>
<p class="profile-description">Dizainas - viena iš sudedamųjų internetinės svetainės dalių, kuri labiausiai matoma vartotojui</a>.
Dizainas padeda atvaizduoti teikiamas paslaugas ar prekes, skatinant potencialių vartotojų atsiradima, perteikiant save vaizdiškai svarbiausia yra turėti idėja</p>
</div>
<!-- 2 Paslauga pabaiga -->
<!-- 3 paslauga -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Tinklalapio našumo skatinimas</span>
</div>
<img src="_include/img/paslaugos/seo.png" alt="Tinklalapio našumo skatinimas">
</div>
<h3 class="profile-name">Tinklalapio našumo skatinimas</h3>
<p class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat <a href="#">hendrerit dictum</a>.
Praesent porta, purus eget sagittis imperdiet, nulla mi ullamcorper metus, id hendrerit metus diam vitae est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- 3 paslauga pabaiga -->
</div>
</div>
</div>
</div>
<!-- Paslaugos pabaiga -->
<!-- Atlikti darbai-->
<div id="work" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Atlikti darbai</h2>
<h3 class="title-description">Atliktų darbų rezultatai</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- Atlikti darbai -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">PROJEKTAI</li>
<li><a href="#filter" data-option-value="*" class="selected">Visi projektai</a></li>
<li><a href="#filter" data-option-value=".design">Aleksandras Iljinas</a></li>
<li><a href="#filter" data-option-value=".photography">Priekulės kultūros centras</a></li>
<li><a href="#filter" data-option-value=".ornas">Ornas</a></li>
<li><a href="#filter" data-option-value=".chandlerita">Chandlerita</a></li>
<li><a href="#filter" data-option-value=".aquascaping">Aquascaping desire</a></li>
<li><a href="#filter" data-option-value=".iliuzija">Iliuzija Photography</a></li>
<li><a href="#filter" data-option-value=".autoduslintuvai">Autoduslintuvai</a></li>
<li><a href="#filter" data-option-value=".biripudra">BiriPudra</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Aleksandras Iljinas" href="_include/img/darbai/alis/alis1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/alis/alis1.png" alt="Aleksandras Iljinas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Aleksandras Iljinas" href="_include/img/darbai/alis/alis2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/alis/alis2.png" alt="Aleksandras Iljinas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Aleksandras Iljinas" href="_include/img/darbai/alis/alis3.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/alis/alis3.png" alt="Aleksandras Iljinas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Priekulės kultūros centras" href="_include/img/darbai/priekule/priekule1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/priekule/priekule1.png" alt="Priekulės kultūros centras">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Priekulės kultūros centras" href="_include/img/darbai/priekule/priekule2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/priekule/priekule2.png" alt="Priekulės kultūros centras">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 ornas">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="ornas" title="Ornas" href="_include/img/darbai/ornas/ornas1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/ornas/ornas1.png" alt="Ornas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 ornas">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="ornas" title="Ornas" href="_include/img/darbai/ornas/ornas2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/ornas/ornas2.png" alt="Ornas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 ornas">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="ornas" title="Ornas" href="_include/img/darbai/ornas/ornas3.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/ornas/ornas3.png" alt="Ornas">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 chandlerita">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="chandlerita" title="Chandlerita - Ship Supply" href="_include/img/darbai/chandlerita/chandlerita1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/chandlerita/chandlerita1.png" alt="Chandlerita - Ship Supply">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 aquascaping">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="aquascaping" title="Aquascaping Desire" href="_include/img/darbai/aqua/aqua1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/aqua/aqua1.png" alt="Aquascaping Desire">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 aquascaping">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="aquascaping" title="Aquascaping Desire" href="_include/img/darbai/aqua/aqua2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/aqua/aqua2.png" alt="Aquascaping Desire">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 biripudra">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="biripudra" title="BiriPudra" href="_include/img/darbai/biripudra/biripudra1.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/biripudra/biripudra1.jpg" alt="BiriPudra">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 iliuzija">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="iliuzija" title="Iliuzija Photography" href="_include/img/darbai/iluzija/iluzija1.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/iluzija/iluzija1.jpg" alt="Iliuzija Photography">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 iliuzija">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="iliuzija" title="Iliuzija Photography" href="_include/img/darbai/iluzija/iluzija2.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/iluzija/iluzija2.jpg" alt="Iliuzija Photography">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 autoduslintuvai">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="autoduslintuvai" title="Autoduslintuvai" href="_include/img/darbai/autoduslintuvai/auto1.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/autoduslintuvai/auto1.png" alt="Autoduslintuvai">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 autoduslintuvai">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="autoduslintuvai" title="Autoduslintuvai" href="_include/img/darbai/autoduslintuvai/auto2.png">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/darbai/autoduslintuvai/auto2.png" alt="Autoduslintuvai">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
</div>
<!-- Atlikti darbai Pabaiga-->
</div>
</div>
<!-- End Contact Section -->
<!-- Atsiliepimai -->
<div id="atsiliepimai" class="page-alternate">
<div class="container">
<div class="row">
<div class="span12">
<center><h2 class="title">Klientų atsiliepimai</h2></center>
<div class="alert alert-success">
<strong>Baldija.lt</strong> Ruošiama
</div>
<div class="alert alert-success">
<strong>Aleksandras Iljinas!</strong> Ruošiama
</div>
<div class="alert alert-success">
<strong>Priekules kultūros centras</strong> Ruošiama
</div>
<div class="alert alert-success">
<strong>Ornas.lt</strong> Ruošiama
</div>
<div class="alert alert-success">
<strong>Chandlerita.com</strong> Ruošiama
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Atsiliepimai pabaiga -->
<!-- Socialiniai tinklai -->
<div id="social-area" class="page">
<div class="container">
<div class="row">
<div class="span12">
<center><h2 class="title">Socialiniai tinklai</h2></center>
<nav id="social">
<ul>
<li><a href="https://www.facebook.com/Bluxart" title="Follow Me on Facebook" target="_blank"><span class="font-icon-social-facebook"></span></a></li>
<li><a href="https://plus.google.com/105500420878314068694" title="Follow Me on Google Plus" target="_blank"><span class="font-icon-social-google-plus"></span></a></li>
<li><a href="http://www.linkedin.com/in/alessioatzeni" title="Follow Me on LinkedIn" target="_blank"><span class="font-icon-social-youtube"></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- Socialiniai tinklai Pabaiga -->
<!-- Footer -->
<footer>
<p class="credits">©2016 | idealite.lt </p>
</footer>
<!-- End Footer -->
<!-- Back To Top -->
<a id="back-to-top" href="#">
<i class="font-icon-arrow-simple-up"></i>
</a>
<!-- End Back to Top -->
<!-- scripts -->
<script src="_include/js/particles.js"></script>
<script src="_include/js/app.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
<!-- Js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jQuery Core -->
<script src="_include/js/bootstrap.min.js"></script> <!-- Bootstrap -->
<script src="_include/js/supersized.3.2.7.min.js"></script> <!-- Slider -->
<script src="_include/js/waypoints.js"></script> <!-- WayPoints -->
<script src="_include/js/waypoints-sticky.js"></script> <!-- Waypoints for Header -->
<script src="_include/js/jquery.isotope.js"></script> <!-- Isotope Filter -->
<script src="_include/js/jquery.fancybox.pack.js"></script> <!-- Fancybox -->
<script src="_include/js/jquery.fancybox-media.js"></script> <!-- Fancybox for Media -->
<script src="_include/js/jquery.tweet.js"></script> <!-- Tweet -->
<script src="_include/js/plugins.js"></script> <!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
<script src="_include/js/main.js"></script> <!-- Default JS -->
<!-- End Js -->
</body>
</html>This is full code of html onepage website without css and js. Only one line is missing - to work particles. But as i sad then i put this div only getting new page with partucules not under my all info ....
Aucun commentaire:
Enregistrer un commentaire