I'm not pretty good in java. Still I guess that question is not too easy for pros as well.
As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.
The background should be responsive.
I found a website having a similar thing sojournnetwork.com
Since I'm no pro with java and jquery a jsfiddle example would be nice!
Thanks in advance
I think this is a perfect tutorial for your needs.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
This is the result of the tutorial:
http://ianlunn.co.uk/plugins/jquery-parallax/
The background image dont change, just is Fixed.
div.background {
background-image:url(xxx);
background-attachment: fixed;
}
And every "new" image is a container div who scroll like another.
Something like this must work.
I believe this effect is typically called "Parallax". You might find some of the following examples helpful:
http://wagerfield.github.io/parallax/
http://stolksdorf.github.io/Parallaxjs/
You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:
background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;
Related
I am developing an ecommerce website on wordpress with as much css as possible as I have minimal experience with Javascript. I came across this website though and was impressed by the 'soft scroll' animation, the only way I can describe it is the browser equivalent of soft closing kitchen drawers.
https://mouthwash.co/news/an-introduction-to-mouthwash
I noticed in the source code they are using Javascript and was wondering if anyone could shed some light on how they have achieved this scroll effect. I have included the following css in my stylesheet, however it's not quite the same.
html {scroll-behavior: smooth;}
If you check the styles of the body element, you'll see that they're using overflow: hidden; which disables the native scroll of the browser.
Instead, on the article-item copy media-content element, they're using translateY to achieve the scroll effect.
This type of effects are achieved using smooth scroll javascript plugins.
The one I use is this one
tympanus.net/Tutorials/SmoothScrollAnimations
Is exactly what I'm describing and has a tutorial if anyone else is interested.
So on my website I have a snowfall effect going on as it is the month of December and I wanted to celebrate, the only problem is, it blocks all of my links and stuff like that... How would I go about making the canvas not overlay my website but still work and show like on top? (You'll understand this if you visit the website.)
Website URL: http://insanewolfhd.byethost17.com/
Script URL: http://insanewolfhd.byethost17.com/Snowfall.js
Where I Got The Script: http:// thecodeplayer.com/walkthrough/html5-canvas-snow-effect (I'm not allowed to post more than 2 links, sorry :/)
Thank you anyone who can help, I feel like it's just a little CSS thing or something and I'm thinking wayyy too much about this :).
Use the z-index css tag. Go into the css class of the snow file, and set it's Z to -1. This is very useful in your situation.
.class{
width: ?px;
height: ?px;
z-index: -1;
Hope this helps!
i am trying to copy the looks of this site:
http://www.vindrejse.net/
If you try to re-size the window downwards, you can see that the image size re-sizes aswell, what exactly is done to achive this?
I've written a jQuery plugin for exact this problem: https://github.com/yckart/jquery.fitpic.js
Here's an example for you: http://yckart.github.com/jquery.fitpic.js
If you just worry about modern browsers, you can do that with CSS3's
background-size: cover;
declaration.
The closest thing to an industry standard for this is the BackStretch plugin:
http://srobbin.com/jquery-plugins/backstretch/
It works on both full page backgrounds and DIV elements. Very simple configuration. Supports transitions.
How does this website http://www.rallypoint.com scale their background pictures?
As I change the size of my browser I can see the height css attribute on the div element changing so I'm assuming it's some kind of javascript working in the background.
The javascript function I see in the body is new Slider however I can't find any reference anywhere on the web about this except JQuery UI Slider which does not seem relevant, is that a custom function they wrote?
They use the 'background-size' CSS3 attribute:
background-size: cover !important;
Read more about it: http://www.css3.info/preview/background-size/
Well, there is certainly more than one way to get the result you want.
I found this the most helpful ...
Perfect Full Page Background Image
That is called FLUID layout.... and it is dependent on CSS and not javascript
read a little about boots strap and other CSS properties
By the way here you can see the background-position as 50% in CSS(learn to use chrome development tool)...so that is the HINT
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.