создание анимации для фона сайта - Web дизайн -  - статьи утилиты программы новости юриста - снять квартиру в Киеве аренда дома от хозяина cдам от с

Поиск

создание анимации для фона сайта

Нам необходимо подключить стили и плагины слайдера:

`1`	`<link rel="stylesheet"href="iview.css"type="text/css"media="screen"/>`

`2`	`<script src="jquery.min.js"type="text/javascript"></script>`

`3`	`<script src="raphael-min.js"type="text/javascript"></script>`

`4`	`<script src="jquery.easing.js"type="text/javascript"></script>`

`5`	`<script src="iview.packed.js"type="text/javascript"></script>`

Теперь мы создаем простой каркас с изображениями:

`1`	`<div id="iview">`

`2`	`<!-- Слайд 1 -->`

`3`	`<div data-iview:thumbnail="photos/photo1_thumb.jpg"data-iview:image="photos/photo1.jpg"></div>`

`4`	`<!-- Слайд 2 -->`

`5`	`<div data-iview:thumbnail="photos/photo2_thumb.jpg"data-iview:image="photos/photo2.jpg"></div>`

6 </div>

Нам необходимо создать подписи к изображениям, для этого мы будем использовать класс "iview-caption":

`1`	`<div id="iview">`

`2`	`<!-- Слайдер 1 -->`

`3`	`<div data-iview:thumbnail="photos/photo1_thumb.jpg"data-iview:image="photos/photo1.jpg">`

`4`	`<!-- Описание -->`

`5`	`<div` `class="iview-caption"data-x="0"data-y="0"data-width="400"data-height="300"data-transition="wipeRight"data-speed="700"><h3>Адаптивный слайдер</h3></div>`

6 </div>

`7`	`<!-- Слайдер 2 -->`

`8`	`<div data-iview:thumbnail="photos/photo2_thumb.jpg"data-iview:image="photos/photo2.jpg">`

`9`	`<!-- Описание -->`

`10`	`<div` `class="iview-caption"data-x="70"data-y="70"data-transition="expandLeft">Приятно вас удивит</div>`

11 </div>

12 </div>

Чтобы вставить видео в слайд нам необходимо создать следующую разметку:

`1`	`<div data-iview:image="photos/photo.jpg">`

`2`	`<!-- Видео iFrame -->`

`3`	`<iframe src="http://путь к видео"width="100%"height="100%"frameborder="0"webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>`

`4`	`<!-- Описание -->`

`5`	`<div` `class="iview-caption"data-x="70"data-y="70"data-transition="expandLeft">Новый клип</div>`

6 </div>

Данный сценарий необходимо инициализировать с помощью функции $(document).ready():

`1`	`<script type="text/javascript">`

`2`	`$(document).ready(function() {`

`3`	`$('#slider').iView();`

4 });

`5`	`</script>`

Категория: Web дизайн | Добавил: викаса (17.08.2013)

Просмотров: 366 | Теги: анимация для сайта, слайдер контент | Рейтинг: 0.0/0