jQuery Bildgrösse zufällig verändern

[tigtman]

Hallo zusammen

Ich habe das Script von Ivan http://www.jqueryrain.com/?LeiRAVGW bereits soweit angepasst (bekommen), dass anstatt dem html-Sonderzeichen "Snowflake" ein Bild eingebunden wird.

Nun schaffe ich es aber nicht, das sich das Bild auch in der Grösse zufällig ändert, da ich "font-size" ja nicht einfach mit "width" und "height" austauschen kann.

Hätte jemand eine Idee, wie ich das Script so abändern muss (minSize, maxSize, font-size...), dass der gewünschte Effekt auftritt? -.-

Das ist mein Ansatz:

(function($){
   
    $.fn.snow = function(options){
   
            var $flake             = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px','background-image': 'url(../img/snowball.png)', 'height': '37px', 'width': '37px'}),
                documentHeight     = $(document).height(),
                documentWidth    = $(document).width(),
                defaults        = {
                                    minSize        : 30,
                                    maxSize        : 1000,
                                    newOn        : 350,
                                    flakeColor    : "#FFFFFF"
                                },
                options            = $.extend({}, defaults, options);
               
           
            var interval        = setInterval( function(){
                var startPositionLeft     = Math.random() * documentWidth - 100,
                     startOpacity        = 0.1 + Math.random(),
                    sizeFlake            = options.minSize + Math.random() * options.maxSize,
                    endPositionTop        = documentHeight - 40,
                    endPositionLeft        = startPositionLeft - 100 + Math.random() * 200,
                    durationFall        = documentHeight * 10 + Math.random() * 5000;
                $flake
                    .clone()
                    .appendTo('.home-slider-wrapper')
                    .css(
                        {
                            left: startPositionLeft,
                            opacity: startOpacity,
                            'font-size': sizeFlake,
                            color: options.flakeColor
                        }
                    )
                    .animate(
                        {
                            top: endPositionTop,
                            left: endPositionLeft,
                            opacity: 0.2
                        },
                        durationFall,
                        'linear',
                        function() {
                            $(this).remove()
                        }
                    );
            }, options.newOn);
   
    };
   
})(jQuery);

 

[tigtman]

Keiner eine Idee?

 

[Sempervivum]

Dann versuche ich's mal: Ich würde hier ansetzen:

var $flake             = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px','background-image': 'url(../img/snowball.png)', 'height': '37px', 'width': '37px'})

Allerdings würde es die Sache erleichtern, wenn Du ein einfaches img-Tag verwenden würdest; IMO ist ein div nicht notwendig. Dessen Größe kannst Du dann mit den Eigenschaften width und height verändern.

 

[tigtman]

Danke für den Ansatz, aber ich denke, dass das nichts mit dem img-Tag zu tun hat, da auch ein Div in der Grösse veränderbar ist.

 

[Sempervivum]

Ja natürlich, ich meine ja auch nicht, dass es mit dem div nicht geht, sondern nur, dass es ohne einfacher wäre.

 

[tigtman]

Aber wie kann ich nun die Grösse beeinflussen? Zuvor war es ja ein Zeichen (von einem Font). Jetzt ist es ein Image, welches die Grösse "zufällig" ändern soll.

 

[Sempervivum]

Probiers mal so:

var $flake = $('<img id="flake" src="deineschneeflocke.jpg">').css({'position': 'absolute', 'top': '-50px'})
// und weiter unten statt 'font-size': sizeFlake,:
'width':  sizeFlake + 'px',

BTW: Ich finde, es gibt schönere Schnee-Plugins, z. B. dieses, das ich selber verwende und das ein Bild als Schneeflocke schon unterstützt:
http://www.somethinghitme.com/2012/12/08/snowfall-1-6/

 

[tigtman]

Super, so hat es geklappt. Danke!

/**
* jquery.snow - jQuery Snow Effect Plugin
*
* Available under MIT licence
*
* @version 1 (21. Jan 2012)
* @author Ivan Lazarevic
* @requires jQuery
* @see http://workshop.rs
*
* @params minSize - min size of snowflake, 10 by default
* @params maxSize - max size of snowflake, 20 by default
* @params newOn - frequency in ms of appearing of new snowflake, 500 by default
* @params flakeColor - color of snowflake, #FFFFFF by default
* @example $.fn.snow({ maxSize: 200, newOn: 1000 });
*/
(function($){
   
    $.fn.snow = function(options){
   
            var $flake             = $('<img id="flake" src="../img/snowball.png">').css({'position': 'absolute', 'top': '-50px'}),
                documentHeight     = $(document).height(),
                documentWidth    = $(document).width(),
                defaults        = {
                                    minSize        : 30,
                                    maxSize        : 50,
                                    newOn        : 280,
                                },
                options            = $.extend({}, defaults, options);
               
           
            var interval        = setInterval( function(){
                var startPositionLeft     = Math.random() * documentWidth - 100,
                     startOpacity        = 0.1 + Math.random(),
                    sizeFlake            = options.minSize + Math.random() * options.maxSize,
                    endPositionTop        = documentHeight - 40,
                    endPositionLeft        = startPositionLeft - 100 + Math.random() * 200,
                    durationFall        = documentHeight * 10 + Math.random() * 5000;
                $flake
                    .clone()
                    .appendTo('.home-slider-wrapper')
                    .css(
                        {
                            left: startPositionLeft,
                            opacity: startOpacity,
                            sizeFlake: sizeFlake,
                            color: options.flakeColor,
                            width: sizeFlake + 'px'
                        }
                    )
                    .animate(
                        {
                            top: endPositionTop,
                            left: endPositionLeft,
                            opacity: 0.2,
                        },
                        durationFall,
                        'linear',
                        function() {
                            $(this).remove()
                        }
                    );
            }, options.newOn);
   
    };
   
})(jQuery);