Форум русской поддержки Joomla!® CMS
03.12.2016, 02:24:02 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Html-анимация в Joomla

 (Прочитано 3072 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« : 09.04.2014, 10:16:45 »

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

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #1 : 09.04.2014, 10:42:56 »

а что мешает создать html-модуль и вписать туда данные из вашего файла "..На выходе получил файл HTML.."?
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #2 : 09.04.2014, 11:00:52 »

Пробовал. Создавал модуль «HTML-код», присваивал ему соответствующую позицию, в toggle editor вводил код. Собственно, сам код:
Код
<!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
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #3 : 09.04.2014, 11:04:57 »

все что в теге <head> пропишите в файле шаблона, а то что в теге <body> в самом модуле.
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #4 : 09.04.2014, 11:28:09 »

Результат отрицательный.
Учитывая некую кривоватость моих рук (как следствие недостатка опыта и знаний), хочу уточнить - все ли я правильно понял.
Итак...
В файл index.php в папке шаблона уходит следующий кусок кода:

Код
<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 остается:

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

Серая полоска вместо анимации.
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #6 : 09.04.2014, 11:59:39 »

Где именно прописываются адреса?
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #8 : 09.04.2014, 13:00:22 »

Адрес в шаблоне поправил.
Код
<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 поправил.
Код
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 поправил.
Код
//images folder
var im='html_animation/hello_world/';

Эффекта нет. Что я еще мог упустить?
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #9 : 09.04.2014, 13:05:44 »

есть ли возможность заархивировать папку вашу с анимацией и всеми скрипками и скинуть? (яндекс-флешка, майл-диск, куда то еще..)
Записан
Shustry
Группа развития
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #10 : 09.04.2014, 13:09:54 »

Может вам проще через wrapper подключить такую сложную страницу?
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #11 : 09.04.2014, 13:36:17 »

alex38ann
http://yadi.sk/d/YKwzOrnEM72ww
Здесь архив с анимацией. В чистом виде (адреса - не исправленные).

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

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #13 : 09.04.2014, 14:52:18 »

Все сделал. Нет эффекта. Кажется, проблема где-то глубже...

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

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

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

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #14 : 09.04.2014, 15:16:56 »

хм.. проверил на денвере. все работает

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

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #15 : 09.04.2014, 15:19:27 »

Наверное, какая-то беда на самом сайте...
Закажу на хостинге проверку на вирусы.
Больше мыслей нет.
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #16 : 09.04.2014, 15:29:13 »

так как тебе предложение по созданию gif-анимации?
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #17 : 09.04.2014, 15:34:28 »

Эта анимация - один из первых уроков по использованию Adobe Edge Animate CC. Я взял ее для образца, чтобы разобраться с размещением html-анимаций в Joomla. В планах построение более сложных (в том числе - кликабельных). Gif тут не пойдет, нужно решать проблему в корне.
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #18 : 09.04.2014, 15:39:46 »

как варианты можно еще рассмотреть:
flash анимация - возможно сделать все что угодно))
jquery - есть не мало эффектов и способов реализовать красивую анимацию

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

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #19 : 09.04.2014, 15:52:49 »

От flash-анимации я как раз и ухожу, т.к. планшеты и смартфоны в большинстве своем не поддерживают flash, а руководитель желает чтобы и там все было. Потому и завязался с HTML.

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

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

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

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #20 : 09.04.2014, 16:00:24 »

сомнительно что вирус у вас там, скорее просто конфликт каких то библиотек
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #21 : 09.04.2014, 16:03:37 »

Это решаемо? Может подскажете, в каком направлении копать?
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #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
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #24 : 10.04.2014, 09:40:49 »

Хм... Прописать? То есть, создать в корне сайта папки ru, en и uk, и в них продублировать файлы анимации, так?
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #25 : 10.04.2014, 09:55:14 »

рекомендую все манипуляции производить на локальном сайте (к примеру установить денвер) и перенести на него копию вашего рабочего (файлы+БД).
Записан
sitro
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 40


« Ответ #26 : 11.04.2014, 18:00:32 »

Была  такая проблема, повяз на долго, так не разобрался сделал все через wrapper, лучше в ней повязнешь, не так надолго чем тут)))
Записан
Bleyz
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #27 : 22.04.2014, 09:43:58 »

Да, действительно, через wrapper все делается легко и просто. Ценный опыт, буду копить.

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

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #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('http://i.imgur.com/PrxdvoA.jpg') 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
Практически профи
*******

Репутация: +94/-1
Offline Offline

Сообщений: 1788



« Ответ #29 : 10.06.2014, 20:02:43 »

ни жуя се простыня!!))) спойлер кнопка есть!
по теме-юзайте flexy custom code - все что хошь вставляет, в отличие от штатного модуля кода!!
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet