0 Пользователей и 1 Гость просматривают эту тему.
  • 33 Ответов
  • 5505 Просмотров
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Html-анимация в Joomla
« : 09.04.2014, 10:16:45 »
Здравствуйте, уважаемые специалисты!
Нужен совет. Есть сайт под управлением Joomla 2.5, на сайте имеются flash-анимации, которые выводятся с помощью соответствующих модулей.
Возникла необходимость перегнать flash в html5, для чего я использовал Adobe Edge Animate CC и отрисовал анимации по новой. На выходе получил файл HTML, папку images с используемыми изображениями, файл с расширением .an (исходник анимации, как я понял) и пять Java-скриптов. Все это аккуратно загрузил на хостинг.
Собственно вопрос: как вывести эту анимацию в соответствующем модуле? Может, кто сталкивался? Если возможно, хотелось бы увидеть пример кода, т.к. мои знания в этой области пока сильно ограничены.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #1 : 09.04.2014, 10:42:56 »
а что мешает создать html-модуль и вписать туда данные из вашего файла "..На выходе получил файл HTML.."?
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #2 : 09.04.2014, 11:00:52 »
Пробовал. Создавал модуль «HTML-код», присваивал ему соответствующую позицию, в toggle editor вводил код. Собственно, сам код:
Код: html4strict
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="Hello_wordl_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-18498334 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-18498334">
</div>
</body>
</html>
Это не переделанная анимация, а поделка на уровне Hello World!, на которой я пытаюсь понять принцип. Но это так, к слову.

На выходе - ничего. Только узкая серая полоска в том месте, где должен быть модуль. Что я делаю не так?
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #3 : 09.04.2014, 11:04:57 »
все что в теге <head> пропишите в файле шаблона, а то что в теге <body> в самом модуле.
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #4 : 09.04.2014, 11:28:09 »
Результат отрицательный.
Учитывая некую кривоватость моих рук (как следствие недостатка опыта и знаний), хочу уточнить - все ли я правильно понял.
Итак...
В файл index.php в папке шаблона уходит следующий кусок кода:

Код: html4strict
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="Hello_wordl_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-18498334 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

В Toggle Editor остается:

Код: html4strict
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-18498334">
</div>
</body>

Серая полоска вместо анимации.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #5 : 09.04.2014, 11:56:07 »
в index.php между тегами <head>..</head>
Код
<script type="text/javascript" charset="utf-8" src="Hello_wordl_edgePreload.js"></script>
<style>.edgeLoad-EDGE-18498334 { visibility:hidden; }</style>
и в Editor
Код
<div id="Stage" class="EDGE-18498334"></div>

убедитесь еще, что адрес прописан правильно файла Hello_wordl_edgePreload.js есть ли он в корневой папке, а так же адреса прописанные для фото, файл с расширением .an, пять Java-скриптов
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #6 : 09.04.2014, 11:59:39 »
Где именно прописываются адреса?
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #7 : 09.04.2014, 12:09:56 »
<script type="text/javascript" charset="utf-8" src="Hello_wordl_edgePreload.js"></script> - указывает что файл Hello_wordl_edgePreload.js должен находиться в корневой папке (там где папки administrator, images, tmp..)
так же откройте этот файл и просмотрите с какими файлами он связан и в каких папках они должны находиться
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #8 : 09.04.2014, 13:00:22 »
Адрес в шаблоне поправил.
Код: html4strict
<script type="text/javascript" charset="utf-8" src="/html_animation/hello_world/Hello_wordl_edgePreload.js"></script>
 <style>.edgeLoad-EDGE-18498334 { visibility:hidden; }</style>

Адреса в скрипте Hello_wordl_edgePreload.js поправил.
Код: html4strict
aLoader = [
      { load: "html_animation/hello_world/jquery-2.0.3.min.js"},
      { load: "html_animation/hello_world/edge.3.0.0.min.js"},
      { load: "html_animation/hello_world/Hello_wordl_edge.js"},
      { load: "html_animation/hello_world/Hello_wordl_edgeActions.js"}];

В скрипте Hello_wordl_edge.js поправил.
Код: html4strict
//images folder
var im='html_animation/hello_world/';

Эффекта нет. Что я еще мог упустить?
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #9 : 09.04.2014, 13:05:44 »
есть ли возможность заархивировать папку вашу с анимацией и всеми скрипками и скинуть? (яндекс-флешка, майл-диск, куда то еще..)
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Re: Html-анимация в Joomla
« Ответ #10 : 09.04.2014, 13:09:54 »
Может вам проще через wrapper подключить такую сложную страницу?
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #11 : 09.04.2014, 13:36:17 »
alex38ann
http://yadi.sk/d/YKwzOrnEM72ww
Здесь архив с анимацией. В чистом виде (адреса - не исправленные).

Shustry, с wrapper я еще не работал. Боюсь, если увязну в новой для себя теме, это займет гораздо больше времени.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #12 : 09.04.2014, 14:20:44 »
и так.. проблема у тебя в пути к файлам. необходимо прописывать очень много путей во всех практически файлах.
самое простое решение, распаковать твою папку Hello_world в корень сайта. т.е. вытащить все из этой папки в корневую папку.
так же прописать в файле шаблона <script type="text/javascript" src="Hello_wordl_edgePreload.js"></script><style>.edgeLoad-EDGE-18498334 {visibility:hidden;}</style>
и в модуле как и писал <div id="Stage" class="EDGE-18498334"></div>
все! в самих файлах ничего менять не надо!
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #13 : 09.04.2014, 14:52:18 »
Все сделал. Нет эффекта. Кажется, проблема где-то глубже...

Консоль Chrome выдает массу ошибок, связанных со скриптами.

http://www.promfactor.com/ru/

(узкая полоска над блоком "презентация" на главной - все, что выдает анимация)
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #14 : 09.04.2014, 15:16:56 »
хм.. проверил на денвере. все работает

анимация там у вас не сложная, да и не кликабельный баннер. что если создать его как gif картинка?
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #15 : 09.04.2014, 15:19:27 »
Наверное, какая-то беда на самом сайте...
Закажу на хостинге проверку на вирусы.
Больше мыслей нет.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #16 : 09.04.2014, 15:29:13 »
так как тебе предложение по созданию gif-анимации?
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #17 : 09.04.2014, 15:34:28 »
Эта анимация - один из первых уроков по использованию Adobe Edge Animate CC. Я взял ее для образца, чтобы разобраться с размещением html-анимаций в Joomla. В планах построение более сложных (в том числе - кликабельных). Gif тут не пойдет, нужно решать проблему в корне.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #18 : 09.04.2014, 15:39:46 »
как варианты можно еще рассмотреть:
flash анимация - возможно сделать все что угодно))
jquery - есть не мало эффектов и способов реализовать красивую анимацию

повторюсь: проверил вашу анимацию на денвере, все отлично работает
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #19 : 09.04.2014, 15:52:49 »
От flash-анимации я как раз и ухожу, т.к. планшеты и смартфоны в большинстве своем не поддерживают flash, а руководитель желает чтобы и там все было. Потому и завязался с HTML.

С jquery не работал.

Значит, проблема все же в сайте. Вирус мог поразить работу всех скриптов? Т.к. еще один элемент, тоже работающий на них, недавно перестал воспроизводиться.

В любом случае, огромное спасибо за помощь и консультацию. Сам бы я очень долго шел к пониманию, как это все работает.
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #20 : 09.04.2014, 16:00:24 »
сомнительно что вирус у вас там, скорее просто конфликт каких то библиотек
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #21 : 09.04.2014, 16:03:37 »
Это решаемо? Может подскажете, в каком направлении копать?
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #22 : 09.04.2014, 16:19:26 »
Так.
Чисто интуитивно я нащупал корень проблемы...
Консоль Google выдает ошибки вот такого типа:
Failed to load resource: the server responded with a status of 404 (Not Found)     http://www.promfactor.com/ru/edge_includes/edge.3.0.0.min.js

То есть, по этому адресу скрипт не находится. И во всем виноват префикс языка! В данном случае - ru. Когда я в плагине "фильтр языка" включаю "Удалять префикс языка по умолчанию" - анимация работает! Но только на основном (русском) языке. При попытке переключится - снова не видит скрипты.

Это можно как-то починить? Как отвязать работу скриптов от активного языка на сайте?
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #23 : 10.04.2014, 07:35:24 »
сам не проверил, но, что если прописать место нахождения файла так:
http://www.promfactor.com/ru/edge_includes/edge.3.0.0.min.js
http://www.promfactor.com/en/edge_includes/edge.3.0.0.min.js
http://www.promfactor.com/uk/edge_includes/edge.3.0.0.min.js
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #24 : 10.04.2014, 09:40:49 »
Хм... Прописать? То есть, создать в корне сайта папки ru, en и uk, и в них продублировать файлы анимации, так?
*

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: Html-анимация в Joomla
« Ответ #25 : 10.04.2014, 09:55:14 »
рекомендую все манипуляции производить на локальном сайте (к примеру установить денвер) и перенести на него копию вашего рабочего (файлы+БД).
*

sitro

  • Осваиваюсь на форуме
  • 33
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #26 : 11.04.2014, 18:00:32 »
Была  такая проблема, повяз на долго, так не разобрался сделал все через wrapper, лучше в ней повязнешь, не так надолго чем тут)))
*

Bleyz

  • Осваиваюсь на форуме
  • 14
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #27 : 22.04.2014, 09:43:58 »
Да, действительно, через wrapper все делается легко и просто. Ценный опыт, буду копить.

Всем большое спасибо за помощь.
Тему можно закрывать.
*

Mакс

  • Новичок
  • 5
  • 0 / 0
Re: Html-анимация в Joomla
« Ответ #28 : 10.06.2014, 15:49:04 »
Доброго времени суток форумчане! Помогите разобраться! Нашел в инете готовую  анимацию с исходниками (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();
});


Буду Вам весьма благодарен за ответ!
*

verstalshik

  • Завсегдатай
  • 1754
  • 95 / 1
Re: Html-анимация в Joomla
« Ответ #29 : 10.06.2014, 20:02:43 »
ни жуя се простыня!!))) спойлер кнопка есть!
по теме-юзайте flexy custom code - все что хошь вставляет, в отличие от штатного модуля кода!!
❶ НЕ СПРАВЛЯЕШЬСЯ САМ???  Поможем тут...  ❷ Калькулятор доставки - ЗАКАЖИ!!!...  ❸ Каталог компаний - ЖМИ!!!...  ❹ НОВИЧКИ! ВСЕ сюда! Первая консультация БЕСПЛАТНО!!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как редактировать отдельную страницу Joomla 2.5?

Автор mrporter

Ответов: 0
Просмотров: 1130
Последний ответ 14.09.2023, 22:16:47
от mrporter
Joomla 2.5.28, Safari под маком и сессии session

Автор beliyadm

Ответов: 19
Просмотров: 3454
Последний ответ 29.03.2023, 12:17:19
от Sawell
Joomla 2.5.28 как скачать все файлы через панель управления

Автор Sergei41984

Ответов: 7
Просмотров: 1590
Последний ответ 27.12.2022, 23:30:38
от Sergei41984
Расширения для Joomla! 1.6 (коллекция полезных ссылок)

Автор Sulpher

Ответов: 124
Просмотров: 130066
Последний ответ 03.12.2022, 16:15:19
от besttechoff
Почему в админке Joomla 2.58 - у меня 16 админов показывает?

Автор dyalex

Ответов: 7
Просмотров: 2206
Последний ответ 27.10.2022, 19:03:45
от marksetter