Parallax scroll background image auto zoomin and zoomout

Question

Want to out o zooming zoom out images I am trying it from CSS and normal jQuery function effect onscroll but not working.

Scroll I am adding CSS for zooming but it's not zooming out.

http://ucanedu.in/uraban/#home

Any help is greatly appriciated.

Answer 1

For a parallax scroll effect, your best bet is to use a simple CSS animation with 3 or 4 layers, animating the background from 0 to 100% as shown in this example or this one

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

animation: animatedBackground 80s linear infinite;

For a CSS animation zoom in and out, this is not really a parallax effect, it is just zooming in and out, for this you could use a css transition on the container element as shown in this example

transition:All 1s ease;
transform: scale(3) translateX(120px);