Калейдоскоп на 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Если ты рождён без крыльев, не мешай им расти. (Коко Шанель / ЖИТЕЙСКАЯ МУДРОСТЬ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.