Flo Posted February 8, 2016 Share Posted February 8, 2016 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2016 Share Posted February 8, 2016 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? Link to comment Share on other sites More sharing options...
john_jack Posted February 8, 2016 Share Posted February 8, 2016 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> Link to comment Share on other sites More sharing options...
Flo Posted February 8, 2016 Author Share Posted February 8, 2016 @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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 8, 2016 Share Posted February 8, 2016 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; } Link to comment Share on other sites More sharing options...
Flo Posted February 8, 2016 Author Share Posted February 8, 2016 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2016 Share Posted February 8, 2016 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> 1 Link to comment Share on other sites More sharing options...
Flo Posted February 9, 2016 Author Share Posted February 9, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now