February 11, 201214 yr Hi everyone, I've been designing this mainly as a recreational idea, but I hope to be able to either use it or replicate it for something more concrete. Anyway, what I've been wondering is how possible it would be to animate the "speech bubble" graphic to appear (I'm thinking with a slide to the right, then revealing up) when the "rain drop" graphic is clicked, and if I can make the appropriate text fade in once the animation is complete. I'm thinking of trying this with CSS, jQuery, and AJAX, but I may be completely off, as I have very little experience with these languages. Can anyone give any advice, or a direction I can follow? I'd really appreciate it! Thanks
February 11, 201214 yr You'll only need CSS and jQuery, AJAX is completely unrelated to what you're trying to achieve - unless you really want to fetch the text separately rather than hiding it?! Very simple to do if you know even the slightest bit of CSS, so you should be fine! Look at jQuery's .animate() function. Edited February 11, 201214 yr by andyl
February 11, 201214 yr Not an easy one... the jQuery 'Cycle' plugin has some interesting transitions that may work for you http://jquery.malsup.com/cycle/adv.html Some the new HTML5 canvas features may be worth looking at as well, there are several examples of speech bubbles (there's also an oscillating bubble thay might modify well). Would avoid trying anything with the jpeg animation or animated PNGs as they are a complete pig to create and add a lot of bloat to the page loading time.
February 11, 201214 yr I've whipped this up quickly, might be of use to you: Use Chrome to view it, I couldn't be bothered with cross-browser at this hour! You'll need to tidy up the CSS, and probably the JS too. <!DOCTYPE html> <html> <head> <title>Speech bubble example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var speech_bubble_open = false; var speech_bubble_anim = false; $("#speech-bubble-opener").click(function(e){ e.preventDefault(); if (speech_bubble_anim) return; speech_bubble_anim = true; if (!speech_bubble_open) { $("#speech-bubble").animate({ width: "250px", height: "15px" }, 300).delay(100).animate({ width: "220px", height: "370px", paddingLeft: "15px", paddingRight: "15px", paddingTop: "15px", paddingBottom: "15px", top: "-225px" }, 500); } else { $("#speech-bubble").animate({ width: "250px", height: "15px", paddingLeft: "0px", paddingRight: "0px", paddingTop: "0px", paddingBottom: "0px", top: "30px" }, 500).delay(100).animate({ width: "0px", height: "0px" }, 300); } speech_bubble_open = !speech_bubble_open; setTimeout(function(){ speech_bubble_anim = false; }, 1000) }); }); </script> <style type="text/css"> html,body{background:#053440;font-family:Helvetica, Arial, sans-serif} .content{width:768px;margin:0 auto;position:relative} #speech-bubble-opener, #speech-bubble{background:#629ea3} #speech-bubble-opener{cursor:pointer;display:block;text-indent:-5000em;width:70px;height:120px;border-radius:10px;margin-top:300px} #speech-bubble{border-radius:8px;position:absolute;top:30px;left:85px;width:0px;height:0px;color:#222;overflow:hidden;box-shadow:#000 3px 3px 10px} p{line-height:1.4em;font-size:1em} </style> </head> <body> <div class="content"> <a id="speech-bubble-opener">Open speech bubble</a> <div id="speech-bubble"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam leo nec tortor egestas iaculis. Sed non orci quis purus molestie tristique. Suspendisse in scelerisque leo. Vestibulum mollis interdum tellus, ut tristique libero luctus at. Etiam non arcu a dui pellentesque facilisis eu vel risus. Sed malesuada congue nisi sed rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> </body> </html> Edited February 11, 201214 yr by andyl
February 12, 201214 yr Author Wow! This is exactly how I pictured it! Thank you so much for the help! I'd have had very little idea of how to get this to work, but this has really helped! As I'm really new to jQuery itself, I'm just wondering if I'll need separate scripts for the other two symbols on the page, or if the functions for those can be built into one script. The other two symbols would have a similar outcome when pressed, but the bubbles would be proportioned differently, and appear using a similar animation. i.e., for the "hut" symbol, just imagine the "rain drop" symbol's bubble rotated anti-clockwise 90 degrees. Thank you so much! This has really helped me understand more about the language.
Create an account or sign in to comment