I was looking at this HTML5 website, http://www.danhigbie.com, and found the "background image's scrolling" fascinating. I looked through its Javascript but found no code changing the background image.
Save the webpage to disk and play around with the files better.js and better.cs. The background scrolling is being done in the better.js file by changing the css classes (which are defined in better.css)
I am using some jQuery to change the background positioning of multiplebgs based on the scroll position. Each background image element is positioned from the top with a percentage, this may be a bit hard to follow since there are so many background images per section. I take each background elements vertical position value and modify it based on the current scroll bar position. Hope this helps.
Turns out that the effect is done simply by declaring the background position of different "section" as fixed. Found a excellent article that explains how that effect work:
Icon that changes color when scrolling
Here is a javascript library that does this for you and seems to work really well:
http://stolksdorf.github.com/Parallaxjs/
Related
I'm a front end intern and was asked to try and replicate a website mockup video which shows sliding content with a fixed background, but after reaching a certain section tag, the fixed background would switch to a different background. I'm using tailwind CSS to try and emulate the effect. Below is my way to emulating something which I think is similar:
<section class="bg-bg0 md:bg-bgB bg-fixed bg-no-repeat bg-center">
I achieve the effect by giving the sections tailwind css the aforementioned classes. When it reaches to the section I want to change backgrounds, the background is changed by switching the background class from bg-bgA to bg-bgB, and the effect is achieved, however on transition, the page lags TERRIBLY. Is there a more efficient way to go about achieving this effect? I want to apologize in advance if my solution is a dumpster fire, or if the way I ask is wrong.
Found out the issue, the background images were too large, decreasing them by 75% of their original size did the trick.
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
First time on stackoverflow, also my first time with HTML and CSS.
Basically I want a transparent image to be kind of "hooked" on to one specific point on the background, i.e. if I resize the browser window, the image should maintain its position relative to the background and should get smaller accordingly.
The reason I need this is because the image is animated and positioned to a certain spot on the background.
The easiest way I could show it is by actually showing it so: www.opinionoto.com
As you can see I want the speech bubble to always be right beside her face and maintain its position no matter what device or browser size.
This would be great help for me, I'm a super begginer! Thanks in advanced!
why not use multiple background images and position the second one accordingly where ever you need it?
Does the bubble move after the initial move? Can you just make the background a GIF image?
I have a Div named splash which is 473px wide and 139px high. It has a background image applied to it. Within the Div I have 3 other Divs.
I want the background image of the splash container div to fade in and out through different pictures.
Is there any way to achieve this using CSS3?
You can see the splash div on http://blackburnseo.com/ensor/
CSS3 has a property/feature called 'transitions' which may be able to achieve the affect you're looking for, sans JS.
After a quick google, I believe this may be a good spot to get you started.
http://css3.bradshawenterprises.com/transitions/
I don't know how many browsers have implemented this feature, though; the other problem is that not every property supports transitions (you would probably be looking at background-position)
It can be done using transitions, but it wont change automatically.
User must trigger transition somehow (:hover, :focus, etc).
Check the example here: http://jsfiddle.net/seler/zZCyf/