Перейти к содержимому


Как Добавить Анимацию На Сайт

анимация егущая строка plastic

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 12

#1 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 08 Сентябрь 2014 - 03:36

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

http://html5.by/blog...ic-moving-text/

аккаунту SL-303200

Прикрепленные изображения

  • сайт1.jpg


#2 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 08 Сентябрь 2014 - 06:58

в админке магазина во вкладке сайт- редактор шаблонов в файле html  найдите код

<div class="container contentText"> 

ПОСЛЕ этой строки вставьте код который указан как код для вывода в блоке HTML

далее код для вывода в блоке js  вставьте в конец файла main.js

код для вывода в блоке css  вставьте в конец файла style.css

#3 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 08 Сентябрь 2014 - 10:40

Просмотр сообщенияTaisia (08 Сентябрь 2014 - 06:58) писал:

в админке магазина во вкладке сайт- редактор шаблонов в файле html  найдите код

<div class="container contentText">

ПОСЛЕ этой строки вставьте код который указан как код для вывода в блоке HTML

далее код для вывода в блоке js  вставьте в конец файла main.js

код для вывода в блоке css  вставьте в конец файла style.css

Что-то не получилось. + Весь сайт перевернуло вверх дном.
Нашла еще откорректированный вариант другого блогера.
http://rusfolder.com/36860629

#4 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 08 Сентябрь 2014 - 10:49

Просмотр сообщенияOlga89 (08 Сентябрь 2014 - 10:40) писал:

Что-то не получилось. + Весь сайт перевернуло вверх дном.
Нашла еще откорректированный вариант другого блогера.
http://rusfolder.com/36860629

Еще покапавшись получилось вот это:

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

2. собственно бегущая строка не бежит, пустая да и вообще не так выглядит.

Помогите, уважаемые модераторы.

#5 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 08 Сентябрь 2014 - 11:14

Просмотр сообщенияOlga89 (08 Сентябрь 2014 - 10:49) писал:

Еще покапавшись получилось вот это:

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

2. собственно бегущая строка не бежит, пустая да и вообще не так выглядит.

Помогите, уважаемые модераторы.

Справилась. :D

Одного найти не могу, где в коде можно поднять текст в строке выше? А то сейчас он как бы по низу ползет.

.runninglinecontainer{
  /*изменить ширину блока,можно поменяв проценты на пиксели__например wight:500px;
  !!! - чем меньше размер блока,тем меньше  скорость перемещения текста,скорость регулируется ниже*/
width:100%;
margin: 0 auto;
  }
  /****** Lines *******/
  .line {
overflow:hidden;
width:100%;
border:1px solid #393e48;
box-shadow:0px 5px 5px 3px rgba(0,0,0,0.3);
display:block;
margin-top:10px;
border-radius:2px;
position:relative;
  }
  .line .line_cover{
width:100%;
height:100%;
position:absolute;
z-index:2;
background:url(led_bg.png);
  }
  .line .line_text{
width:100%;
height:100%;
position:absolute;
z-index:1;
  }

  /****** Line 1 *******/
  #l1.line{
height:70px;
background:rgb(51,55,65);
  }
  #l1.line .line_text{
font-size:60px;
font-weight:bold;
/*color:цвет текста можете выставить по вкусу*/
color: red;
-webkit-animation: l1_animation /*скорость перемещения текста 35s*/30s linear infinite;
-moz-animation: l1_animation /*скорость перемещения текста 35s*/30s linear infinite;
  }
  @-webkit-keyframes l1_animation {
  0%{left:100%;}
  100%{left:-200%;}
  }
  @-moz-keyframes l1_animation {
  0%{left:100%;}
  100%{left:-200%;}
  }

Прикрепленные изображения

  • сайт3.jpg


#6 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 08 Сентябрь 2014 - 11:42

Просмотр сообщенияOlga89 (08 Сентябрь 2014 - 11:14) писал:

Справилась. :D

Одного найти не могу, где в коде можно поднять текст в строке выше? А то сейчас он как бы по низу ползет.

.runninglinecontainer{
  /*изменить ширину блока,можно поменяв проценты на пиксели__например wight:500px;
  !!! - чем меньше размер блока,тем меньше  скорость перемещения текста,скорость регулируется ниже*/
width:100%;
margin: 0 auto;
  }
  /****** Lines *******/
  .line {
overflow:hidden;
width:100%;
border:1px solid #393e48;
box-shadow:0px 5px 5px 3px rgba(0,0,0,0.3);
display:block;
margin-top:10px;
border-radius:2px;
position:relative;
  }
  .line .line_cover{
width:100%;
height:100%;
position:absolute;
z-index:2;
background:url(led_bg.png);
  }
  .line .line_text{
width:100%;
height:100%;
position:absolute;
z-index:1;
  }

  /****** Line 1 *******/
  #l1.line{
height:70px;
background:rgb(51,55,65);
  }
  #l1.line .line_text{
font-size:60px;
font-weight:bold;
/*color:цвет текста можете выставить по вкусу*/
color: red;
-webkit-animation: l1_animation /*скорость перемещения текста 35s*/30s linear infinite;
-moz-animation: l1_animation /*скорость перемещения текста 35s*/30s linear infinite;
  }
  @-webkit-keyframes l1_animation {
  0%{left:100%;}
  100%{left:-200%;}
  }
  @-moz-keyframes l1_animation {
  0%{left:100%;}
  100%{left:-200%;}
  }

Здравствуйте.
В style.css найдите код
.line .line_text {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
И замените на
.line .line_text {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
margin-top: -13px;
}


#7 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 08 Сентябрь 2014 - 11:50

Просмотр сообщенияDanil (08 Сентябрь 2014 - 11:42) писал:

Здравствуйте.
В style.css найдите код
.line .line_text {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
И замените на
.line .line_text {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
margin-top: -13px;
}

Благодарю!!! :wub:

#8 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 24 Август 2016 - 12:26

Добрый день.
Меняем старый сайт на новый.
С аккаунта 303200 на 392777

Переносим анимацию "Бегущая строка"
(Изначально код взят от сюда http://rusfolder.com/36860629 )

На старом сайте все работает, но на новом:

1. Строка не бежит.
2. Строка отображается на всех страницах, а нужно только на главной.


Помогите пожалуйста поправить.

_________________________________________________
25,08,16
Прикрепила три файла из архива.
Четвертый файл форум  не
разрешает мне  загружать.

Это "button521d.js"

Текст файла:


jQuery(function($){
  if ($.browser.msie && ($.browser.version == '6.0' || $.browser.version == '7.0'))
return;
  usernoiseButton.button = new usernoise.UsernoiseButton();
  usernoise.window = {
   show: usernoiseButton.button.showWindow
  };
  $('.un-feedback-form').each(function(){
    new usernoise.FeedbackForm($(this));
  });
  if (usernoiseButton.showButton){
   usernoiseButton.button.show();
}
$(document).bind('sent#feedbackform#window.un', function(){
var $overlay = $('<div id="un-overlay" />').appendTo($('body'));
function closeOverlay(){
   $('#un-thankyou').find('a').unbind('click');
   $('#un-thankyou').fadeOut('fast', function(){
     $('#un-overlay').fadeOut('fast', function(){
          $('#un-thankyou').remove();
          $('#un-overlay').remove();
        });  
   });

}
$('#un-overlay').click(closeOverlay).fadeIn('fast', function(){
   $('#un-thankyou').fadeIn('fast', function(){
     setTimeout(closeOverlay, 5000);
   }).find('#un-feedback-close').click(closeOverlay);
});
});
try{
    $('#' + usernoiseButton.custom_button_id).click(function(){usernoise.window.show(); return false;})
  } catch (err){
    alert('It looks like you entere wrong HTML ID value for custom Usernoise feedback button.');
  }
  $('a[rel=usernoise]').click(function(){usernoise.window.show(); return false;})
});

Прикрепленные изображения

  • led_bg.png

Прикрепленные файлы



#9 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 24 Август 2016 - 13:42

Просмотр сообщенияOlga89 (24 Август 2016 - 12:26) писал:

Добрый день.
Меняем старый сайт на новый.
С аккаунта 303200 на 392777

Переносим анимацию "Бегущая строка"
(Изначально код взят от сюда http://rusfolder.com/36860629 )

На старом сайте все работает, но на новом:

1. Строка не бежит.
2. Строка отображается на всех страницах, а нужно только на главной.


Помогите пожалуйста поправить.

Прикрепите, пожалуйста, файл архивом к сообщению, скачать не получается.

#10 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 25 Август 2016 - 05:02

Просмотр сообщенияMikDark (24 Август 2016 - 13:42) писал:

Прикрепите, пожалуйста, файл архивом к сообщению, скачать не получается.

Прикрепила. Смотрите в предыдущем сообщении.

1.Добавила в HTML код -  начинается со строки 269 : <!-- Running Line -->

2. button521d.js загрузила в скрипты

3. В конец файла main.css строка 1420 добавила .runninglinecontainer{ и т.д.

4. Загрузила .png  картинку.

Все один в один со старым сайтом, а оно все равно не работает... :unsure:

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Август 2016 - 06:01

В main.css найдите:
/****** Line 1 *******/
  #l1.line{
	height:70px;
	background:rgb(51,55,65);
  }
  #l1.line .line_text{
	font-size:60px;
	font-weight:bold;
	/*color:цвет текста можете выставить по вкусу*/
	color: red;
	-webkit-animation: l1_animation /*скорость перемещения текста 35s*/20s linear infinite;
	-moz-animation: l1_animation /*скорость перемещения текста 35s*/20s linear infinite;
  }

после него пропишите:
@-webkit-keyframes l1_animation {
	  0%{left:100%;}
	  100%{left:-200%;}
  }
  @-moz-keyframes l1_animation {
	  0%{left:100%;}
	  100%{left:-200%;}
  }


#12 Olga89

Olga89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 175 сообщений

Отправлено 25 Август 2016 - 06:09

Спасибо! :wub:

А как убрать строку со всех страниц кроме главной?

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Август 2016 - 06:41

В шаблоне HTML найдите:
<!-- Running Line -->
<script>  jQuery(function(){		jQuery(this).next().find('.line_text').html(this.value)  })</script>
<div class="runninglinecontainer">
  <div id="l1" class="line">
	<div class="line_text">СВЕТОДИОДНЫЕ&nbspБЕГУЩИЕ&nbspСТРОКИ,&nbsp;LED&nbsp;ЭКРАНЫ&nbsp;ЛЮБЫХ&nbsp;РАЗМЕРОВ.&nbsp;КОМПЛЕКТУЮЩИЕ:&nbsp;МОДУЛИ,&nbsp;КОНТРОЛЛЕРЫ,&nbsp;БЛОКИ&nbsp;ПИТАНИЯ							</div>
	<div class="line_cover"></div>
  </div>
</div>
	   

замените на:
<!-- Running Line -->
{% IF index_page %}
<script>  jQuery(function(){		jQuery(this).next().find('.line_text').html(this.value)  })</script>
<div class="runninglinecontainer">
  <div id="l1" class="line">
	<div class="line_text">СВЕТОДИОДНЫЕ&nbspБЕГУЩИЕ&nbspСТРОКИ,&nbsp;LED&nbsp;ЭКРАНЫ&nbsp;ЛЮБЫХ&nbsp;РАЗМЕРОВ.&nbsp;КОМПЛЕКТУЮЩИЕ:&nbsp;МОДУЛИ,&nbsp;КОНТРОЛЛЕРЫ,&nbsp;БЛОКИ&nbsp;ПИТАНИЯ							</div>
	<div class="line_cover"></div>
  </div>
</div>
{% ENDIF %}
	   






Темы с аналогичным тегами анимация, егущая строка, plastic

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных