locked
Sparkle or particle effect in HTML5 orJava script RRS feed

  • Question

  • Hi everyone 

    I am preparing a app in windows 8 using Javascript /Html5 

     I am embedding a image in it..and making some animation in a page

    I want some animation like whenever I touch the image a sparkle of stars or particle should scatter for a moment.. Is anyone know how to do. If so I want to know how to do that please let me know about it. by giving me a code example..

    Please experts help me to solve this by a single example


    N.P.SARAVANA KUMAR

    Thursday, July 25, 2013 10:22 AM

Answers

  • Hi NPSARAVANAKUMAR,

    Thanks for posting!

    From your description, I think you want to achieve  to this effect: When you touch a image, the surface of the image show a sparkle of stars or other effect.

    If I am right, I think we can use the animation to achieve.

    The idea is as follow:

    firstly, we can write a hidden div for showing the sparkle start or other picture.

    Secondly, we can add  event listener to your image.

    Thirdly, we add the animation to the hidden div and fired it by image event.

    I think it will achieve to.

    And I think you can refer t to this animation example:

    http://javascript.info/tutorial/animation

    Thanks!


    Saturday, July 27, 2013 9:09 AM
    Moderator
  • Hi,

    You can try this simple code:

     <div style="">
                <style>
                    #demo {
                        overflow: hidden;
                        width: 120px;
                        text-align: center;
                        padding: 10px;
                        z-index: 3;
                    }
    
                        #demo img {
                            border: none;
                            width: 100px;
                            height: 100px;
                            border: 5px solid #f4f4f4;
                            z-index: 3;
                        }
    
                    #enlarge_images {
                        ;
                        display: none;
                        border: 5px solid #f4f4f4;
                        z-index: 100;
                    }
                </style>
                <img src="#" id="enlarge_images" />
                <div id="demo" style="overflow: hidden; width: 120px; text-align: center; padding: 10px">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                </div>
            </div>
    
            <script>
                var demo = document.getElementById("demo");
                var gg = demo.getElementsByTagName("img");
                var ei = document.getElementById("enlarge_images");
                for (i = 0; i < gg.length; i++) {
                    var ts = gg[i];
                    ts.onmousemove = function (event) {
                        event = event || window.event;
                        event.top;
                        ei.style.display = "block";                  
                        ei.style.top = event.currentTarget.offsetTop + "px";
                        ei.style.left = event.currentTarget.offsetLeft + "px";
                    }
                    ts.onmouseout = function () {
                        ei.innerHTML = "";
                        ei.style.display = "none";
                    }
                }
            </script>
    

    And You can modify this code to meet your need.

    Thanks

    Monday, August 5, 2013 5:25 AM
    Moderator

All replies

  • Hi NPSARAVANAKUMAR,

    Thanks for posting!

    From your description, I think you want to achieve  to this effect: When you touch a image, the surface of the image show a sparkle of stars or other effect.

    If I am right, I think we can use the animation to achieve.

    The idea is as follow:

    firstly, we can write a hidden div for showing the sparkle start or other picture.

    Secondly, we can add  event listener to your image.

    Thirdly, we add the animation to the hidden div and fired it by image event.

    I think it will achieve to.

    And I think you can refer t to this animation example:

    http://javascript.info/tutorial/animation

    Thanks!


    Saturday, July 27, 2013 9:09 AM
    Moderator
  • You are correctly understood my query,..

    Thank you, Will.

    Let me know if there is any other example of the animation like that or any code help me by giving me


    N.P.SARAVANA KUMAR

    Saturday, July 27, 2013 12:30 PM
  • I searched there Shao.

    I couldn't find anything like that .

    Please help me in any way


    N.P.SARAVANA KUMAR

    Tuesday, July 30, 2013 6:28 AM
  • Hi,

    You can try this simple code:

     <div style="">
                <style>
                    #demo {
                        overflow: hidden;
                        width: 120px;
                        text-align: center;
                        padding: 10px;
                        z-index: 3;
                    }
    
                        #demo img {
                            border: none;
                            width: 100px;
                            height: 100px;
                            border: 5px solid #f4f4f4;
                            z-index: 3;
                        }
    
                    #enlarge_images {
                        ;
                        display: none;
                        border: 5px solid #f4f4f4;
                        z-index: 100;
                    }
                </style>
                <img src="#" id="enlarge_images" />
                <div id="demo" style="overflow: hidden; width: 120px; text-align: center; padding: 10px">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                    <img src="#">
                </div>
            </div>
    
            <script>
                var demo = document.getElementById("demo");
                var gg = demo.getElementsByTagName("img");
                var ei = document.getElementById("enlarge_images");
                for (i = 0; i < gg.length; i++) {
                    var ts = gg[i];
                    ts.onmousemove = function (event) {
                        event = event || window.event;
                        event.top;
                        ei.style.display = "block";                  
                        ei.style.top = event.currentTarget.offsetTop + "px";
                        ei.style.left = event.currentTarget.offsetLeft + "px";
                    }
                    ts.onmouseout = function () {
                        ei.innerHTML = "";
                        ei.style.display = "none";
                    }
                }
            </script>
    

    And You can modify this code to meet your need.

    Thanks

    Monday, August 5, 2013 5:25 AM
    Moderator