Вставка кода баннера HTML 5 созданного в программе Google Web Designer

gian

Захожу иногда
75
0 / 0

Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« : 28.05.2016, 16:11:00 »

Собственно вопрос в том как корректно впихнуть код? Программа создает папку с HTML файлом и картинками использованными в баннере. Картинки понятно, что заливаю на сервер в нужную директорию, а вот что с кодом делать? Пытался его через модуль HTML вставлять, но JCE режет код, добавлял в исключения тэги используемые, но все равно ерунда получается..... iframe использовал, чтобы подключить файл целиком, но там рамка появляется не нужная и это не совсем то, что хотелось бы.... Кто сталкивался с данной проблемой?

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #1 : 28.05.2016, 17:39:19 »

у вас много ошибок.
первая-раз в JCE поставли, настройте правильно, чтоб не резало.
Компонент и в 2 местах ( в настройке и профиле) укажите нет Проверять HTML
это первая настройка, в общих вы сразу увидите.
Там же в профили редактора/параметры редактора (3 вкладка) в выпадашке тоже выбираете Проверять HTML-ставите Нет.
Ещё не забудьте в расширенных настройках там же в редакторе, поставить все галочки :
Разрешить Javascript
Да Нет
Разрешить CSS
Да Нет
Разрешить PHP
Да Нет
Встроенные скрипты XHTML
это вам насчёт JCE
Если код хотите пихать в виде модуля, то 1-это вам поможет,2 есть модуль, без этих процедур читает любой код : http://extensions.joomla.org/extension/custom-html-advanced

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #2 : 29.05.2016, 04:31:33 »

Цитата: vipiusss от 28.05.2016, 17:39:19

у вас много ошибок.
первая-раз в JCE поставли, настройте правильно, чтоб не резало.
Компонент и в 2 местах ( в настройке и профиле) укажите нет Проверять HTML
это первая настройка, в общих вы сразу увидите.
Там же в профили редактора/параметры редактора (3 вкладка) в выпадашке тоже выбираете Проверять HTML-ставите Нет.
Ещё не забудьте в расширенных настройках там же в редакторе, поставить все галочки :
Разрешить Javascript
Да Нет
Разрешить CSS
Да Нет
Разрешить PHP
Да Нет
Встроенные скрипты XHTML
это вам насчёт JCE
Если код хотите пихать в виде модуля, то 1-это вам поможет,2 есть модуль, без этих процедур читает любой код : http://extensions.joomla.org/extension/custom-html-advanced

Заинтересовал вариант с модулем. Установил, внес код, объявил позицию, указал показ на всех страницах, но на морде пусто. В чем может быть проблема?

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #3 : 29.05.2016, 07:30:14 »

Значит код баннера неверный (нерабочий), модуль функционирует исправно.
Я надеюсь вы не перепутали, когда вставляли код в ячейки (там и HTML и php отдельно)
Попробуйте в чистую страницу code.php (или code.html) код баннера в корне сайта и запустить в браузере.

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

umbabaraumba

Живу я здесь
2415
153 / 1
если помог можете поставить +

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #4 : 29.05.2016, 13:16:36 »

Цитата: gian от 28.05.2016, 16:11:00

а вот что с кодом делать?

Вставьте его в код шаблона .

Записан

Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #5 : 30.05.2016, 04:53:06 »

Цитата: vipiusss от 29.05.2016, 07:30:14

Значит код баннера неверный (нерабочий), модуль функционирует исправно.
Я надеюсь вы не перепутали, когда вставляли код в ячейки (там и HTML и php отдельно)
Попробуйте в чистую страницу code.php (или code.html) код баннера в корне сайта и запустить в браузере.

Да код рабочий. По прямой ссылке запускается файл с баннером

Записан

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #6 : 30.05.2016, 05:27:58 »

Вот сам код. Почему-то тут не дают прикреплять файлы к сообщению.
Может быть не весь его код надо вставлять в тот модуль?

