Калейдоскоп на CSS3 и JavaScript
Во время реальных вещей у детей была очень популярная игрушка -калейдоскоп. Можно было бесконечно долго следить за завораживающей игрой цветных картинок, которые невозможно было повторить. С помощью JavaScript и CSS можно ввести замечательную игрушку в наш виртуальный мир. Возможно, демонстрация будет работать не во всех браузерах, но она все-также очаровывает и притягивает взгляд.
Калейдоскоп состоит из 12 секторов, расположенных по кругу рядом друг с другом. Каждый сектор представлен треугольником с фоновым изображением, которое сдвигается при перемещении курсора мыши над сектором.
<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" /> <script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/main.js" type="text/javascript"></script> <div class="example"> <div class="kal_main"> <div class="kal_cont"> <div class="ks s1"><div class="ksc"></div></div> <div class="ks s2"><div class="ksc"></div></div> <div class="ks s3"><div class="ksc"></div></div> <div class="ks s4"><div class="ksc"></div></div> <div class="ks s5"><div class="ksc"></div></div> <div class="ks s6"><div class="ksc"></div></div> <div class="ks s7"><div class="ksc"></div></div> <div class="ks s8"><div class="ksc"></div></div> <div class="ks s9"><div class="ksc"></div></div> <div class="ks s10"><div class="ksc"></div></div> <div class="ks s11"><div class="ksc"></div></div> <div class="ks s12"><div class="ksc"></div></div> </div> </div> </div>
Сектора пронумерованы. Каждый из них поворачивается на свой угол и использует свою матрицу преобразований:
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} .example{background:#FFF;width:500px;height:500px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px} /* Общие стили калейдоскопа */ .kal_main{overflow:hidden;width:500px;height:500px;margin:auto} .kal_cont{width:140%;height:140%;left:-20%;top:-20%;position:relative;margin:auto} .kal_cont .ks{ -webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top; width:50%;height:50%;position:absolute;top:50%;left:0;z-index:10;overflow:hidden; } .kal_cont .ksc{ height:100%; width:100%; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); position:relative; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; transform-origin:left top; left:100%;top:0; background-image:url(../patterns/pic.jpg) } /* Стили каждого сектора */ .kal_cont .s1 { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } .kal_cont .s2 { -webkit-transform: rotate(30deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(30deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(30deg) matrix(-1,0,0,1,0,0); transform: rotate(30deg) matrix(-1,0,0,1,0,0); } .kal_cont .s3 { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .kal_cont .s4 { -webkit-transform: rotate(90deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(90deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(90deg) matrix(-1,0,0,1,0,0); transform: rotate(90deg) matrix(-1,0,0,1,0,0); } .kal_cont .s5 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .kal_cont .s6 { -webkit-transform: rotate(150deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(150deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(150deg) matrix(-1,0,0,1,0,0); transform: rotate(150deg) matrix(-1,0,0,1,0,0); } .kal_cont .s7 { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); } .kal_cont .s8 { -webkit-transform: rotate(210deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(210deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(210deg) matrix(-1,0,0,1,0,0); transform: rotate(210deg) matrix(-1,0,0,1,0,0); } .kal_cont .s9 { -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); } .kal_cont .s10 { -webkit-transform: rotate(270deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(270deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(270deg) matrix(-1,0,0,1,0,0); transform: rotate(270deg) matrix(-1,0,0,1,0,0); } .kal_cont .s11 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .kal_cont .s12 { -webkit-transform: rotate(330deg) matrix(-1,0,0,1,0,0); -moz-transform: rotate(330deg) matrix(-1,0,0,1,0,0); -o-transform: rotate(330deg) matrix(-1,0,0,1,0,0); transform: rotate(330deg) matrix(-1,0,0,1,0,0); }
Скрипт изменяет положение фона в секторе при перемещении по нему курсора мыши.
В качестве фона используется следующее изображение:
В составе исходников также имеется другой фон для проб:
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/H1rCMKGGRSE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.