Ako vytvoriť kaleidoskop pomocou jQuery a CSS

Dnes budeme pokračovať v CSS lekcii. Poďme si pripomenúť starú hračku – kaleidoskop, myslím, že si ho každý pamätá zo svojho detstva. Premýšľali ste nad tým ako funguje? Všetko sa bude zdať jednoduché, ale ani zďaleka nie je. Dnes vám ukážem, ako je možné vytvoriť kaleidoskop s použitím JS a CSS. Je možné, že výsledný príklad nebude fungovať vo všetkých prehliadačoch, ale ukážka bude stáť za vyskúšanie.

stiahnuť ukážka

Krok 1. HTML

Ako obvykle začneme s HTML.

Toto je naša hlavná stránka nášho kaleidoskopu.

index.html

Náš kaleidoskop sa bude skladať z 12 sektorov osadených v kruhu. Každý sektor predstavuje trojuholník s pozadím obrázka, ktorý sa bude posúvať pohybom myši nad týmito selektormi. Každý sektor bude reprezentovať nasledujúci kód: <div class="ks s{X}"><div class="ksc"></div></div>, kde {X} – počet sektorov.

Krok 2. CSS

Tu sú použíté CSS štýly.

css/main.css

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}

/* všeobecne kaleidoskop styly */
.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)
}

/* styly pre jednotlive sektory */
.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);
}

s1-s12 – sektory. Ako môžete vidieť – každý selektor má vlastnú rotáciu a používa matice.

Krok 3. JS

Tu sú nevyhnutné JS súbory pre náš projekt.

js/main.js

$(document).ready(function() {
    $(".kal_cont").each(function(i){
        $(this).mousemove(function(e) {
            $(this).find(".ksc").each(function(i){
                $(this).css({backgroundPosition: e.pageX+"px "+e.pageY+"px"});
            });
        });
    });
});

Takže, teraz by sme mali naučiť našu ukážku pohybovať pozadie selektorov, keď hýbeme myšou. Budeme meniť pozíciu pozadia. Dúfam, že tento kód bol pochopiteľný.