Paralax effect in the header Ucoz

interout

Date: Tuesday, 2011-10-04, 9:54 PM | Message # 1

Group: Administrators

Messages: 1027

-------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------

Very interesting effect, called paralax effect for pictures.

DEMO

1) Connect the 2 scripts after there you nead in the Web:

Code

where 500 - the width of your hat.

Design control -> The upper part of the site.

Code

The implication is that our cap will consist of 2 pictures: fon_1.jpg, fon_2.jpg, one of which will be superimposed on another.

3) In the CSS we prescribe it:

Code

#mindscape {
            width: 400px;
            height: 225px;
            overflow: hidden;
            }

            #monsteck_variketch {
            width: 400px;
            height: 225px;
            overflow: hidden;
            }

-------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------
-------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------

Paralax effect в шапке

Очень интересный эффект, т.н. paralax effect для картинок.

DEMO

Что нам потребуется:

1) Подключить 2 скрипта после на нужных страницах сайта:

Code
<script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/Smart3D/jquery.smart3d.js"></script>
         <script type="text/javascript">
         $(function() {
         $('#mindscape').smart3d(500);
         $('#monsteck_variketch').smart3d(500);
         });
         </script>

где 500 - это ширина вашей шапки.

2) Затем, пропишем html код нашей шапки в ПУ-->Управление дизайном-->Верхняя часть сайта.

Code
<ul id="mindscape">
<li><img src="fon_1.jpg" /></li>
<li><img src="fon_2.png" /></li>
</ul>

Подразумевается, что наша шапка будет состоять из 2-х картинок: fon_1.jpg, fon_2.jpg, одна из которых, будет накладываться на другую.

3) В CSS мы пропишем это:

Code
#mindscape {
width: 400px;
height: 225px;
overflow: hidden;
}

#monsteck_variketch {
width: 400px;
height: 225px;
overflow: hidden;
}

Attachments: Smart3D.rar (65.9 Kb)

Message

-------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------

Very interesting effect, called paralax effect for pictures.

DEMO

1) Connect the 2 scripts after there you nead in the Web:

Code

where 500 - the width of your hat.

Design control -> The upper part of the site.

Code

The implication is that our cap will consist of 2 pictures: fon_1.jpg, fon_2.jpg, one of which will be superimposed on another.

3) In the CSS we prescribe it:

Code

Author - interout
Date Added - 2011-10-04 в 9:54 PM