Как раскрутить сайт?

Думающий человек-паук - как же раскрутить сайт?Здравствуйте.

Кое-кому я обещал, что расскажу о способе раскрутки сайта, который доселе не использовался практически никем.

Готов поспорить, вы уже начали перебирать варианты: сапа, директ, adsense, статьи, баннеры, тизеры, попапы.. Ни о чем из этого списка речи сегодня не пойдет.

Кто-то (скорее всего, даже большинство), абсолютно уверен в том, что этот способ ему известен и читает данные строки, настроившись весьма скептически.

Спешу вас обрадовать (или огорчить, кому как) — в моем понимании, то, что все гордо именуют раскруткой, является продвижением в поисковых системах. Так о какой же раскрутке пойдет речь? Если заинтригованы, прошу читать далее.

Итак, если вы читаете эти строки — значит, я вас все-таки заинтриговал :)

Дело в том, что я буду учить вас, как раскрутить сайт в самом прямом смысле этого слова. Из всех-всех его смыслов. А расскажу (и покажу в действии) я о css3-свойстве transform.

Данное свойство позволяет, как видно из названия, совершать некоторые преобразования с объектами на странице. Двигать вправо/влево и вверх/вниз, масштабировать, наклонять и поворачивать.

Итак, сразу к делу. Раскрутка сайта. Для того, чтобы раскрутить сайт или блок на сайте, будем использовать следующую конструкцию (я применил ее к body, результат интересный):

transform: rotate(50deg); /*по стандарту css3*/
-webkit-transform: rotate(50deg); /*для Webkit*/
-moz-transform: rotate(50deg); /*для Mozilla Firefox*/
-o-transform: rotate(50deg);/*для Opera*/

Блок, к которому вы примените данное свойство со значением rotate(50deg), повернется на 50 градусов по часовой стрелке. Значение может быть только целым, может быть как отрицательным, так и положительным (для поворота в разные стороны). Вообще, для поворота вам понадобятся значения от -360 градусов до 360.

К сожалению, т.к. CSS3 в полной мере пока не отображает ни один браузер, я использую хаки для каждого из них. Надеюсь, в скором времени все браузеры будут отображать код по стандарту.

Значение, например, в 1000 градусов, вам может понадобиться, только если вы будете использовать поворот в динамике. Посмотрите, как сделал я на демо-страничке (корректно отображает в Опере 10.60, версии ниже не проверял. Firefox отображает некорректно. IE, соответственно, тоже. Другие браузеры не проверял). Для тех, у кого нет свежей Оперы, я записал небольшой ролик:

Динамику, кстати, я сделал на чистом CSS3, без использования JavaScript. Вот код:

.aaa{
background-color:#cfcfcf;
color:white;
display:table;
transition:all 5s ease-in-out;
-webkit-transition:all 5s ease-in-out;
-moz-transition:all 5s ease-in-out;
-o-transition:all 5s ease-in-out;

}
.aaa:hover{
transform: rotate(1000deg);
-webkit-transform: rotate(1000deg);
-moz-transform: rotate(1000deg);
-o-transform: rotate(1000deg);
}

Итак, что я сделал: трансформация блока начинается только по наведении курсора мыши на него, для этого я использовал псевдокласс hover. Самому же блоку (имеющему class=»aaa») я задал новое css3-свойство transition, о котором подробнее можно почитать на сайте w3c.org. Оно позволяет придать плавную анимацию объекту. Опять же, пришлось воспользоваться хаками для разных браузеров.

Ладно. С раскруткой разобрались ;) Таким образом, можно крутить-вертеть свои сайты, блоки на своих сайтах, картинки и все-все-все.

Теперь, вкратце, расскажу о других значениях свойства transform.

  1. translate(<translation-value>[, <translation-value>]) — позволяет двигать блок. Первое значение укажет, на сколько пикселей сдвинуть блок по оси X, а второе — по оси Y. Если второе значение не задано, то сдвиг пойдет только по оси X. Допускаются отрицательные значения.
    • transform: translate(-100px, 60px) сдвинет блок на 100 пикселей влево и на 60 вниз.
    • transform: translate(10px, -40px) сдвинет блок на 10 вправо и на 40 вверх.
  2. translateX(<translation-value>) — собственно, сдвиг по оси X. Допускаются отрицательные значения.
  3. translateY(<translation-value>) — сдвиг по оси Y. Допускаются отрицательные значения.
  4. scale(<number>[, <number>]) — масштабировать блок. Значение атрибута number — целое или дробное положительное число. Если второе значение не задано, то оно будет равным первому значению.
    • transform: scale(2, 3) увеличит масштаб блока в 2 раза по оси X и в 3 раза по оси Y.
    • transform: scale(4) увеличит масштаб в 4 раза по обеим осям координат.
  5. scaleX(<number>) — масштаб по X.
  6. scaleY(<number>) — масштаб по Y.
  7. skew(<angle> [, <angle>]) — наклон объекта. Измеряется в градусах. Соответственно, по оси X и по оси Y. Если второй параметр не указан, то его значение становится равным нулю. При малых значениях может показаться похожим (по действию) на rotate, но это не так. На ДЕМО-страничке я это демонстрирую.
    • transform: skew(10deg, 40deg) наклонит объект на 10 градусов по оси X и на 40 градусов по Y.
    • transform: skew(50deg) наклонит объект на 50 градусов по оси X.
  8. skewX(<angle>) — соответственно, наклон только по X.
  9. skewY(<angle> — ну а это, соответственно, только по Y.

Демо-страничка

Надеюсь, что для кого-нибудь эта информация оказалась полезной, новой. Буду очень рад, если вы используете эти знания в своих проектах и кинете мне ссылку — похвастаться ;)

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

P.S. Вот на этом сайте можно посмотреть интересные и оригинальные решения на CSS3, правда, уже с использованием JavaScript.

Всего доброго! И до скорой встречи!

Как раскрутить сайт?: 6 комментариев

  1. DivaDii

    Я, конечно, так свои сайты раскручивать не буду. :)
    Но все равно — интересно, полезно, познавательно и прикольно.

    А вот scale — возможно, когда-нибудь и придумаю, как использовать.

    ЗЫ. Манюсенький советик. Думаю, это специально так задумано…
    Но мне надо было додумываться, где искать ссылки на предлагаемые ролики; прилагать к этому дополнительные «интеллектуальные» усилия.
    То есть — я все-таки за то, чтобы ссылки каким-то образом в тексте выделялись, были заметны, видны.
    Но, конечно же, хозяин — барин!

    1. FRUTALITY Автор записи

      Я всеми руками за советы. Но не совсем понимаю, о чем именно вы — не показывает видеоролик, или плохо видны ссылки в тексте?

      1. DivaDii

        Ролик — всё видно, показывает.
        Все эти скейлы, сдвиги, искажения и другие «прибамбасы» — прекрасно всё отображает.

        Но вот слова, с которых идут ссылки «Демо-страничка», «на этом сайте» — они практически никак в тексте не выделены.
        Так демо-страничка — хотя бы центральной выключкой выделена ссылка…
        А «на этом сайте» — пришлось мышкой поводить над всем абзацем, чтоб разглядеть ссылку.

  2. INETBOY

    Даа. я раньше не знал что с помощью CSS3 можно творить такие чудеса. Спасибо автору я теперь этим займусь

    1. FRUTALITY Автор записи

      На здоровье, пользуйтесь! В ближайшее время планирую подробный пост на тему CSS3. Так что, оставайтесь на линии :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>