Код

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="generator" content="Google Web Designer 1.6.0.0429">
  <meta name="template" content="Banner 3.0.0">
  <meta name="environment" content="gwd-doubleclick">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="gwdpage_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-page">
  <link href="gwdpagedeck_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-pagedeck">
  <link href="gwddoubleclick_style.css" rel="stylesheet" data-version="10" data-exports-type="gwd-doubleclick">
  <link href="gwdimage_style.css" rel="stylesheet" data-version="7" data-exports-type="gwd-image">
  <style type="text/css" id="gwd-lightbox-style">
    .gwd-lightbox {
      overflow: hidden;
    }
  </style>
  <style type="text/css" id="gwd-text-style">
    p {
      margin: 0px;
    }
    h1 {
      margin: 0px;
    }
    h2 {
      margin: 0px;
    }
    h3 {
      margin: 0px;
    }
  </style>
  <style type="text/css">
    HTML, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    .gwd-page-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .gwd-page-content {
      transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform-style: preserve-3d;
      position: absolute;
      background-color: transparent;
    }
    .gwd-page-wrapper {
      position: absolute;
      transform: translateZ(0px);
      background-color: rgb(255, 255, 255);
    }
    .gwd-page-size {
      width: 100%;
      height: 100%;
    }
    .gwd-div-qvnp {
      background-image: none;
      background-color: rgb(255, 255, 255);
    }
    .gwd-img-1ggt {
      position: absolute;
      opacity: 0;
      width: 20px;
      height: 0px;
      top: 70px;
      left: 75px;
    }
    @keyframes gwd-gen-yrj7gwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        width: 20px;
        height: 0px;
        left: 75px;
        top: 70px;
        animation-timing-function: linear;
      }
      6.25% {
        opacity: 0;
        width: 20px;
        height: 0px;
        left: 75px;
        top: 70px;
        animation-timing-function: linear;
      }
      16.25% {
        opacity: 1;
        width: 240px;
        height: 90px;
        left: 35px;
        top: 32px;
        animation-timing-function: linear;
      }
      93.75% {
        opacity: 1;
        width: 240px;
        height: 90px;
        left: 35px;
        top: 32px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 0;
        width: 20px;
        height: 0px;
        left: 75px;
        top: 70px;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-yrj7gwdanimation {
      animation: gwd-gen-yrj7gwdanimation_gwd-keyframes 8s linear 0s infinite normal forwards;
    }
    .gwd-img-1wjv {
      position: absolute;
      top: 15px;
      left: 1114px;
      opacity: 0;
      width: 530px;
      height: 30px;
    }
    .gwd-img-12a5 {
      position: absolute;
      width: 680px;
      height: 30px;
      top: 62px;
      left: 1114px;
      opacity: 0;
    }
    .gwd-img-1m36 {
      position: absolute;
      top: 109px;
      left: 1114px;
      opacity: 0;
      width: 455px;
      height: 30px;
    }
    @keyframes gwd-gen-17mggwdanimation_gwd-keyframes {
      0% {
        width: 530px;
        height: 30px;
        left: 1114px;
        opacity: 0;
        top: 15px;
        animation-timing-function: linear;
      }
      6.25% {
        width: 530px;
        height: 30px;
        left: 1114px;
        opacity: 0;
        top: 15px;
        animation-timing-function: linear;
      }
      18.75% {
        width: 530px;
        height: 30px;
        left: 316px;
        opacity: 1;
        top: 14px;
        animation-timing-function: linear;
      }
      93.75% {
        width: 530px;
        height: 30px;
        left: 316px;
        opacity: 1;
        top: 14px;
        animation-timing-function: linear;
      }
      100% {
        width: 530px;
        height: 30px;
        left: 316px;
        opacity: 0;
        top: -39px;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-17mggwdanimation {
      animation: gwd-gen-17mggwdanimation_gwd-keyframes 8s linear 0s infinite normal forwards;
    }
    @keyframes gwd-gen-1k3egwdanimation_gwd-keyframes {
      0% {
        opacity: 0;
        left: 1114px;
        animation-timing-function: linear;
      }
      18.75% {
        opacity: 0;
        left: 1114px;
        animation-timing-function: linear;
      }
      31.25% {
        opacity: 1;
        left: 316px;
        animation-timing-function: linear;
      }
      93.75% {
        opacity: 1;
        left: 316px;
        animation-timing-function: linear;
      }
      100% {
        opacity: 0;
        left: 1114px;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-1k3egwdanimation {
      animation: gwd-gen-1k3egwdanimation_gwd-keyframes 8s linear 0s infinite normal forwards;
    }
    @keyframes gwd-gen-kx6xgwdanimation_gwd-keyframes {
      0% {
        left: 1114px;
        opacity: 0;
        width: 455px;
        height: 30px;
        top: 109px;
        animation-timing-function: linear;
      }
      31.25% {
        left: 1114px;
        opacity: 0;
        width: 455px;
        height: 30px;
        top: 109px;
        animation-timing-function: linear;
      }
      43.75% {
        left: 316px;
        opacity: 1;
        width: 455px;
        height: 30px;
        top: 109px;
        animation-timing-function: linear;
      }
      93.75% {
        left: 316px;
        opacity: 1;
        width: 455px;
        height: 30px;
        top: 109px;
        animation-timing-function: linear;
      }
      100% {
        left: 316px;
        opacity: 0;
        width: 455px;
        height: 30px;
        top: 158px;
        animation-timing-function: linear;
      }
    }
    #page1.gwd-play-animation .gwd-gen-kx6xgwdanimation {
      animation: gwd-gen-kx6xgwdanimation_gwd-keyframes 8s linear 0s infinite normal forwards;
    }
  </style>
  <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Istok+Web" rel="stylesheet" type="text/css"><script data-source="googbase_min.js" data-version="3" data-exports-type="googbase" src="googbase_min.js"></script>
  <script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents" src="gwd_webcomponents_min.js"></script>
  <script data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" src="gwdpage_min.js"></script>
  <script data-source="gwdpagedeck_min.js" data-version="8" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script>
  <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
  <script data-source="gwddoubleclick_min.js" data-version="10" data-exports-type="gwd-doubleclick" src="gwddoubleclick_min.js"></script>
  <script data-source="gwdimage_min.js" data-version="7" data-exports-type="gwd-image" src="gwdimage_min.js"></script>
</head>

<body>
  <gwd-doubleclick id="gwd-ad" polite-load="">
    <gwd-metric-configuration></gwd-metric-configuration>
    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-div-qvnp" data-gwd-width="100%" data-gwd-height="100%">
        <div class="gwd-page-content gwd-page-size" style="">
          <img is="gwd-image" source="images/banner/logo.png" id="gwd-image_1" class="gwd-img-1ggt gwd-gen-yrj7gwdanimation">
          <img is="gwd-image" source="images/banner/1.png" id="gwd-image_2" class="gwd-img-1wjv gwd-gen-17mggwdanimation">
          <img is="gwd-image" source="images/banner/2.png" id="gwd-image_3" class="gwd-img-12a5 gwd-gen-1k3egwdanimation">
          <img is="gwd-image" source="images/banner/5.png" id="gwd-image_4" class="gwd-img-1m36 gwd-gen-kx6xgwdanimation">
        </div>
      </div>
    </div>
  </gwd-doubleclick>
  <script type="text/javascript" id="gwd-init-code">
    (function() {
      var gwdAd = document.getElementById('gwd-ad');

      /**
       * Handles the DOMContentLoaded event. The DOMContentLoaded event is
       * fired when the document has been completely loaded and parsed.
       */
      function handleDomContentLoaded(event) {

      }

      /**
       * Handles the WebComponentsReady event. This event is fired when all
       * custom elements have been registered and upgraded.
       */
      function handleWebComponentsReady(event) {
        // Start the Ad lifecycle.
        setTimeout(function() {
          gwdAd.initAd();
        }, 0);
      }

      /**
       * Handles the event that is dispatched after the Ad has been
       * initialized and before the default page of the Ad is shown.
       */
      function handleAdInitialized(event) {}

      window.addEventListener('DOMContentLoaded',
        handleDomContentLoaded, false);
      window.addEventListener('WebComponentsReady',
        handleWebComponentsReady, false);
      window.addEventListener('adinitialized',
        handleAdInitialized, false);
    })();
  </script>
</body>

</html>

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #7 : 30.05.2016, 07:48:00 »

ну и код))) полсайта сразу...
Попробуйте уберите боди и хеды в коде, и HTML, и <meta name можно:

И там половину лишнего.
И внутри и в самом низу убрать выше перечисленное.

Спойлер

[свернуть]

// Испытать код не могу, т.к. мне нужны к нему ещё и локальные файлы, которые у вас в корне сайта указаны.

« Последнее редактирование: 30.05.2016, 07:57:19 от vipiusss »

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #8 : 30.05.2016, 10:05:11 »

Цитата: vipiusss от 30.05.2016, 07:48:00

ну и код))) полсайта сразу...
Попробуйте уберите боди и хеды в коде, и HTML, и <meta name можно:

И там половину лишнего.
И внутри и в самом низу убрать выше перечисленное.

Спойлер
[свернуть]
// Испытать код не могу, т.к. мне нужны к нему ещё и локальные файлы, которые у вас в корне сайта указаны.

Ну вот этот файл отдельно. В корне лежат лишь 3 картинки
http://ideaperm.ru/banners

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #9 : 30.05.2016, 10:17:31 »

а как же перечисленные линки для файлов? они же в корне у вас указаны: участок кода:

Спойлер

[свернуть]

и скрипты тоже в коде указаны из корня.
а картинки у вас относительно папки images указаны.
может у вас файлов не хватает? не разместили или путь к ним неверный?

// И для этого вы(смотрю ссылку) столько всего используете? Советую изменить подход ваш для отображения такого-можно сделать совсем по иному и намного проще.

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #10 : 30.05.2016, 14:39:45 »

Цитата: vipiusss от 30.05.2016, 10:17:31

// И для этого вы(смотрю ссылку) столько всего используете? Советую изменить подход ваш для отображения такого-можно сделать совсем по иному и намного проще.

Как например? Мне требуется создавать анимированные HTML5 баннеры

Записан

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #11 : 30.05.2016, 14:42:07 »

Цитата: vipiusss от 30.05.2016, 10:17:31

а как же перечисленные линки для файлов? они же в корне у вас указаны: участок кода:
Спойлер
[свернуть]
и скрипты тоже в коде указаны из корня.
а картинки у вас относительно папки images указаны.
может у вас файлов не хватает? не разместили или путь к ним неверный?

Используется только 4 файла http://c2n.me/3yD6DSz ничего другого я не загружал в директорию banners

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #12 : 30.05.2016, 15:44:27 »

ну у вас в коде: загрузка куча файлов из корня со стилями, загрузка стилей из кода несколько раз, загрузка скриптов из корня+из кода ещё скрипты, загрузка картинок из папки...
и вы хотите, чтобы у вас не конфликтовало со скриптами J! и работало?
Я наверно бы столько не выпил, такое придумать ради анимации вашего баннера, в котором 1 картинка и 3 фразы выезжают с синим фоном.

/// Пффф...

Подготавливаемся:
https://daneden.github.io/animate.css/ тут демочки эффектов, что у вас будет.
https://github.com/matthieua/WOW/tree/master/dist тут качаем на комп wow.min.js (можно и полный скрипт, но вам и этого хватит).
http://daneden.github.io/animate.css/animate.min.css тут мы качаем сами эффекты(я вам предложил min в обоих вариантах).тут откроется файл-вы просто его сохраните с его названием на комп.

лезем в код шаблона, вставляем после <head>:
<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>

естественно, оба этих файла должны быть закачаны в корне, если нет, тогда создаёте папку, туда 2 файла и соответственно меняете пути к ним.

Далее для активации тут же ниже добавляем:
<script>new WOW().init();</script>

Всё.Сохраняем.
Теперь использование:

Смотрим понравившейся эффект в демке выше.
например Зуум.
добавляем куда угодно новый класс: class="wow zoomInUp"
это может быть и для текста и для картинки.

и теперь мелкие нужности:
data-wow-duration : время анимации
data-wow-delay: задержка перед анимацей
data-wow-offset : включение от нижней точки экрана
data-wow-iteration : повторы анимации

Все эти плюшки изучайте на офф сайте сами, привёл пару примеров.
вот так примерно выглядят ваши строки:

<img class="wow zoomInUp" data-wow-delay="0.5s" data-wow-duration="2s" src="images/ваш баннер.jpg" alt="">
<p class="wow zoomInUp" data-wow-delay="1.0s" data-wow-duration="3s">текст1</p>

Т.е. появилась картинка с задержой и анимацией, спустя время текст1....
Тут смотрите на эффекты в демке, играйтесь и фантазируйте сами.
Применять можно к чему угодно:блокам, текстам, картинкам.

Надоело просто объяснять, если это не поймёте, тогда в комм.раздел.

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #13 : 31.05.2016, 05:59:41 »

Цитата: vipiusss от 30.05.2016, 15:44:27

Все эти плюшки изучайте на офф сайте сами, привёл пару примеров.

Шикарное объяснение! Один вопрос.... адрес офф сайта, где смотреть вот эти плюшки..... время анимации и т.д... Не совсем понял.

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #14 : 31.05.2016, 07:39:41 »

Плюшки тут https://github.com/daneden/animate.css
И то, какие плюшки ещё должны быть?
Время анимации в секундах вы ставите, как и другие эффекты, названия эффектов есть на демке, и в этой выше ссылке.
// хотите, напишите прямо разрабу Даниелю. https://daneden.me

И вы самое интересное не спросили-зачем я скрипт wow притулил сюда.
Он позволяет для ваших эффектов на сайте при прокрутке делать отложенную загрузку.
Т.е. по мере скрола страницы включаются ваши эффекты, а не все скопом где-то внизу, что ещё и не видно.

Например, поставили 4 картинки 2х2, эффект:выезжания, вы прокручиваете страницу, а картинки с разных сторон прибегают к вам на страницу с интервалом, задержкой...Ещё можно несколько эффектов сразу, т.е. прибежало и новый эффект начался.
Всё от вашей фантазии зависит.

Ничего не хотел писать про тот ваш ресурс, или где вы этот код наконструирывали, но там явный перебор:немерено подключений, стилей, потом внутри тоже самое...
Тут всего 2 файла. И распространяется на любое с заданным классом.

« Последнее редактирование: 31.05.2016, 07:54:40 от vipiusss »

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #15 : 31.05.2016, 10:23:38 »

Цитата: vipiusss от 31.05.2016, 07:39:41

Ничего не хотел писать про тот ваш ресурс, или где вы этот код наконструирывали, но там явный перебор:немерено подключений, стилей, потом внутри тоже самое...

https://www.google.ru/webdesigner/ Вот эта программа, что самое интересное google-овская.....

Записан

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #16 : 31.05.2016, 10:59:52 »

Где можно ознакомиться со всеми возможными значениями вот этих параметров?

data-wow-offset : включение от нижней точки экрана
data-wow-iteration : повторы анимации

Повторы как задаются? Я что-то не нашел на оф сайте https://github.com/daneden/animate.css

И вот что получилось..... http://www.kmlgroup.ru/ Сразу вопрос, а как сделать так, чтобы появился логотип, затем справа лого приехали строчки по очередности? По времени задержки и эффектам понятно все. Вопрос в размещении элементов относительно друг друга..... Через таблицу делать такое? Потому как сейчас они все один под другим размещаются
Требуется вот так же сделать http://ideaperm.ru/banners/

<img class="wow zoomIn" data-wow-delay="0.5s" data-wow-duration="2s" src="images/banner/logo.png" alt="">
<img class="wow fadeInRightBig" data-wow-delay="1s" data-wow-duration="2s" src="images/banner/1.png" alt="">
<img class="wow fadeInRightBig" data-wow-delay="1.5s" data-wow-duration="2s" src="images/banner/2.png" alt="">
<img class="wow fadeInRightBig" data-wow-delay="2s" data-wow-duration="2s" src="images/banner/5.png" alt="">

« Последнее редактирование: 31.05.2016, 11:29:21 от gian »

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #17 : 31.05.2016, 11:30:25 »

Через дивы делайте:им id назначайте согласно разметке, а в них классы с эффектами.
data-wow-iteration : повторы анимации
class="ваш эффект" data-wow-iteration="3" - повторяем 3 раза
можно указать повторять в секундах/милисекундах.

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #18 : 31.05.2016, 15:01:12 »

Цитата: vipiusss от 31.05.2016, 11:30:25

Через дивы делайте:им id назначайте согласно разметке, а в них классы с эффектами.
data-wow-iteration : повторы анимации
class="ваш эффект" data-wow-iteration="3" - повторяем 3 раза
можно указать повторять в секундах/милисекундах.

Есть какой-нибудь хороший генератор div блоков? Не особо сильно разбираюсь в div верстке. Что нашел, так там только ровное количество ячеек предлагается, то есть 2 колонки и 2 строки. А мне тут надо, чтобы лого был в одной ячейке, а три надписи справа на уровне одной левой ячейки.... В таблице это я знаю как реализовать, а в div затрудняюсь

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #19 : 31.05.2016, 15:04:28 »

ну это основы цсс+хтмл.
простите, но обучать это долговато...
в Google найдите, вот первое нашёл, вроде доступно написано с примерами http://dreamhelg.ru/2011/02/css-position-in-10-steps/
изучите также блочную вёрстку (в Google наберите вёрстка дивов)
Вот приличный генератор http://csstemplater.com
вот ещё... http://www.blended-html.com
да их немерено-не ленитесь.

« Последнее редактирование: 31.05.2016, 15:11:46 от vipiusss »

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #20 : 01.06.2016, 11:52:13 »

Цитата: vipiusss от 31.05.2016, 15:04:28

ну это основы цсс+хтмл.
простите, но обучать это долговато...
в Google найдите, вот первое нашёл, вроде доступно написано с примерами http://dreamhelg.ru/2011/02/css-position-in-10-steps/
изучите также блочную вёрстку (в Google наберите вёрстка дивов)
Вот приличный генератор http://csstemplater.com
вот ещё... http://www.blended-html.com
да их немерено-не ленитесь.

Вроде все написал как надо, но почему-то страница вообще пустая http://ideaperm.ru/banners/

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Блочная верстка - дубль 2</title>
<link href="banners/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="banner">
<div id="logo"><img class="wow zoomIn" data-wow-delay="0.5s" data-wow-duration="2s" src="banners/logo.png" alt=""></div>
<div id="1"><img class="wow fadeInRightBig" data-wow-delay="1s" data-wow-duration="2s" src="banners/1.png" alt=""></div>
<div id="2"><img class="wow fadeInRightBig" data-wow-delay="1.5s" data-wow-duration="2s" src="banners/2.png" alt=""></div>
<div id="5"><img class="wow fadeInRightBig" data-wow-delay="1.5s" data-wow-duration="2s" src="banners/5.png" alt=""></div>
</div>
</body>
</html>

Код

#banner {
width:800px;
margin:0 auto;
}
#logo{
width:240px;
height:90px;
float:left;
}
#1{
background-color:#8080FF;
}
#2{
background-color:#FFC0FF;
}
#5{
background-color:#C0C000;

Записан

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #21 : 02.06.2016, 20:11:21 »

Цитата: vipiusss от 28.05.2016, 17:39:19

и теперь мелкие нужности:
data-wow-duration : время анимации
data-wow-delay: задержка перед анимацей
data-wow-offset : включение от нижней точки экрана
data-wow-iteration : повторы анимации

data-wow-duration - это время анимации, а какое значение задает время показа элемента после завершения анимации?
Просто у меня получается такая карусель этих анимаций при задании количества повторов каждой.... мне бы надо сделать так, чтобы цикл анимации у каждого элемента прошел они зафиксировались и после все исчезло и заново все стало анимироваться. Надеюсь доходчиво объяснил )

Вот баннер http://kmlgroup.ru/ задержка появлений слайдов 0,5 сек, время анимации 2 сек, количество повторов 3. Видите какой кавардак?

« Последнее редактирование: 02.06.2016, 20:15:44 от gian »

Записан

vipiusss

Гуру
5739
344 / 11
Скайп: renor_

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #22 : 02.06.2016, 20:32:57 »

время анимации это и есть время показа 1 повтора каждого элемента.

Записан

Миграция, установка, обновление версий Joomla | Создание сайтов "под ключ" | Эксклюзивные заглушки "offline" | Работа с "напильником" над шаблонами и расширениями

gian

Захожу иногда
75
0 / 0

Re: Вставка кода баннера HTML 5 созданного в программе Google Web Designer

« Ответ #23 : 02.06.2016, 20:35:49 »

Цитата: vipiusss от 02.06.2016, 20:32:57

время анимации это и есть время показа 1 повтора каждого элемента.

К сожалению нет. Я пытался выставить не 2 секунды, а 5 например...тогда по идее все картинки должны успеть появиться и затем одновременно исчезнуть и начать появляться по новой, но они просто стали все появляться в течении 5 секунд, так как data-wow-duration это время анимации с момента начала до момента конца, а вот после конца нет параметра для времени отображения элемента на позиции/экране.

Записан

Google Переводчик не переводит сайт Автор Aqua	Ответов: 1 Просмотров: 506	04.03.2024, 12:50:00 от kovAlexandr78
reCAPTCHA V2 Google - Для Joomla 3 Автор Alex GOOD	Ответов: 35 Просмотров: 8342	10.01.2024, 21:41:38 от Vastriet
Вернуть слайдер после работы с модулем html кода Автор Jenik1245	Ответов: 0 Просмотров: 395	30.05.2023, 14:15:58 от Jenik1245
Генератор QR кода для банка и ссылка на приложение банка Автор shop-user	Ответов: 1 Просмотров: 358	28.03.2023, 17:31:14 от marksetter
Вставка кода видео в материал Автор dedun	Ответов: 20 Просмотров: 7232	12.03.2023, 16:13:31 от kochevnik

Вышли релизы Joomla 5.1.0 и Joomla 4.4.4

Проблема с id в URL материалов Joomla при обновлении большого старого сайта до Joomla 5

Используем поля Joomla для фильтрации материалов

Похожие темы