Jump to content
Flo

Light effect on JS

Recommended Posts

Hi everybody.

First at all, I specify I'm French and I'm sorry if my English isn't perfect. I've chosen this forum because I didn't find a solution with many French forums.

A friend has advised to me this forum to expose my problem.

 

I would like to add an animation to my html page by using JS. Let me explain ; for the time being, there's only one picture <img> on my page, it's a candle image. I would like to add an animation by using JS (or something else it doesn't matter) giving the impression of being near to the flame, if you know what I mean. I don't want to see the flame's move or to modify the picture, but just a light effect by using luminosity.

 

I'm not a very high level in JS, and I don't know if I should use randomly variables and change luminosity or something else. If you could show me an example I would be grateful (:

 

Thanks in advance,

-Flo

Share this post


Link to post
Share on other sites

I think you need to describe in more detail what you want the effect to look like. Is it just a picture or are other elements on the page meant to be affected?

Share this post


Link to post
Share on other sites

i think this will do the trick for you .

<html>
<head>
<style>
img {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
img:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

</style>
</head>
<body style="background-color:black;color:white">

<img src="http://rhondamariebrackett.com/wp-content/uploads/2015/02/candle-02.jpg">
</body>
</html>

Share this post


Link to post
Share on other sites

@Ingolme ; There is only this <img> in the html nothing else. You know when you are looking at a candle, the flame oscillates and illuminates the room by a irregular light, I would like to put that kind of affect on the page, as if the candle was next to you.

 

@john_jack ; When the mouse is above the image the opacity changes, and I would like this effect but with different opacities and automatically. That effect could look like a real lit candle.

 

Thanks,

-Flo

Share this post


Link to post
Share on other sites

This is probably too much for somebody who is only beginning in Javascript.

 

You would first need to use setInterval() for animation. You would choose a time interval, like every 100 milliseconds, to run a function that changes the opacity of the element.

To set the opacity in Javascript you would use the style property of the element.

To choose a random value to set to opacity to, just use Math.random().

 

This example is very basic, the effect might not look right, but it's the simplest solution. Here's some example code:

var element = [access image element here];

// Run a function perioadically
var timer = setInterval(updateOpacity, 100);

// This is the function that runs on each interval
function updateOpacity() {
  var newOpacity = Math.random();
  element.style.opacity = newOpacity;
}

Share this post


Link to post
Share on other sites

Thank you Ingolme for these informations, Im gonna try that. I think I will use a function to increase and decrease randomly the opacity and luminosity with a setInterval (tin order to modify opacity like a sinusoidal function).

 

-Flo

Share this post


Link to post
Share on other sites

you could use css3 animation, rough example

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">
            .candle-light {width: 500px; margin: 0 auto; position: relative; overflow: hidden;                        }
            .candle-light  img{max-width: 100%; height: auto; opacity: 0.76;}

            /*.light-effect {position: absolute; top: 29%; left: 50%; width: 90%; height: auto; background-color: red; ; border-radius: 25px;*/
            .light-effect {position: absolute; height: 100%; top: 0; left: 0; width: 100%;
                           /*  -webkit-box-shadow: 0px 0px 300px 3px rgba(255,255,255,0.81);
                             -moz-box-shadow: 0px 0px 300px 3px rgba(255,255,255,0.81);
                             box-shadow: 0px 0px 300px 3px rgba(255,255,255,0.81);*/
                           background: red; /* For browsers that do not support gradients */
                           background: -webkit-radial-gradient(white 10%, black 90%); /* Safari 5.1 to 6.0 */
                           background: -o-radial-gradient(white 10%, black 90%); /* For Opera 11.6 to 12.0 */
                           background: -moz-radial-gradient(white 10%, black 90%); /* For Firefox 3.6 to 15 */
                           background: radial-gradient(white 10%, black 90%); /* Standard syntax */

                           z-index:  0;

                           animation-name: example;
                           animation-duration: 4s;
                           animation-iteration-count: infinite;
                           opacity:1
            }
            @keyframes example {
                0%   {
                    opacity: .75;
                    background: -webkit-radial-gradient(white 10%, black 90%); /* Safari 5.1 to 6.0 */
                    background: -o-radial-gradient(white 10%, black 90%); /* For Opera 11.6 to 12.0 */
                    background: -moz-radial-gradient(white 10%, black 90%); /* For Firefox 3.6 to 15 */
                    background: radial-gradient(white 10%, black 90%); /* Standard syntax */}
                25%  {          opacity: 0.5;                 background: -webkit-radial-gradient(white 15%, black 50%); /* Safari 5.1 to 6.0 */
                                background: -o-radial-gradient(white 15%, black 50%); /* For Opera 11.6 to 12.0 */
                                background: -moz-radial-gradient(white 15%, black 50%); /* For Firefox 3.6 to 15 */
                                background: radial-gradient(white 15%, black 50%); /* Standard syntax */}
                50%  {                opacity: 0.25;            background: -webkit-radial-gradient(white 5%, black 80%); /* Safari 5.1 to 6.0 */
                                      background: -o-radial-gradient(white 5%, black 80%); /* For Opera 11.6 to 12.0 */
                                      background: -moz-radial-gradient(white 5%, black 80%); /* For Firefox 3.6 to 15 */
                                      background: radial-gradient(white 5%, black 80%); /* Standard syntax */}

                75% {       opacity: 0.5;                     background: -webkit-radial-gradient(white 10%, black 85%); /* Safari 5.1 to 6.0 */
                            background: -o-radial-gradient(white 10%, black 85%); /* For Opera 11.6 to 12.0 */
                            background: -moz-radial-gradient(white 10%, black 85%); /* For Firefox 3.6 to 15 */
                            background: radial-gradient(white 10%, black 95%); /* Standard syntax */}

                100% {       opacity: 0.75;                     background: -webkit-radial-gradient(white 10%, black 85%); /* Safari 5.1 to 6.0 */
                             background: -o-radial-gradient(white 10%, black 85%); /* For Opera 11.6 to 12.0 */
                             background: -moz-radial-gradient(white 10%, black 85%); /* For Firefox 3.6 to 15 */
                             background: radial-gradient(white 10%, black 95%); /* Standard syntax */}
            }

        </style>
    </head>
    <body>
        <div class="candle-light">
            <span class="light-effect"></span>
            <img src="https://c1.staticflickr.com/7/6034/6312545395_b60a0f7064_b.jpg" width="768" height="1024" alt="6312545395_b60a0f7064_b"/>
        </div>
    </body>
</html>
  • Like 1

Share this post


Link to post
Share on other sites

Thanks a lot dsonesuk for this code. That's exactly what I was looking for, now I'm gonna refine and study it to get a perfect result (:

 

-Flo

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...