Доброго времени суток форумчане! Помогите разобраться! Нашел в инете готовую анимацию с исходниками (html, js, css), как раз для моего сайта. Установил на сайт, но сама анимация не видна, появляется горизонтальный ползунок. Что это может быть? Может быть я не туда вставляю коды? Код HTML вставил в модуль, код сss вставил в начале моей темы шаблона style.css, код js вставил в начале файла template.js.
Вот те самые коды:
Код HTML<section class="intro">
<h2></h2>
<div class="plane"><img src='
http://i.imgur.com/ExgUbxd.png'>
</div>
<!--Loader-->
<div class="loader">
<span class="bar">
<i class="animate"></i>
</span>
<span class="tick animate">✔</span>
</div>
</section>
<section class="content">
<article>
<h2>Content</h2>
<p>Здесь идет свободный текст</p>
<p>Здесь идет свободный текст</p>
</article>
</section>
Код CSS:@import url('
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
letter-spacing: 1px;
line-height: 1.4;
font-size: 100%;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0,0,0);
margin: 0;
padding: 0;
}
body, HTML {
height: 100%;
position: relative;
background: #f2f2f2;/*#e74c3c*/
}
section {
width: 100%;
height: 100%;
position: relative;
}
.intro h2 {
position: absolute;
width: 100%;
text-align: center;
font: 40px/60px Arial;
color: #fff;
top: 50%;
margin-top: -30px;
text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
animation: slidein 30s;
}
.intro h2:nth-of-type(1) { animation: slidein 1s; }
@keyframes slidein {
0% { opacity: 0;}
100% { opacity: 1;}
}
.intro {
background: url('
') no-repeat fixed center center / cover #eee;
overflow: hidden;
animation: head 2s linear infinite;
}
.content { /*
background: #e74c3c*/
border-top: 6px double #ddd;}
.loader {
position: relative;
display: block;
margin: 0 auto;
width: 150px;
top: 85%;
}
.loader .bar {
display: block;
background: #bbb;
height: 10px;
border-radius: 5px;
/*box-shadow: inset 1px 1px 0px #999, 1px 1px 0 #ddd;*/
overflow: hidden;
border: 2px solid #ddd;
}
.loader .bar i {
display: block;
background: #fff;
height: 8px;
width: 0px;
/*box-shadow: inset 1px 1px 0 #c0392b;*/
border-radius: 5px;
transition: width 1s linear;
transition-delay: 1s;
}
.loader .tick {
display: block;
position: absolute;
left: 100%;
top: 15px;
margin: -7px 0 0 7px;
text-align: center;
font-size: 20px;
color: #fa4242;
opacity: 0;
transition: opacity 0.25s, top 0.25s;
transition-delay: 2s;
}
.bar i.run {
width: 100%;
}
.tick.run {
top: 0;
opacity: 1;
}
article {
padding-top: 3em;
margin: auto;
max-width: 660px;
}
/*Plane animation*/
.plane {
animation: plane-1 16s infinite linear;
transform: translate(0);
z-index: 0;
position: absolute;
bottom: 20%;
}
@media (max-width: 640px) {
.plane {
left: 25%;
}
}
@media (min-width: 641px) {
.plane {
left: 36%;
}
}
@keyframes plane-1 {
0% {
opacity: 0;
transform: translate(-120px, 40px);
}
5% {
opacity: 1;
}
86% {
opacity: 1;
}
88% {
opacity: 0.4;
}
90% {
opacity: 0;
transform: translate(380px, 10px) rotate(-5deg);
}
100% {
opacity: 0;
transform: translate(-120px, 0px);
}
}
Код JS:
function fakeLoad(){
var animate = $(".animate").addClass("run");
var distance = $(".content").offset().top;
var timer = setTimeout(function(){
$(".loader").fadeOut(250);
/*Replace .loader with .intro to hide introduction. Be sure to make fadeOut time longer*/
$('html,body').animate({
scrollTop: distance
}, 2300);
}, 4000);
}
$(document).ready(function(){
fakeLoad();
});
Буду Вам весьма благодарен за ответ!
Рады сообщить о специальном предложении от Nevigen, разработчика расширений для JoomShopping.
С 29 декабря 2025 года по 7 января 2026 года будет действовать скидка 26% на все заказы от $50.
Предложение распространяется на весь ассортимент продукции.
Подробности и полный каталог расширений доступны по ссылке:
https://nevigen.com/ru
#joomshopping
14.09.2023, 22:16:47