image - How do I change my background on scroll using CSS? -

-

my website has perfect full page background image. grabbed code css tricks.

if visit my site can see in action.

what i'd know is, there way can have image change different image once scroll length?

my aim have same image speech bubble coming out of dogs mouth , i'm guessing 2 images this.

is possible in css only??????

here code using.

html {  background: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

as others said, nop, can't css, little js code can you.

ex.

jquery(window).scroll(function(){     var fromtoppx = 200; // distance trigger     var scrolledfromtop = jquery(window).scrolltop();     if(scrolledfromtop > fromtoppx){         jquery('html').addclass('scrolled');     }else{         jquery('html').removeclass('scrolled');     } });

and in css file:

html {     background-repeat: no-repeat;     background-position: center center;     background-attachment: fixed;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover; }  html {     background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg); }  html.scrolled {     background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg); }

so adding or removing class html tag @ distance top javascript (jquery in case)... , css, changing image.

now on.. can apply transitions image, or play code made slidetoggle example instead changing class.... , many many other options.

good luck

edit: fiddle example: http://jsfiddle.net/pzrcm/


Comments

Post a Comment

Popular posts from this blog

c# - SelectList with Dictionary, add values to the Dictionary after it's assigned to SelectList -

-
i have following code - dictionary<string, string> mydict = new dictionary<string, string>(); mydict.add("keya", "valuea"); mydict.add("keyb", "valueb"); ienumerable<selectlistitem> myselectlist = new selectlist(mydict, "key", "value") further down in program, want add values mydict . possible? if yes, how? want - myselectlist.mydict.add("keyc", "valuec"); if you're wanting add items mydict, possible, , changes reflected in of myselectlist 's enumerations long changes made before enumeration (e.g. using .tolist() ) generated. as worked example: dictionary<string, string> mydict = new dictionary<string, string>(); mydict.add("keya", "valuea"); mydict.add("keyb", "valueb"); ienumerable<selectlistitem> myselectlist = new selectlist(mydict, "key", "value...
Read more

how can i manage url using .htaccess in php? -

-
i want manage url of website right showing me www.computermall.co.in/product_details.php?prdid=34 but want www.computermall.co.in/product_details/34 how can it? i have tried this options +followsymlinks -multiviews rewriteengine on rewritebase /computermall # uri-path directly the_request variable rewritecond %{the_request} ^(get|head)\s/(.*)\.php [nc] # strip extension , redirect permanently rewriterule .* /%2 [r=301,l,nc] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewritecond %{request_uri} !\.php [nc] # map internally original resource rewriterule ^(.*)$ $1.php [l,qsa] try this: rewriteengine on rewriterule ^product_details/prdid/([^/]*)$ /product_details?prdid=$1 [l] edit: removed leading slash
Read more

ios - I get the error Property '...' not found on object of type '...' -

-
appdelegate.h #import <uikit/uikit.h> @interface appdelegate : uiresponder <uiapplicationdelegate> @property (strong, nonatomic) uiwindow *window; @end appdelegate.m #import "appdelegate.h" #import "firstviewcontroller.h" #import "secondviewcontroller.h" @implementation appdelegate - (bool)application:(uiapplication *)application didfinishlaunchingwithoptions: goes on normal app.......... @end firstviewcontroller.h #import <uikit/uikit.h> @interface firstviewcontroller : uiviewcontroller @property (strong, nonatomic) iboutlet uiimageview *bground; - (ibaction)settingspressed:(id)sender; - (ibaction)startpressed:(id)sender; @end @class secondviewcontroller; @interface secondviewcontroller : uiviewcontroller @property(strong,nonatomic)secondviewcontroller *secondviewcontroller; @end firstviewcontroller.m #import "firstviewcontroller.h" @interface firstviewcontroller () @end @implement...
Read more