| Autor | Zpráva | ||
|---|---|---|---|
| Jape Profil |
#1 · Zasláno: 18. 3. 2014, 10:16:58
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> |
||
|
Časová prodleva: 4 dny
|
|||
| Jape Profil |
#3 · Zasláno: 24. 3. 2014, 15:07:59
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 :) |
||
|
Časová prodleva: 10 let
|
|||
0