All geek questions in one place

CSS opacity Image attenuation

I'm trying to fade out my image to switch photo galleries. All this is done in JavaScript, which simply changes the CSS value of the transparency of the image element. This is really slow (slow) on some computers - for example, my laptop, which is not very powerful, but it is completely new (Asus Eeepc).

I was wondering if in any case I can fix this performance issue. I've seen demonstrations of Canvas and HTML5 animations applied to images, and they are really smooth on my laptop. I wonder if I can apply the same thing to my image fading function.

Any ideas? How should I do it?

+3
source share
5 answers

canvas : http://jsfiddle.net/6wmrd/12/ ( Chrome Firefox)

, - , , , , . , 5 , .

, , , , , .

FPS. , MooTools 50 FPS . FPS .

+3

, : :

/*  ****************************
    * updated for all browsers by 
    * Evan Neumann of Orbiting Eden on 
    * October 6, 2011.      
    * www.orbitingeden.com - evan@orbitingeden.com
    * original version only worked for IE
    *****************************/
<!-- Begin
    /*  *****************************
     *  * editable by user
     *  ***************************/
    var slideShowSpeed      = 5000; // Set slideShowSpeed (milliseconds)        shared by IE and other borwsers
    var crossFadeDuration   = 5;    // Duration of crossfade (1/10 second)      shared by IE and other borwsers
    var crossFadeIncrement  = .05;  //crossfade step amount (1 is opaque)   for non-IE browsers

    // Specify the image files
var Pic = new Array();      // do not change this line
// to add more images, just continue the pattern, adding to the array below
Pic[0] = 'images/dare2wear-427ED-e.jpg';        
Pic[1] = 'images/PBW_3238EDSM-e.jpg';           
Pic[2] = 'images/dare2wear-441_2ED-e.jpg';      

/*  ********************************
    * do not change anything below this line
    **********************************/
var f = 0;          //index of the foreground picture
var b = 1;          //index of the background picture
var p = Pic.length; //number of pictures loaded and in queue - this may increase as time goes on depending on number and size of pictures and network speed

//load the picture url into an image object array
//used to control download of images and for IE shortcut
var preLoad = new Array();
for (i = 0; i < p; i++) { 
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
}

function runSlideShow() {//this is trigerred by <body onload="runSlideShow()" > 
    //if IE, use alternate method
    if (document.all) {
        document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
        document.images.SlideShow.filters.blendTrans.Apply();
    }

    //increment the foreground image source
    document.images.SlideShow.src = preLoad[f].src;

    //if IE, use the shortcut
    if(document.all) {
        document.images.SlideShow.filters.blendTrans.Play();
    }
    //all other browser use opacity cycling
    else    {
        var imageContainer  = document.getElementById('imageContainer');
        var image           = document.images.SlideShow;
        //convert an integer to a textual number for stylesheets
        imageContainer.style.background = "url('"+Pic[b]+"')";
        //set opacity to fully opaque (not transparent)
        image.style.opacity = 1;
        //run fade out function to expose background image
        fadeOut();
    }

    //increment picture index
    f++;
    //if you have reached the last picture, start agin at 0
    if (f > (p - 1)) f = 0;
    //set the background image index (b) to one advanced from foreground image
    b = f+1;
    //if b is greater than the number of pictures, reset to zero
    if(b >= p)  {b = 0;}

    //recursively call this function again ad infinitum
    setTimeout('runSlideShow()', slideShowSpeed);
}

function fadeOut(){
    //convert to element
    var el = document.images.SlideShow;

    //decrement opacity by 1/20th or 5%
    el.style.opacity = el.style.opacity - crossFadeIncrement;
    //if we have gone below 5%, escape out to the next picture
    if(el.style.opacity <= crossFadeIncrement)  {
        return; 
    }
    //wait 50 milliseconds then continue on to decrement another 5%
    setTimeout('fadeOut()', crossFadeDuration*10);
}
//  End -->

. - . div, td, body . - . , <body> onload

  <body onLoad="runSlideShow()">
      <!-- this is the main image background -->
      <div id="imageContainer">
        <!-- this is the main image foreground -->
        <img id="SlideShow" name='SlideShow' width="324" height="486">
      </div>
+2

javascript. - (jQuery, Mootools)?

, CSS3 transition - .

Gecko 2 (Firefox 4), webkit (Safari Chrome) Opera.

CSS , :

#example  {
   opacity: 0;

   -o-transition: opacity .3s linear;
   -moz-transition: opacity .3s linear;
   -webkit-transition: opacity .3s linear;
   transition: opacity .3s linear;
}

#example:hover {
   opacity: 1;
}

? ( , Firefox 4 IE) Javascript-. .

+1

Look at the first page of this site. These are 5 images that disappear inward and rotate, pure css2, html4, javascript, and is a cross browser (as far as I know). Javascript is a little beaten up - written a while ago :), but it looks pretty smooth. See how this is done on your computer. If it lags, you can try with a slower update, say 150 or 200 ms instead of 100.

0
source

Source: https://habr.com/ru/post/1786964/

More articles:


All Articles