Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.188.226.93
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Плавающий логотип (3D) без flash
Сообщение оставлено 17.05.2011 в 19:41:43 | Сообщение #1
Демо: 2 ДЕМО примера
Скриншот: нет необходимости, скрипт приводится в действие движением курсора.
Установка кода:

Между и подключаем скрипт:

Code
<script type="text/javascript" src="http://liiion911.ru/js/jquery.smart3d.js"></script>

в CSS добавляем стилизацию самих изображений:

Code

   <style type="text/css">

             /* Demo 2 */

              #smartdemo2 {

                  width: 600px;

                  height: 150px;

                  overflow: hidden;

                  border:2px solid #444444;

                  margin: 0;

              }

              #smartdemo2 li{

                  width: 800px;

                  height: 150px;

              }

              #smartdemo2 .content {

                  padding: 0 105px;

                  color: #fff;

                  text-shadow: 0 0 8px #000000;

              }

       

              /* Demo 3 */

              #smartdemo3 {

                  width: 660px;

                  height: 170px;

                  overflow: hidden;

                  border:2px solid #444444;

                  margin: 0;

              }

              #smartdemo3 li{

                  width: 844px;

                  height: 170px;

              }

              #smartdemo3 .content {

                  padding: 0 105px;

                  color: #fff;

                  text-shadow: 0 0 8px #000000;

              }
   </style>

В любом месте после подключаем анимацию:

Code

          <script type="text/javascript">

              $(document).ready(function() {

    $('#smartdemo2').smart3d();

                  $('#smartdemo3').smart3d();

              });

          </script>

И там, где хотим видеть анимацию ставим сами картинки для анимации:

Code

       <ul id="smartdemo2">

              <li><img src="http://liiion911.ru/im/1111.png" /></li>

              <li><img src="http://liiion911.ru/im/2222.png" /></li>

          </ul>

Вот и все !

Автор картинок: arti
Автор скрипта: Kotelnitskiy Evgeniy

 
   
Сообщение оставлено 17.05.2011 в 19:55:03 | Сообщение #2
Liiion911, я тока хотел про эту тему спросить как это делать!!
 
[qc]
Вроде как ушел с портала, а вроде как и остался)[/qc]
 
   
Сообщение оставлено 17.05.2011 в 21:29:15 | Сообщение #3
вот это делоооооо спасибо
 
 
   
Сообщение оставлено 17.05.2011 в 21:37:18 | Сообщение #4
Liiion911, спасибо будим пробовать
 
 
   
Сообщение оставлено 17.05.2011 в 21:42:31 | Сообщение #5
Если разобрать плагин, можно научиться держатсья на месте саму картинку и двигать только фон или сделать движение не только горизонтально но и вертикальное wink
 
   
Сообщение оставлено 17.05.2011 в 22:46:33 | Сообщение #6
классно. спасибо surprised
 
Я не флудер , просто мне есть что сказать :)
Дополнительные забавные смайлики
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика