Приветствую Вас Прохожий | RSS Среда, 07.12.2016, 15:27
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 22
Гостей: 22
Пользователей: 0



Главная » Файлы » Видео уроки для uCoz » Видео уроки разное

Анимация css sprite на jQuery

Анимация css sprite на jQuery Анимация, jQuery, css, sprites
Cпрайты:
Изначально это компьютерная или игровая 2d, 3d графика. В веб технологии их называют css спрайты.
Самое интересное что посредством css береться или обрезается нужный кусок, что экономит трафик и
ускоряет загрузку нашей html страницы - браузеру потребуется запрашивать меньше файлов.

Предлагаю сразу просмотреть урок по генератору css sprite's.



  • Год выхода: 11.03.2012
  • Издатель: tigerforce (скрипт изменен, графика , css)
  • Сss sprite generator:


    Сохраненое изображение:



    Скрипт и его особенности;
    На самом деле для такой особенной анимации сам код не большой и его можно внедрить или украсить любую часть сайта.
    Поддержка прозрачного кода(transparent), на выходе получается как flash анимация, но нагрузки на нее в разы меньше.
    Я использовал две css position:
    relative; для первого вида и absolute; для второго более сложного с фоном и дополнительным элементом.
    Кому то может мой урок покажеться сложным и замудренным, но поверьте я старался максимально упростить устоновку и сделать наибольшую функциональность ее изменения, к тому же это просто интересно.

    Загружаем по ftp:
    Папку "Img"
    jquery.spritely-0.1.js
    Примечание: в архиве имееться - jquery-1.3.2.min.js, на ucoze уже подключен свой, так что нам его
    подключать не нужно. Так на всякий случай.

    Анимация;
    Деталь сайта.Влюбое место:
    Code
    <script type="text/javascript" src="jquery.spritely-0.1.js"></script>  
    <style type="text/css">
      #plane1 {
      position: relative;
      width: 321px;
      height: 96px;  
      background: transparent url(Здесь ссылка на изображение) 0px 0px no-repeat;
      }
      </style>

      <script type="text/javascript">
      (function($) {
      $(document).ready(function(){
      var stage_left = (($('body').width()-866) / 2 ); // Движение в странице.  
      var stage_top = 40; // Движение в странице по этапам.  
      $('#plane1').sprite({fps: 8, no_of_frames: 5}) // Скорость анимации и количество фреймов.  
      .spRandom({  
      top: 0, // Позиция вверх,вниз и т.д..
      left: 20, // На лево,сколько шагов.
      right: 220, // На право,сколько шагов.
      bottom: 0, // Режим полета.
      speed: 2500, // Скорость движения.
      pause: 300 // Пауза в движении.
      });
      });
      })(jQuery);
      </script>
      <div id="plane1"></div>



    Ширина и высота (width,height), должны быть размером не больше одной исходной картинки из анимации.
    Остальное все подписано в скрипте так, что при устоновке не нужно удалять, это делается для того чтоб вы знали какая функция и за что она отвечает на функциональность скрипта она не влияет.
    Мы получаем танк с движением назад, вперед. Чтобы заставить танк стоять на месте берем из кода выше строчку:
    Code
    left: 0, // На лево,сколько шагов.
      right: 0, // На право,сколько шагов.

    И ставим по нулям. Анимация будет идти, а танк будет стоять на месте.

    Для интереса,я усложнил задачу.



    Скорей всего подойдет для страниц с персональным шаблонам и глобальных блоков.


    Теперь будет два фона и две детали:
    Code
    <script type="text/javascript" src="jquery.spritely-0.1.js"></script>  
    <style type="text/css">
    body {
    background: #fff;
    margin:0 auto;
    }
    #sky {
    position:absolute;
    width:100%;
    height: 416px;
    background: transparent url(img/sky.jpg) 0 0px repeat-x;  
    }
    #star {
    position: absolute;
    width: 150px;  
    height: 150px;
    background: transparent url(img/star.png) 0px 0px no-repeat;  
    }
    #forest {
    position: absolute;
    width: 100%;  
    height: 416px;
    background: transparent url(img/blue_forest.png) 0 130px repeat-x;
    }  
    #plane1 {
    position: absolute;
    width: 97px;
    height: 115px;  
    background: transparent url(img/result.png) 0px 0px no-repeat;
    }
    </style>

      <script type="text/javascript">
      (function($) {
      $(document).ready(function(){
      $('#forest').pan({fps: 30, speed: 1, dir: 'left'}); // Фон синего - космического леса.Имееться кадры, скорость, в правую или левую сторону анимации.
      $('#star').sprite({fps: 111, no_of_frames: 99}) // Мигающая звезда.Кадры,частота.
      .spRandom({left: 70 , right: 999, speed: 1700}) // Мигающая звезда. Отступы и положение звезды от окна, скорость движения.
      $('#sky').pan({fps: 30, speed: 0.5, dir: 'left'}); // Звездный фон. Кадры, скорость, влево, вправо.
      var stage_left = (($('body').width()-866) / 2 ); // Движение в странице.  
      var stage_top = 0; // Движение в странице по этапам.
      $('#plane1').sprite({fps: 9, no_of_frames: 8}) // Скорость анимации и количество фреймов.  
      .spRandom({
      top: 40, // Позиция вверх,вниз и т.д..
      left: + 200, // На лево,сколько шагов.
      right: + 500, // На право,сколько шагов.
      bottom: 100, // Режим полета.
      speed: 5500, // Скорость движения.
      pause: 0 // Пауза в движении.
      });
      });
      })(jQuery);
      </script>

    <div id="sky"></div>
    <div id="forest"></div>
    <div id="star"></div>
    <div id="plane1"></div>



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




  • Скрипт я брал из офицального сайта и переделывал, так чтобы можно было использовать его в дизайне.
  • Возможны не кторые ошибки написания скрипта или не дочеты, всех выслушаю и исправлю, а некторые функции добавлю.
  • При копирования материала указывать источник Ucozon.ru
  • Автор\Источник: Ucozon.ru

    Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 4,79 Мб

    Дополнительные скрины:
    Анимация css sprite на jQuery

    Анимация css sprite на jQuery

    Просмотров: 4142 | Комментарии: 2 | Рейтинг: 3.0/2 | |Категория: Видео уроки разное | Добавил: tigerforce | Дата: 12.03.2012 | Скачали: 2 | Теги: css, анимация
    Похожие новости на нашем сайте
    Коментарий к новости

    Всего комментариев: 2
    2 tigerforce   Дата: 12.03.2012  Время: 13:34   [№ 12474]
    Ну по крайне мере в архиве есть avi запись и пока что вы можете скачать посмотреть ее.

    1 tigerforce   Дата: 12.03.2012  Время: 12:40   [№ 12473]
    Говорили мне через flv не послушал, можно как нить исправить?


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Файловик. Уникальные те...

    0

    2 Куплю сайты в индексе Я...

    1

    3 Куплю сайты с ТИЦ/PR (п...

    9

    4 Предлагаю услуги для ан...

    0

    5 Предлагаю услуги по про...

    0

    6 Комплексный прогон сайт...

    51

    7 Сайт онлайн фильмов на ...

    1

    8 Проблема с таблицей

    9

    9 Отредактировать фото

    2

    10 Уже все перепробовал )

    1


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru