Autor Zpráva
Jape
Profil
Ahoj,
pravě jsem dokončil launchpage pro náš web (juuukebox - poslední verze). Chceme zaujmout uživatele a tak jsme web pořádně rozhýbali. Problém je s Firefoxem, kde velká část animací funguje, ale nedaří se mi roztočit vinylovou desku na středu. V ostatních prohlížečích se točí jak má, můžete na nich omrknout správnou funkčnost.
Celá ta sranda s točenim začíná na řádce 230 ve /style.css (třída .vinyl-placed se připřadí po najetí desky do čárkovanýho kruhu).

Budu vděčnej za jakýkoliv nápady :)
peta
Profil
Prohlizec mi pise chyby:
Varování: Chyba při parsování hodnoty „transform“.  Deklarace vynechána.
translate(undefinedpx, undefinedpx)

Varování: ReferenceError: reference to undefined property anchors.distLeft
Zdrojový soubor: http://www.juuukebox.com/d/moveit.js
Řádek: 66

Nevidim zadne toceni ani ve FF ani v IE. Co presne se ma jak tocit? Jako, deska rotovat jako na gramofonu nebo jak? Pri pohybu mysi se tam otaceji a pohybuji jen napisy.

Kod, ktery js vygeneruje po zapadnuti desky je tento, jestli ti to nejak pomuze
<html lang="en-us"><head>
    <meta charset="utf-8">
    
    <title>Juuukebox launch</title>
    
    <meta name="description" content="Juuukebox is new experinece how to stream music.">
    <meta name="author" content="Jape">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <script src="//www.google-analytics.com/analytics.js" async=""></script><script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script src="environ.js"></script>
    <script src="function.js"></script>
    
    <link href="favicon.ico" rel="icon" type="image/x-icon">

    <link href="reset.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">
    <noscript>
        <style>
            /* Styles for device without javascript */
            #curtain {display: none!important;}
        </style>
    </noscript>
<script src="moveit.js" type="text/javascript"></script></head>
<body class="moveit vinyl-placed">
    <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-48647717-1', 'juuukebox.com');
          ga('send', 'pageview');
    </script>

    <div style="margin-top: 23.5px;" id="content">
        <div id="curtain"></div>
        <img style="transform: translate(0px, 0px);" src="vinyl.png" id="vinyl">
        <div id="helpers">
            <img id="dot-circ" src="dotted-line.png" alt="">
            <p style="transform: translate(-391px, -24px);" id="drag-it"><span>Drag it!</span></p>
            <p id="drop-it"><span>Place it here!</span></p>
            <!--<img id="gram-dot" src="gram-dot.png" alt="" />
            <p id="drag-it"><span>Drag it!</span></p>
            <!--<p id="drop-it"><span>Drop it!</span></p>-->
        </div>

        <section class="s">
            <h1><span style="transform: translate(0px, 0px) rotate(0deg);" id="h1-1">Juuu</span><span style="transform: translate(0px, 0px) rotate(0deg);" id="h1-2">kebox.</span></h1>
            <p><strong><span style="transform: translate(0px, 0px);" id="word-1">The</span> <span style="transform: translate(0px, 0px);" id="word-2">new</span> <span style="transform: translate(0px, 0px);" id="word-3">experience</span> <span style="transform: translate(0px, 0px);" id="word-4">how</span> <span style="transform: translate(0px, 0px); opacity: 1;" id="word-5">to</span> <span style="transform: translate(0px, 0px);" id="word-6">listen</span> <span style="transform: translate(0px, 0px);" id="word-7">music</span> <span style="transform: translate(0px, 0px);" id="word-8">together.</span></strong><br>
            <span style="transform: translate(0px, 0px);" id="word-9">At</span> <span style="transform: translate(0px, 0px) rotate(0deg);" id="word-10">the</span> <span style="transform: translate(0px, 0px);" id="word-11">party,</span> <span style="transform: translate(0px, 0px);" id="word-12">as</span> <span style="opacity: 1;" id="word-13">well</span> <span style="transform: translate(0px, 0px);" id="word-14">as in</span> <span style="transform: translate(0px, 0px);" id="word-15">the cafeteria.</span></p>
            
            <div id="info">
                <p style="transform: translate(0px, 0px); opacity: 1;" class="p-second"><strong>Launching soon.</strong> Add your mail for being informed!</p>

                <div style="transform: translate(0px, 0px); opacity: 1;" class="input" id="input">
                    <input name="mail" id="mail" placeholder="your@mail.com" type="email">
                    <button type="button" id="send-me"><span>+</span></button>
                    <img id="waiting" src="ajax-loader.gif">
                    <p id="response"></p>
                </div>
            </div>
            <br>
        </section>
    </div>
    <div style="height: 100%;" id="shadow-box"><div style="margin-top: 23.5px;" id="shadow"></div></div>
    
    
    <script src="general.js"></script>

</body></html>
Jape
Profil
Ahoj, děkuju za snahu. Problém jsem nakonec našel, šlo o to, že hodnoty transform translate přepisovali hodnoty transform rotate. Tím pádem, když jsem animoval transform, animovala se translate hodnota a ne rotate.
Nefunguje v IE? Mrknu na to a zkusim poladit.
Ještě jednou díky :)

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: