Dynamic Background Scrolling

Well, this was fun, thanks!

I hope you don't mind me taking the liberty to use percentages to make my life a little bit easier and possibly the script slightly more robust since I can reliably use floats with percentages.

What I did is make the layout, html and css comply with the rules you need for the bg to be animated properly, they stayed largely the same from what you had.

Then it was just a question of figuring out the calculations needed with the right properties to figure out the percentage you were from the top, the *20 is actually the amount of space 'left' to fill by the background image in percentages (as the background height is 80%).

They I moved the calculations to a function so I could call that on scroll and on window resize, making sure it's initiated on any event that modifies the window somehow...

Didn't do extensive testing but it worked in Chrome and I'm tired :p

I believe this is what you are looking for:

~~http://jsfiddle.net/sg3s/RSqrw/15/ See edit 2~~

~~If you wanted this the other way arround just make the page background start at the top and modify that:~~

~~http://jsfiddle.net/sg3s/RSqrw/14/ See edit 2~~

~~Edit:~~

~~As a bonus, and since I had never actually written jquery script as a 'plugin', I decided to convert this into one. What I came up with should be easy to implement and use!~~

~~http://jsfiddle.net/sg3s/RSqrw/52/~~ See Edit 3

~~Functionality successfully tested in Chrome, Firefox 3.6, IE9 + compatibility mode~~

~~Edit 2:~~

Reading the question again checking if I did it right I noticed I didn't quite do what you want, so I updated the link in the first edit which gives you a plugin in which you can have several options for the scrolling background. It retains my 'old' interpetation while also doing what you want... Read comments in code for some extra descriptions.

Edit 3:

As I went to work today I was bothered with the fact that my plugin 'try' was a little bloated. And as you mentioned in the comment it didn't quite fit the requirements.

So I rewrote it to only do what you want and not much more, tested in Chrome Firefox, IE9 +compat etc etc.. This script is a lot cleaner.

http://jsfiddle.net/sg3s/vZxHW/

You can chose to make the background stick to the top or bottom if the height fits in the window. Nothing else, but that is already more than enough to do some pretty cool stuff :p

JS (CSS) dynamic background image moving

What your are looking for is called parallax effect. There are several libraries which can help you (http://pixelcog.github.io/parallax.js/ for instance). But the simplest solution could something like this:

// Handle the window scroll event$(window).scroll(function () {    // Store the distance scrolled    var scrolled = $(window).scrollTop() + 1;
    // Set the scroll speed    var scrollSpeed = 0.3;        // Update the background position    $("#add-outer-container").css('background-position', '0' + -(scrolled * scrollSpeed) + 'px');});

body {    min-height:3000px;}
#add-outer-container {    background:url(http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg) no-repeat  fixed;    width:100%;    height:500px;    margin:0 auto;    border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="add-outer-container"></div>

Dynamically change background color on scroll

You need to smoothly interpolate the colors by taking into account the page's scroll offset (window.scrollY, or window.pageYOffset on older browsers).

The Samsung site is transitioning a solid color instead of a gradient, which is a bit simpler.

Like this (see CodePen):

const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 150
  y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
  const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})

You can apply the same logic to the gradient colors.

Fullscreen infinite scrolling background

I have used an image element just to use the auto height of it.

Then I use a backgroiund on a pseudo that gives the ability to repeat itself as many times as needed

I have set 2 different containers with different aspect ratios to more easily check the result on different screens

.container {  border: solid 1px black;  overflow: hidden;  position: absolute;}
#ctn1 {  width: 300px;  height: 150px;}
#ctn2 {  width: 200px;  height: 350px;  left: 320px;}
.inner {  width: 100%;  position: relative;  animation: scroll 5s infinite linear;}
.inner:after {  content: "";  height: 500%;  width: 100%;  position: absolute;
  background-image: url(https://i.stack.imgur.com/FlK9o.jpg);  background-size: 100% 20%;}
.img {  width: 100%;}

@keyframes scroll {  from {transform: translateY(-100%);}    to {transform: translateY(-200%);}
}

<div class="container" id="ctn1">    <div class="inner">        <img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">    </div></div><div class="container" id="ctn2">    <div class="inner">        <img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">    </div></div>

Keep background image fixed during scroll using css

background-attachment: fixed;

http://www.w3.org/TR/CSS21/colors.html#background-properties

Trying to create a scrolling background effect with imageViews in javafx

Your loop is not the right thing to do. Use a Transition Animation on each ImageView. You want a TranslateTransition.

Something like this:

    // Animation to scroll background vertically
    TranslateTransition trans1 = new TranslateTransition(Duration.minutes(1), background);
    trans1.setFromY(0);
    trans1.setToY(740);
    trans1.setCycleCount(20);
    TranslateTransition trans2 = new TranslateTransition(Duration.minutes(1), background2);
    trans2.setFromY(-740);
    trans2.setToY(0);
    trans2.setCycleCount(20);
    ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
    parTrans.play();

If your intention is to have these images as a parallax background that scrolls "forever", set the transitions to cycle indefinitely

    trans1.setCycleCount(Animation.INDEFINITE);

and use slightly different durations for each.

If you are using the same image, don't load it twice:

    Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
    ImageView background = new ImageView(bgImg);
    game.getChildren().add(background);

    ImageView background2 = new ImageView(bgImg);
    game.getChildren().add(background2);

Here's the whole start method with an added speed slider, just for fun:

@Override
public void start(Stage stage) {

    stage.setTitle("DRIFT STAGE");

    Pane game = new Pane();
    Scene gameScene = new Scene(game, 956, 740);
    Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
    ImageView background = new ImageView(bgImg);
    ImageView background2 = new ImageView(bgImg);
    Slider speedSlider = new Slider(0, 5, 1);
    game.getChildren().addAll(background, background2, speedSlider);

    // Animation to scroll background vertically
    TranslateTransition trans1 = new TranslateTransition(Duration.seconds(10), background);
    trans1.setFromY(0);
    trans1.setToY(740);
    trans1.setInterpolator(Interpolator.LINEAR);
    trans1.setCycleCount(Animation.INDEFINITE);
    TranslateTransition trans2 = new TranslateTransition(Duration.seconds(10), background2);
    trans2.setFromY(-740);
    trans2.setToY(0);
    trans2.setCycleCount(Animation.INDEFINITE);
    trans2.setInterpolator(Interpolator.LINEAR);
    ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
    parTrans.rateProperty().bind(speedSlider.valueProperty());
    parTrans.play();

    stage.setScene(gameScene);
    stage.show();
}

Glitchy CSS dynamic linear-gradient on scroll

Simply do your styling on a pseudo ::before element instead of doing it directly on body, so you can use position: fixed.

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(240deg, #567EB9 0%, #B29ACA 50%, #B29ACA 70%, #F9839B 95%, #e6b394 100%);
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

It might not be the best solution, but it works.

Fixed overlay with dynamic content + scrolling

Use the power of FlexBox model

html,body {    width: 100%;    height: 100%;}
.overlay {    position: fixed;    left: 30px;    right: 30px;    top: 30px;    bottom: 30px;    background-color: #f00;}
.container {    position: relative;    height: 100%;    width: 100%;    display: flex;    flex-direction: column;    align-items: stretch;}
.inner {    overflow-x: hidden;    overflow-y: scroll;    background-color: #0f0;}
.header {    line-height: 60px;    background-color: #00f;    flex-shrink: 0;}
.footer {    line-height: 30px;    width: 100%;    background-color: #00f;    flex-shrink: 0;}

<div class="overlay">    <div class="container">        <div class="header">            Header        </div>        <div class="inner">            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />            Inner Content<br />        </div>        <div class="footer">            Footer        </div>    </div></div>Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />Page Page Page Page Page Page Page Page <br />

Dynamic Background Scrolling