Parallax effect on added images

Hi,

I’m using the custom CSS / JS / HTML plugin to try and add an effect to my webpage. What I’m trying to do is have a vector drawing (“grow out”) from behind one of my widget panels as the user scrolls down. Once the drawing reaches a certain position, I’d like it to stop and then stay in a fixed position, regardless of future scrolling.

I used the following HTML and CSS to place the image:

HTML:

<div id="parallax-bg2"> 
<img id="mg2-1" src="wp-content/uploads/2017/04/cloud3.png" alt="cloud"/> 
</div>

CSS

.panel-row-style {
    background-position: fixed !important;
  	z-index: -2 !important
}

#parallax-bg2 {
	z-index: -1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: -600px; /* move left by half element's width */
	}
	#mg2-1 {
		position: absolute;
		top: 162px;
		left: 200px;
		}
}

This code works to place the drawing onto the website in the desired location, and the drawing floats over the background panels while floating under the widget panels, as desired. What code must I add to apply a parallax effect to the drawing so that it scrolls upward at a rate faster than the user is scrolling? i.e. it pops out from behind the widget panel as the user scrolls down.

Also, how might I make it so that once the drawing reaches a certain height, the parallax effect is cancelled and the image remains fixed?

Thanks for any help!

Hello there,

Based on what you’ve written, you are asking an advanced content creation which goes beyond Sydney theme and Page Builder features can offer. I am sorry, nothing we can do. I’d recommend you post your question to Stack Overflow which opens for general coding questions.

Regards,
Kharis